Ruka hadi maudhui makuu
Mafunzo ya AI

Geuza Majibu ya AI Kuwa Kurasa Zinazosomeka kwa Answer me with HTML

Jifunze jinsi Answer me with HTML inavyogeuza Markdown fupi iliyoandikwa na AI kuwa kurasa zenye muundo na mwonekano mzuri. Mafunzo haya yanaeleza usakinishaji, vidokezo vya kila siku, uonyeshaji wa moja kwa moja kupitia CLI, mandhari, vipengele, ukaguzi wa uandishi, mipangilio na hali ya hiari ya kuwashwa kila wakati.

Geuza Majibu ya AI Kuwa Kurasa Zinazosomeka kwa Answer me with HTML

Answer me with HTML Hufanya Nini

Answer me with HTML ni ujuzi wa wakala unaobadilisha majibu changamano kuwa kurasa za HTML zinazoeleweka na zinazojitegemea. Badala ya kuiomba modeli iandike kila kipengele cha HTML, kanuni ya CSS na koordinati za SVG, ujuzi huu huifanya modeli itengeneze rasimu fupi ya Markdown. CLI yake iliyojumuishwa hushughulikia mpangilio, urembo na uonyeshaji wa michoro.

Mgawanyo huu wa kazi hupunguza kiasi cha matokeo yanayotengenezwa na muda wa kusubiri. Katika kipimo cha mradi, ujuzi huu ulitumia wastani wa tokeni 923 za matokeo badala ya 6,873 na ulikamilisha majibu kwa sekunde 13 badala ya sekunde 46. Gharama iliyopimwa ilibaki karibu sawa kwa sababu zamu za ziada za wakala husoma tena muktadha wa mazungumzo.

Mfano wa ukurasa wa Answer me with HTML

Chombo hiki ni muhimu kwa taarifa zinazonufaika na muundo, zikiwemo maelezo ya usanifu, michakato yenye hatua nyingi, ulinganisho, ratiba za matukio, miti ya moduli na mapitio ya maandishi yenye maelezo. Swali rahisi bado linaweza kupata jibu rahisi la maandishi; wakala huamua wakati ukurasa unafaa isipokuwa ukiuombe wazi.

Vipengele Muhimu

  • Matokeo mafupi ya modeli: Modeli huandika maudhui badala ya mamia ya mistari ya HTML, CSS na SVG inayojirudia.
  • Mpangilio unaoendeshwa na msimbo: CLI hukokotoa nafasi za paneli na koordinati za michoro, hivyo kupunguza lebo zilizokatika na mapengo yasiyo sawa.
  • Uthibitishaji unaosaidia: Rasimu ikiwa na hitilafu, CLI huripoti mstari, kipengele na mfano sahihi ili wakala aweze kuirekebisha.
  • Vipengele vya kuona: Rasimu zinaweza kuwa na chati za mtiririko, michoro ya mfuatano, miti, ratiba za matukio, mipaka, maelezo, vizuizi vya funguo na thamani, vielekezi na majedwali ya ulinganisho.
  • Mandhari mbili: Chagua mandhari ya kihandisi ya blueprint au mandhari ya kadi ya shadcn. Zote zinaunga mkono hali angavu na nyeusi.
  • Matokeo yanayobebeka: Kila matokeo ni faili moja la HTML lisilo na viungo vya CDN au fonti za wavuti, hivyo linaweza kufunguliwa nje ya mtandao na kushirikiwa kwa urahisi.
  • Chanzo kilichopachikwa: Kila ukurasa huhifadhi Markdown iliyotumika kuutengeneza. Kidhibiti cha Copy source kwenye ukurasa hupata rasimu hiyo.
  • Ukaguzi wa uandishi: Rasimu za Kiingereza na Kichina hukaguliwa kwa sentensi ndefu, vifungu vyenye maneno mengi, kauli ya kutendwa na matatizo mengine yanayohusiana na mtindo.
Jibu la kuona la AI lililotengenezwa na ujuzi huu

Mahitaji na Usakinishaji

Unahitaji Node.js 20 au toleo jipya zaidi. Usakinishaji wa kawaida wa ujuzi hauhitaji npm install tofauti kwa sababu CLI na vitegemezi vyake vya wakati wa utekelezaji vimejumuishwa kwenye ujuzi.

Chaguo la 1: Ruhusu Wakala Wako Uisakinishe

Njia inayopendekezwa ni kumpa wakala wako wa uandishi wa msimbo ombi la usakinishaji. Kisakinishi kinaunga mkono Claude Code, Codex, Cursor, OpenCode na mawakala wengine wengi.

Sakinisha ujuzi wa Answer me with HTML kwa kuendesha npx -y skills add QingYunA/answer-me-with-html -g -y. Pitisha -a pamoja na jina linalofaa la wakala, kama vile -a claude-code. Kisha soma SKILL.md yake na uunde ukurasa unaoeleza salamu ya njia tatu ya TCP.

Chaguo la 2: Tumia Kisakinishi Shirikishi

Endesha amri ifuatayo na uchague mawakala ambao ujuzi unapaswa kusakinishwa:

npx skills add QingYunA/answer-me-with-html

Amri hii hutumia kisakinishi cha vercel-labs/skills, kinachounga mkono zaidi ya mawakala 70.

Chaguo la 3: Sakinisha Programu-jalizi ya Claude Code

Ndani ya Claude Code, ongeza marketplace na usakinishe programu-jalizi:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

Chaguo la 4: Sakinisha Mwenyewe

Clone hazina na unakili saraka ya ujuzi kwenye folda ya ujuzi ya wakala wako. Kwa Claude Code, tumia:

git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

Maeneo mengine yaliyoandikwa ni pamoja na ~/.codex/skills/ kwa Codex, ~/.cursor/skills/ kwa Cursor na ~/.config/opencode/skill/ kwa OpenCode. Hakuna usanidi wa ziada unaohitajika baada ya usakinishaji.

Tengeneza Ukurasa Wako wa Kwanza

  1. Uliza swali lenye kina. Jaribu Explain the TCP three-way handshake, Map out how the modules in this repository fit together au Redis or Memcached for our cache?.
  2. Mruhusu wakala achague uwasilishaji. Huandika rasimu fupi ya Markdown na kuipeleka kwenye CLI iliyojumuishwa.
  3. Fungua matokeo. Kwa chaguo-msingi, ukurasa uliotengenezwa hufunguka kwenye kivinjari chako.
  4. Tafuta faili lililohifadhiwa. Kurasa zilizotengenezwa huhifadhiwa chini ya ~/.answer-me-with-html/pages/.
  5. Tumia vidhibiti vya ukurasa. Vidhibiti vilivyo kwenye kona ya juu kulia hubadilisha mandhari au hali ya rangi na kunakili Markdown ya chanzo.

Wakala asipochagua ujuzi kiotomatiki, ongeza maagizo ya moja kwa moja kama Explain it in HTML.

Ukurasa wa maelezo ya kiufundi uliotolewa

Jinsi Chombo Huchagua Vipengele

Wakala hulinganisha umbo la taarifa na kipengele kinachofaa:

  • flow huwakilisha usanifu, minyororo ya miito, maamuzi na mifumo iliyopangwa katika makundi.
  • sequence huonyesha ujumbe unaobadilishwa na washiriki kadhaa kwa muda.
  • tree huonyesha folda, moduli na taksonomia.
  • timeline hupanga historia, matoleo au awamu.
  • limits hulinganisha thamani na kikomo chake.
  • annot huongeza madokezo ya kiwango cha maneno kwenye sentensi.
  • kv huonyesha metadata au taarifa ya kizuizi cha kichwa.
  • callout huangazia hitimisho, onyo au kidokezo.
  • Majedwali ya Markdown yanaunga mkono ulinganishaji; visanduku vyenye ok, no au warn hugeuka kuwa alama za hali za kuona.

Andika na Uonyeshe Rasimu Mwenyewe

Unaweza kutumia CLI iliyojumuishwa bila wakala. Rasimu huanza na front matter ya hiari na hutumia kila kichwa cha kiwango cha pili kama paneli. Mfano ufuatao huunda michoro ya sequence na flow kwa kupeana mkono kwa TCP:

---
title: TCP three-way handshake
theme: blueprint
---
## A Three-way handshake {span=2}
```sequence num
Client -> Server: SYN, seq=x
Server -> Client: SYN+ACK, seq=y, ack=x+1
Client -> Server: ACK, ack=y+1
note Client, Server: ESTABLISHED
```

## C State changes {span=2}
```flow LR
(CLOSED) -> LISTEN: passive open
LISTEN -> SYN_RCVD: get SYN / send SYN+ACK
SYN_RCVD -> *ESTABLISHED: get ACK
```

Ndani ya kichwa cha paneli, span=2 hufanya paneli iwe na upana wa safu mbili, rows=2 huifanya iwe na urefu wa mistari miwili, na bare huondoa upau wa kichwa. Unaweza pia kuongeza metadata kwa meta="small text".

Onyesha Kutoka kwenye Mstari wa Amri

Faili ya CLI ni scripts/am.mjs ndani ya skill iliyosakinishwa. Kutoka kwenye checkout ya hazina, fafanua njia yake na utekeleze amri unayotaka:

AM=skills/answer-me-with-html/scripts/am.mjs

node $AM render examples/tcp.en.md
node $AM render notes.md -o out.html --no-open
node $AM render notes.md --theme shadcn
node $AM lint notes.md
node $AM list
node $AM config

Amri ya kwanza huonyesha rasimu na kuifungua. Ya pili huchagua jina la faili la pato na kuzuia kufunguliwa kwa kivinjari. Ya tatu hubadilisha mandhari kwa utekelezaji mmoja. Amri zilizobaki huendesha ukaguzi wa uandishi, huorodhesha vipengele na huonyesha mipangilio.

Mawakala kwa kawaida hutuma rasimu kupitia ingizo la kawaida. Unaweza kufanya vivyo hivyo:

node $AM render - <<'AM_EOF'
## A One panel
```flow
A -> B: hello
```
AM_EOF

Tumia am help <component> kukagua sintaksia kamili ya kipengele mahususi. Weka kigezo cha mazingira cha AM_HOME ikiwa ungependa kurasa zilizozalishwa zihifadhiwe mahali pengine badala ya saraka chaguo-msingi.

Sanidi Mandhari, Tabia ya Kivinjari na Ukaguzi wa Uandishi

Mipangilio inadhibitiwa kwa amri, kwa hivyo huhitaji kuhariri faili za usanidi mwenyewe. Thamani huhifadhiwa katika ~/.answer-me-with-html/config.json.

Kwa usakinishaji wa programu-jalizi ya Claude Code, fungua amri ya usanidi shirikishi au badilisha mpangilio moja kwa moja:

/answer-me-with-html:config
/answer-me-with-html:config open off

Ukitumia wakala mwingine, tumia /answer-me-with-html config open off au umwombe aache kufungua kivinjari. Kutoka kwenye terminali, tumia:

am config
am config set open off
am config reset
  • open chaguo-msingi ni on na hudhibiti iwapo ukurasa mpya utafunguliwa kwenye kivinjari.
  • always chaguo-msingi ni on, lakini huwa na athari tu wakati muunganisho wa hiari wa hali ya kila wakati umesakinishwa.
  • theme chaguo-msingi ni blueprint na pia hukubali shadcn.
  • mode hukubali auto, light au dark.
  • style hukubali off, 80 au strict. Hali chaguo-msingi ya 80 huonya bila kuzuia uonyeshaji.

Mandhari iliyotangazwa kwenye rasimu hubatilisha chaguo-msingi iliyosanidiwa. Bendera za --open na --no-open hubatilisha tabia ya kivinjari kwa uonyeshaji mmoja pekee.

Mifano ya mandhari nyepesi na nyeusi za ukurasa

Vidokezo vya Juu

Washa Hali ya Kila Wakati

Kwa kawaida, wakala huunda ukurasa tu wakati jibu linapokuwa na manufaa zaidi likiwa na ukurasa. Hali ya kila wakati huongeza ukurasa mdogo wakati jibu lina hitimisho, muhtasari, mpango, ulinganishaji, ukaguzi au maelezo. Kurasa za kawaida hutumia paneli mbili hadi nne na huonyeshwa bila kufungua kivinjari. Mazungumzo ya kawaida na majibu yasiyo na hitimisho hubaki bila mabadiliko.

Kwa Claude Code, sakinisha programu-jalizi ya ziada:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html-always@answer-me-with-html

Isitishe bila kuiondoa kwa kutekeleza:

/answer-me-with-html:config always off

Mawakala wengine wanaweza kutumia kanuni iliyoandikwa ya hali ya kila wakati katika faili yao ya kanuni za jumla, kama vile AGENTS.md. Kanuni hiyo inapaswa kumwambia wakala aunde ukurasa mdogo kwa hitimisho na kuuonyesha kwa --no-open, huku akiruka mazungumzo ya kawaida, matokeo ya amri pekee na maombi ya maandishi tupu.

Tumia Uthibitishaji Mkali wa Uandishi

Ukaguzi wa uandishi unatokana na mawazo yanayoweza kukaguliwa na mashine yaliyorekebishwa kutoka ASD-STE100. Unapendelea sentensi fupi, maneno ya kawaida, amri za moja kwa moja na istilahi thabiti. Hatua za Kiingereza zinapaswa kubaki chini ya maneno 20, maelezo chini ya maneno 25, na aya zisiwe na zaidi ya sentensi sita. Ukaguzi wa Kichina hutumia vikomo vinavyolingana vya herufi na huashiria miundo fulani inayojirudia au isiyo wazi.

Washa uthibitishaji wa kuzuia kimataifa kwa:

/answer-me-with-html:config style strict

Unaweza pia kubainisha style: katika rasimu ili kudhibiti uthibitishaji wa ukurasa huo.

Chagua Kiolezo Sahihi

Kiolezo chaguo-msingi cha sheet hupanga taarifa kama gridi ya paneli. Tumia doc kwa ukurasa wa safu moja wenye jedwali la yaliyomo. Kwa kiolezo cha sheet, sehemu ya cols katika taarifa za mwanzo hudhibiti idadi ya safu.

Badilisha Uwasilishaji kwa Kila Ukurasa

Weka chaguo za uwasilishaji katika taarifa za mwanzo za rasimu wakati ukurasa mmoja unahitaji mipangilio tofauti:

---
template: sheet
theme: shadcn
title: Ulinganisho wa akiba
a subtitle: Redis na Memcached
cols: 3
source: Mapitio ya ndani ya usanifu
---

Sehemu za ziada za taarifa za mwanzo huonyeshwa chini ya kichwa cha ukurasa. Wakati kipengele kilichojengwa ndani hakifai, muundo wa rasimu pia unaunga mkono vizuizi ghafi vya HTML au SVG, ingawa vipengele vilivyojengwa ndani hutoa manufaa ya mpangilio wa kiotomatiki.

Tengeneza Mradi Kwenye Kompyuta Yako

Wachangiaji wanahitaji usakinishaji wa kawaida wa vitegemezi kwa sababu chanzo na majaribio ya hazina vinatumika:

git clone https://github.com/QingYunA/answer-me-with-html.git
cd answer-me-with-html
npm install
npm test
npm run build

Endesha npm run build baada ya kubadilisha faili zilizo chini ya src/ ili kujenga upya skills/answer-me-with-html/scripts/am.mjs iliyofungwa. Vitegemezi viwili vya wakati wa utekelezaji ni marked kwa uchanganuzi wa Markdown na Dagre kwa mpangilio wa chati za mtiririko; vyote vinafungwa ndani ya CLI.

Hitimisho

Answer me with HTML hutenganisha uundaji wa maudhui na ujenzi wa ukurasa. Wakala wako huandika rasimu fupi ya Markdown, huku CLI ikitoa mipangilio, michoro, mandhari, uthibitishaji na faili ya HTML inayobebeka na kufanya kazi nje ya mtandao. Anza kwa kusakinisha ujuzi huo na kuomba maelezo ya picha. Kisha boresha mtiririko wa kazi kwa uonyeshaji wa moja kwa moja wa CLI, mandhari kwa kila ukurasa, ukaguzi mkali wa uandishi au hali ya hiari ya kuwashwa kila wakati.