Sebenzisa i-smyw ukuze i-Agent yokubhala ikhodi idwebe i-prototype ngaphambi kokubhala ikhodi: Isifundo esiphelele sokufaka, ukubuyekeza nokunikeza impendulo

Yini i-smyw

smyw, okusho ukuthi “show me you want”, iyi-skill eyenzelwe ama-Agent okubhala ikhodi, futhi isebenza ku-Claude Code, DeepSeek Harness nakwamanye ama-Agent asekela SKILL.md. Ngaphambi kokuthi i-Agent iguqule amakhasi, izinqubo zokusebenzisana noma izixhumi ezibonakalayo zangaphambili nangemuva, iqala ngokufunda ikhodi, ibhale i-spec ehlelekile, bese ikhiqiza i-prototype ye-HTML yefayela elilodwa engavulwa ngaphandle kwe-inthanethi.

Le prototype akuwona umklamo wokugcina obonakalayo, kodwa iyi-wireframe enokwethembeka okuphansi esetshenziselwa ukuveza ukwakheka kwamamojuli, izindawo zokubekwa, ubudlelwano bezibangeli kanye nezinguquko zomsebenzi. Ukuqaliswa okusemthethweni kusafanele kulandele imithetho yokuklama ekhona kuphrojekthi.

Iyiphi inkinga eyixazululayo

Inqubo evamile yokubhala ikhodi nge-Agent ivame ukusuka ezidingweni ezibhaliwe iye ngqo ekuqalisweni, okungadala ukungaqondani ngesakhiwo sekhasi, indlela yokusebenzisana noma imingcele yezixhumi ezibonakalayo. I-smyw ingeza isigaba sokuqinisekisa esibonakalayo phakathi kwezidingo nekhodi:

1. Umsebenzisi wethula isidingo somsebenzi.
2. I-Agent ifunda ikhodi yephrojekthi bese ikhiqiza i-spec.json.
3. Iskripthi sokwakha siqinisekisa i-spec bese sikhipha i-preview.html.
4. Umsebenzisi ubuka, abonise, ahudule futhi abhale imibono ngohlelo esipheqululini.
5. Umsebenzisi ukopisha impendulo ayibuyisele engxoxweni.
6. I-Agent isebenzisa impendulo bese ikhiqiza enye inguqulo ye-prototype.
7. Ngemva kokuqinisekiswa kohlelo ngumsebenzisi, i-Agent iqala ukubhala ikhodi.

Okubalulekile nge-smyw akukhona ukuthatha indawo yamathuluzi okuklama, kodwa ukwenza umsebenzisi ne-Agent yokubhala ikhodi baqonde ngokufanayo, ngaphambi kokuqalisa, ukuthi “kuzoguqulwa ini, kubekwe kuphi, futhi kuqalwe kanjani”.

Imisebenzi esemqoka

Omaka abanezinombolo nokuqhathanisa ngaphambi nangemuva

I-prototype idweba isikrini esiphelele ngokwesakhiwo sekhasi langempela, bese isebenzisa imibala ukuhlukanisa izinguquko: ophuzi usho ukulungiswa, oluhlaza usho okusha, obomvu usho ukususwa. Amamojuli angaphandle kuphela aguqukile ayanikezwa izinombolo, ukuze kugwenywe omaka abaningi abaphindaphindayo ezintweni zangaphakathi.

Uma uchofoza inombolo ku-canvas noma uhlu lwezinguquko olungakwesokunxele, i-canvas igxila endaweni ehambisanayo. Ngakwesokudla kuboniswa ama-wireframe wendawo ngaphambi nangemuva koshintsho, umehluko wezinkambu, incazelo ye-Agent, izingxenye zekhodi kanye nemisebenzi noma izixhumi ezibonakalayo ezihlobene.

Uma imojuli yonke ingokuqukethwe okusha, ingxenye ethi “ngaphambi koshintsho” emininingwaneni izobonisa ukuthi le moduli ibingekho ngaphambilini. Izinkinobho nemibhalo yangaphakathi ngeke kusanikezwa izinombolo ngakunye.

Ukuveza ngokunembile ukuhanjiswa kwengxenye

Uma ingxenye isuka kwenye indawo iye kwenye, indawo yokuqala ibonisa “isusiwe” ngokubomvu, kanti indawo entsha ibonisa “ingenisiwe” ngokuluhlaza. Amarekhodi amabili angazulazula aye komunye nomunye, okusiza ukuqinisekisa ukuthi lokhu akukhona ukususwa okukodwa kanye nokwengezwa okungahlobene.

Izendlalelo, amamenyu nokuqukethwe okunwetshwayo

Izigelekeqe, amadrowa, amamenyu okwehlayo, amabhamuza nokuqukethwe okuvela kuphela ngemva kokuchofoza kubekwa kuphaneli ezimele eduze kwesikrini esikhulu, bese kuxhunywa ngen线 kwinkinobho ebangela isenzo. Iphaneli eyodwa ingaxhunyaniswa nezindawo eziningi zokuyivula; iphaneli esusiwe iboniswa ngomugqa wamachashazi obomvu.

Amamenyu anezigaba eziningi aqhubeka ehlukaniswa abe ngamaphaneli asondelene. Okuqukethwe okunwetshwa endaweni yakho kushiya indawo enomugqa wamachashazi onsomi ekhasini, okubonisa lapho kuzovela khona ngemva kokunwetshwa. Imigqa yokushintsha ikhasi nesimo ifihlwa ngokuzenzakalela; ungayibuka lapho ukhetha izakhi ezifanele, noma uyivule yonke ngokusebenzisa “Yonke imigqa yokuxhuma”.

Imodi yokubonisa eclikekayo

Chofoza u-“▶ Bonisa” ekhoneni eliphezulu kwesokudla ukuze i-prototype ifihle ozimele bezinguquko futhi ilingise ukusebenza kwangempela esikrinini esisodwa. Ingabonisa ukunwetshwa kwemenyu, ukuphuma kwedrowa, ukuvulwa kwesigelekeqe, ukushintsha kwesimo senkinobho kanye nokushintsha kwamakhasi.

Uma uchofoza indawo engasebenziseki, zonke izindawo ezichofozekayo manje zikhanyisa uhlaka oluluhlaza okwesibhakabhaka, futhi ngakwesokunxele kubhalwa izenzo ezingenziwa. Imodi yokubonisa isekela ukubuyela emuva, ukuqala phansi, kanye nokushintsha phakathi kokuthi “ngaphambi koshintsho” kanye nokuthi “ngemva koshintsho”.

Ukuhlela ngokuqondile nokuhlanganisa impendulo

• Hlela isakhiwo: Hudula izingxenye ukuze ulungise ukuhleleka noma ubudlelwano bazo neziqukathi, futhi uguqule umbhalo, uhlobo, ububanzi nokuhlelwa.
• Guqula indlela: Guqula imojuli esemgqeni ibe isigelekeqe, imenyu eyehlayo, idrowa noma ibhamuza; uhlelo luzokhiqiza inkinobho ebangela isenzo nemigqa yokuxhuma.
• Hlehlisa futhi wenze kabusha: Sekela ukusebenzisa u-Ctrl noma u-Command kanye no-Z ukuze uhlehlise isenzo.
• Amanothi ezakhi: Engeza umbono entweni ethile ngokwezigaba zendawo, ukusebenzisana, uhlobo lwengxenye, isitayela, umbhalo noma ukushoda komsebenzi.
• Izinga lombono: Amanothi angamakwa ngokuthi “kumele kulungiswe”, “isiphakamiso” noma “umbuzo”.
• Impendulo iyonke: Rekhoda imibono yesitayela, iziqondiso zereferensi, bese uphendula imibuzo yokuqinisekisa ebhalwe kusengaphambili yi-Agent.
• Ukubuyisa ipheshi: Izinguquko zesakhiwo zengezwa ekupheleni kwempendulo njengamapheshi athola indawo nge-ID kuphela; akudingeki kubuyiswe lonke uhlelo.

Ukulungiselela ngaphambi kokufaka

Ukwakha i-prototype ye-smyw kudinga kuphela i-Node.js 18 noma inguqulo engaphezulu. Iphrojekthi uqobo ayidingi iseva futhi ayinakho ukuncika ngesikhathi sokusebenza. Qala ngokuqinisekisa inguqulo ye-Node.js:

node --version

Uma uhlela ukuqhuba izivivinyo zokuphela kuye ekupheleni zendawo yokugcina noma ukhiqize kabusha izithombe-skrini, uzodinga nokufaka i-Google Chrome. Indlela yokufaka engeyona ezenzakalelayo ingachazwa ngokusebenzisa i-CHROME environment variable.

Faka i-smyw skill

Isinyathelo sokuqala: Klona indawo yokugcina

git clone https://github.com/nishuzumi/show-me-you-want-skill.git
cd show-me-you-want-skill

Isinyathelo sesibili: Beka i-skill endaweni i-Agent engayifunda

Abasebenzisi be-Claude Code bangakha i-symbolic link yomhlaba wonke ukuze wonke amaphrojekthi asebenzise i-smyw:

ln -s "$PWD/skills/smyw" ~/.claude/skills/smyw

Uma i-Agent ifunda nohlu olujwayelekile lwama-skills, ungayixhumanisa naku:

ln -s "$PWD/skills/smyw" ~/.agents/skills/smyw

Uma ufuna ukuyivumela kuphrojekthi eyodwa kuphela, ikopishe uye ohlwini lwendawo lwama-skills lwaleyo phrojekthi:

cp -r skills/smyw <iphrojekthi_yakho>/.claude/skills/smyw

Ngemva kokufaka, ungacela i-Agent isidingo esizoguqula isixhumi esibonakalayo noma isixhumi esibonakalayo, noma usho ngokuqondile: “Qala ungibonise i-prototype.”

Qala usebenzise izibonelo zendawo yokugcina

Indawo yokugcina isivele inezibonelo ezimbili ze-HTML ezikhiqiziwe. Akudingeki uqale iseva; zivule ngokuqondile esipheqululini:

• skills/smyw/examples/helpdesk-ai/preview.html: isibonelo esiphelele sesikrini esisodwa esengeza izimpendulo eziphakanyiswe yi-AI edeskini lokusekela amakhasimende.
• skills/smyw/examples/task-tags/preview.html: isibonelo samakhasi amaningi esibonisa ukwengezwa kwekhasi lonke nokususwa kwekhasi lonke.

Ngemva kokulungisa i-spec yesibonelo, ungaphinda ukhiqize ukubuka kuqala ngomyalo olandelayo:

node skills/smyw/scripts/build.mjs skills/smyw/examples/helpdesk-ai/spec.json

Umphumela wokwakha uyifayela elilodwa elingaphambili kuphela, elingavulwa futhi libuyekezwe ngaphandle kwe-inthanethi.

Ukusetshenziswa okuyisisekelo kusukela esidingweni kuya ku-prototype

Isinyathelo sokuqala: Chazela i-Agent isidingo

Chaza umgomo webhizinisi nemingcele ngokusemandleni, kodwa akudingeki unqume yonke imininingwane yesixhumi esibonakalayo kusenesikhathi. Isibonelo:

Sicela ungeze impendulo ephakanyiswe yi-AI emininingwaneni yethikithi lokusekela amakhasimende. Qala ufunde ikhasi nezixhumi ezibonakalayo ezikhona, ungabhali ikhodi ngokushesha; sebenzisa i-smyw ukwakha i-prototype ukuze ngiqinisekise indawo yokuvula idrowa, inqubo yokushintsha impendulo kanye nezixhumi ezibonakalayo ezithintekayo.

Isinyathelo sesibili: Hlola i-spec ekhiqiziwe nokubuka kuqala

I-Agent izogcina uhlelo oluhlelekile ohlwini olufana nalolu:

.smyw/<usuku>-<igama>/spec.json

Ngemva kwalokho isebenzisa i-build.mjs ukuqinisekisa nokukhiqiza i-preview.html. Ngemva kokuvula ukubuka kuqala, hlola ngokulandelana okulandelayo:

1. Qala ngokusebenzisa “Linganisa” ukuze ufake i-canvas ephelele ngaphakathi kwendawo yokubuka.
2. Hlola ukuthi ozimele bezinguquko abaphuzi, abaluhlaza nababomvu bayahambisana yini nesidingo.
3. Chofoza uhlu lwezinguquko ngokulandelana ukuze uqinisekise ukuqhathanisa kwangaphambi nangemuva kanye nezinguquko zezinkambu.
4. Hlola ukuthi izingxenye, imisebenzi nezixhumi ezibonakalayo ezihlobene ziyahambisana yini nekhodi ekhona.
5. Vula “Izinguquko zenqubo” kanye “Nezinguquko zangemuva” ukuze uhlole umthelela phakathi kwezingqimba.
6. Faka imodi yokubonisa bese uchofoza ngempela amamenyu, izigelekeqe, amadrowa nezinkinobho zesimo.

Isinyathelo sesithathu: Hlela futhi ubhale amanothi ohlelweni

Uma isakhiwo singahambisani nalokho okulindelekile, shintshela kokuthi “Hlela uhlelo”, uhudule izingxenye ngokuqondile, noma uguqule okuqukethwe okusemgqeni kube yiphaneli elendlalekile. Ngemibono engafanele ukulungiswa ngokuqondile, khetha into bese ufaka inothi, ukhethe isigaba nokubaluleka.

Kuyanconywa ukuhlukanisa ngokucacile izinhlobo ezintathu zempendulo:

• Kumele kulungiswe: Izinkinga okufanele zixazululwe ngaphambi kokuqaliswa.
• Isiphakamiso: I-Agent ingahlola ukuthi iyasamukela yini, kodwa uma ingasamukeli kufanele ichaze isizathu.
• Umbuzo: Kudingeka uphendulwe futhi ucaciswe kuqala, bese kunqunywa ukuthi kulungiswa kanjani.

Isinyathelo sesine: Kopisha impendulo uyibuyisele ku-Agent

Yiya ekhasini elithi “Impendulo”, engeza imibono yesitayela iyonke, uphendule imibuzo elindele ukuqinisekiswa, bese uchofoza “Kopisha impendulo”. Namathisela i-Markdown ekhiqiziwe engxoxweni ye-Agent.

I-Agent ivamise ukugcina impendulo njenge-feedback-v<N>.md, bese iqhuba:

node skills/smyw/scripts/apply-feedback.mjs .smyw/<dir>/feedback-v1.md .smyw/<dir>/spec.json
node skills/smyw/scripts/build.mjs .smyw/<dir>/spec.json

I-apply-feedback.mjs yenza ikhophi eyisipele ye-spec endala, isebenzise amapheshi akumpendulo bese yengeza inombolo yenguqulo. Uma inguqulo yempendulo ingahambisani ne-spec yamanje, iskripthi siyokwenqaba ukuyisebenzisa ukuze sigweme ukubhala phezu kohlelo olusha.

Isinyathelo sesihlanu: Qinisekisa ngaphambi kokuqala ukubhala ikhodi

Hlola i-prototype elandelayo futhi uqinisekise ukuthi yonke imibono ethi “kumele kulungiswe” isetshenzisiwe, kanti “imibuzo” iphenduliwe. Uma zingasekho ezinye izinkinga, chofoza “Qinisekisa uhlelo, ungaqala ukusebenza”, bese uvumela i-Agent ukuthi ingene esigabeni sokuqalisa esisemthethweni.

Ukuqonda isakhiwo esiyisisekelo se-spec

I-smyw isebenzisa isihlahla esisodwa ukuchaza isixhumi esibonakalayo ngaphambi nangemuva kwezinguquko. I-node ngayinye imaka ushintsho nge-change, kanti ukusebenzisana nezimo kuchazwa yi-on, hidden kanye ne-states.

{
  "id": "reply",
  "type": "form",
  "label": "Phendula ikhasimende",
  "component": "<ReplyBox>",
  "change": "modified",
  "before": { "label": "Phendula" },
  "children": [
    {
      "id": "reply-quick",
      "type": "select",
      "text": "Impendulo esheshayo",
      "change": "removed"
    },
    {
      "id": "reply-polish",
      "type": "button",
      "label": "Ukucwengwa yi-AI",
      "change": "added",
      "fn": "openDraftDrawer({ mode: \"polish\" })",
      "on": [
        { "action": "open", "target": "ai-drawer" }
      ]
    }
  ]
}

Lesi sibonelo sisho ukuthi isihloko sefomu lokuphendula siguqulwe sisuka kokuthi “Phendula” saba “Phendula ikhasimende”, impendulo esheshayo ebikhona isusiwe, futhi kwengezwe inkinobho evula iphaneli eseceleni ye-AI. component imele ingxenye yekhodi, kanti fn imele ukuziphatha okuhlobene noma indawo yokubeka i-API.

Ukuze ubone incazelo ephelele yezinkambu, bheka spec-format.md; imithetho yokusebenza ye-Agent itholakala ku- SKILL.md.

Amasu Okusebenzisa Athuthukile

Hlola isixhumi esibonakalayo, ukugeleza nomuva ngesikhathi esisodwa

Ungagxili kuphela ekuhlelweni kwekhasi. Ezicini ezibandakanya ama-API noma izinguquko zedatha, kufanele futhi uhlole ukugeleza kwezinqubo nezinguquko zemuva. Ukugeleza kwezinqubo kuqhathanisa izinguquko zangaphambi nangemuva ngokomsebenzisi, i-frontend, i-backend, isizindalwazi kanye nezinsizakalo zangaphandle; izixhumanisi zokuthola indawo ezisezinyathelweni zingabuyela entweni ehambisanayo yesixhumi esibonakalayo.

Sebenzisa ibha yamathuluzi ukuqonda umthelela wekhodi

• Vula u-“ƒ Imisebenzi” ukuze ubuke ukuziphatha noma indawo ye-API engemuva kwento.
• Vula “Izingxenye” ukuze ubuke ingxenye yekhodi ehambisana nemojuli.
• Vula “Fiphaza okungashintshiwe” ukuze ugxile ebangeni elithintwe yilesi sidingo.
• Vula “Yonke imigqa yokuxhuma” kuphela lapho udinga ukuhlola ubudlelwano obuphelele bezibangeli.

Sebenzisa imodi yokubonisa ukuqinisekisa izinguquko zesimo

Imodi yokubonisa ayisetshenziselwa ukubuka ukuzulazula kuphela; ilungele nokuqinisekisa ukuxhumana kwezimo. Isibonelo, inkinobho ethi “Faka esikhundleni ebhokisini lokuphendula” ingafaka uhlaka lokuphendula ebhokisini lokuphendula bese ivala iphaneli eseceleni. Amazwana aqopha ngokuzenzakalelayo ikhasi obukulo ngaleso sikhathi, okuqukethwe obekuvuliwe nomlando wokuchofoza, okusiza i-Agent ukuphinda idale inkinga.

Gcina ama-ID ezinzile

Izinguquko zesakhiwo kwimpendulo zitholwa nge-node ID, ngakho-ke kufanele ugcine ama-ID ama-node akhona ezinzile ngangokunokwenzeka phakathi kwemijikelezo eminingi yokuthuthukisa. Ngaphandle kokuthi into ngokwayo isusiwe noma incazelo yayo ishintshe ngokuphelele, ungawashintshi ama-ID ngokunganaki.

Naka ukuqinisekiswa kokwakhiwa

build.mjs ihlola izinkinga ezivamile ezifana nama-ID aphindaphindiwe, ama-node ashintshiwe angenayo i-before, ukusebenzisa “(akushintshiwe)” esikhundleni semojuli yangempela, namaphaneli entanta angenazo izibangeli. Uma kuvela iphutha, qala ngokulungisa i-spec ngaphambi kokubuyekeza umphumela okhiqiziwe.

Phatha amawindi amancane nemikhawulo ye-sandbox

Kumawindi amancane afana nokubuka kuqala okuseceleni kwe-Agent, uhlu lwezinguquko lufakwa enkinobheni ethi “☰ Izinguquko”, kanti imininingwane iboniswa phezu kwekhanvasi. Ku-sandbox enemikhawulo, isiphequluli singase senqabele ukulondoloza inqubekelaphambili noma ukukopisha ngokuzenzakalelayo; uma ukukopisha kwehluleka, ikhasi lizokhetha ngokuzenzakalelayo okuqukethwe kwempendulo, bese ucindezela u-Ctrl noma u-Command kanye no-C.

Ukuthuthukiswa Nokuhlolwa Kwephrojekthi

Uma udinga ukulungisa i-smyw uqobo, ungaqalisa ukuhlolwa kokuphela kuye ekupheleni noma ukhiqize kabusha izithombe-skrini ze-README:

node tests/e2e.mjs
node tests/readme-shots.mjs

Ukuhlola kudinga i-Node.js 18 noma inguqulo engaphezulu kanye ne-Google Chrome. Uma i-Chrome ingekho endleleni ezenzakalelayo, ungayicacisa kanje:

CHROME=/path/to/chrome node tests/e2e.mjs

Iphrojekthi isebenzisa ilayisensi ye-MIT.

Isifinyezo

i-smyw iguqula ukugeleza komsebenzi we-coding Agent kusuka kokuthi “qonda isidingo bese ubhala ikhodi ngokuqondile” kube “qala ngokufunda ikhodi, ukhiqize i-spec, ubonise i-prototype esebenzisanayo, uqoqe impendulo ehlelekile, bese uqala ukuyisebenzisa”. Ifaneleka kakhulu izidingo ezibandakanya ukuhlelwa kwekhasi, amaphaneli antantayo, ukushintsha kwezimo, ukugeleza kwamakhasi amaningi noma ama-API e-frontend ne-backend.

Qala ngesibonelo esikurephozithori, uqinisekise ukuthi i-Agent iyakwazi ukufunda i-skill, bese uyisebenzisa kumaphrojekthi angempela. Ngokusebenzisa omaka bezinguquko, imodi yokubonisa, ukuhlela ngokuqondile, amazwana nempendulo enezinguqulo, unganciphisa kakhulu ukungaqondani kwezidingo futhi wenze ukubhala ikhodi okusemthethweni kusekelwe esixazululweni esivele siqinisekisiwe.