Tumia smyw kuwawezesha mawakala wa usimbaji kuchora mfano kabla ya kuandika msimbo: Mwongozo kamili wa usakinishaji, ukaguzi na maoni

smyw ni nini

smyw, yaani “show me you want”, ni skill inayolenga Agent za uandishi wa msimbo, inayofaa kwa Claude Code, DeepSeek Harness na Agent nyingine zinazotumia SKILL.md. Huifanya Agent isome msimbo kwanza, iandike spec iliyopangwa, kisha itengeneze prototipu ya HTML ya faili moja inayoweza kufunguliwa bila mtandao kabla ya kurekebisha kurasa, mtiririko wa mwingiliano au API za mbele na nyuma.

Prototipu hii si muundo wa mwisho wa kuona, bali ni wireframe yenye uaminifu mdogo inayotumika kueleza muundo wa moduli, nafasi za mpangilio, uhusiano wa vichochezi na mabadiliko ya utendaji. Utekelezaji rasmi bado unapaswa kufuata viwango vya muundo vilivyopo kwenye mradi.

Inatatua tatizo gani

Mtiririko wa kawaida wa uandishi wa msimbo kwa kutumia Agent mara nyingi huanza moja kwa moja kutoka mahitaji yaliyoandikwa hadi utekelezaji, jambo linaloweza kusababisha kutokuelewana kuhusu muundo wa ukurasa, namna ya mwingiliano au mipaka ya API. smyw huongeza hatua ya uthibitishaji wa kuona kati ya mahitaji na msimbo:

1. Mtumiaji huwasilisha hitaji la utendaji.
2. Agent husoma msimbo wa mradi na kutengeneza spec.json.
3. Script ya ujenzi hukagua spec na kutoa preview.html.
4. Mtumiaji huangalia, kuonyesha, kuburuta na kutoa maelezo kuhusu mpango kwenye kivinjari.
5. Mtumiaji hunakili maoni na kuyatuma tena kwenye mazungumzo.
6. Agent hutumia maoni na kutengeneza toleo linalofuata la prototipu.
7. Baada ya mtumiaji kuthibitisha mpango, Agent huanza kuandika msimbo.

Lengo kuu la smyw si kuchukua nafasi ya zana za usanifu, bali kuwawezesha mtumiaji na Agent ya uandishi wa msimbo kufikia uelewano kuhusu “nini kitabadilishwa, kitawekwa wapi na kitaanzishwaje” kabla ya utekelezaji.

Vipengele muhimu

Alama zenye nambari na ulinganisho wa kabla na baada

Prototipu huchora skrini kamili kulingana na mpangilio wa ukurasa halisi na hutumia rangi kutofautisha mabadiliko: njano huonyesha marekebisho, kijani huonyesha yaliyoongezwa, na nyekundu huonyesha yaliyofutwa. Ni moduli za nje pekee zilizobadilika zinazowekewa nambari, ili kuzuia alama nyingi zinazorudiwa kwenye vipengele vya ndani.

Baada ya kubofya nambari kwenye turubai au kipengele cha mabadiliko kilicho upande wa kushoto, turubai hulenga eneo linalolingana. Upande wa kulia huonyesha wireframe ya eneo hilo kabla na baada ya mabadiliko, tofauti za sehemu, maelezo ya Agent, vipengele vya msimbo na vitendaji au API zinazohusiana.

Ikiwa moduli nzima ni maudhui mapya, sehemu ya “kabla ya mabadiliko” katika maelezo itaonyesha kuwa moduli hiyo haikuwepo awali. Vitufe na maandishi ya ndani havitawekewa nambari moja baada ya nyingine.

Kueleza kwa usahihi uhamishaji wa vipengele

Kipengele kinapohamishwa kutoka sehemu moja hadi nyingine, nafasi ya awali huonyesha “imehamishwa” kwa rangi nyekundu, na nafasi mpya huonyesha “imehamia” kwa rangi kijani. Rekodi hizo mbili zinaweza kuelekeza kutoka moja hadi nyingine, ili kuthibitisha kuwa si ufutaji mmoja unaofuatwa na uongezaji mwingine usiohusiana.

Madirisha ibukizi, menyu na maudhui yanayopanuka

Madirisha ibukizi, droo, menyu kunjuzi, viputo na maudhui yanayopanuka baada ya kubofya huwekwa kwenye paneli huru kando ya skrini kuu, na kuunganishwa kwa mstari na kitufe kinachoyawasha. Dirisha ibukizi linaweza kuhusishwa na vianzio vingi, huku dirisha lililofutwa likionyeshwa kwa mstari mwekundu wa kukatiza.

Menyu za viwango vingi hugawanywa zaidi kuwa paneli zilizo karibu. Maudhui yanayopanuka pale yalipo huacha nafasi yenye mstari wa kukatiza wa zambarau kwenye ukurasa, kuonyesha mahali yatakapoonekana baada ya kupanuka. Mistari ya uelekezaji wa ukurasa na mabadiliko ya hali hufichwa kwa chaguo-msingi; inaweza kuonekana unapochagua kipengele kinachohusiana, au kufunguliwa yote kwa pamoja kupitia “mistari yote ya uunganisho”.

Hali ya onyesho inayoweza kubofya

Unapobofya “▶ Onyesho” kwenye kona ya juu kulia, prototipu huficha fremu za mabadiliko na kuiga uendeshaji halisi katika skrini moja. Inaweza kuonyesha kufunguka kwa menyu, kutoka kwa droo, kufunguka kwa madirisha ibukizi, kubadilika kwa hali ya vitufe na uelekezaji wa ukurasa.

Ukibofya eneo lisiloweza kuendeshwa, nafasi zote zinazoweza kubofya kwa sasa zitaonyesha fremu za bluu kwa muda, na upande wa kushoto utaorodhesha vitendo vinavyoweza kutekelezwa. Onyesho linaunga mkono kurudi nyuma, kuanza upya kutoka mwanzo, na kubadilisha kati ya “kabla ya mabadiliko” na “baada ya mabadiliko”.

Uhariri wa moja kwa moja na maoni yaliyowekwa pamoja

• Hariri muundo: Buruta vipengele ili kubadilisha mpangilio au umiliki wa kontena, na urekebishe maandishi, aina, upana na upangaji.
• Badilisha umbo: Badilisha moduli ya ndani iwe dirisha ibukizi, menyu kunjuzi, droo au kiputo; mfumo utatengeneza kitufe cha kichochezi na mistari ya uunganisho.
• Tendua na rudia: Tumia Ctrl au Command pamoja na Z kutendua kitendo.
• Maelezo ya kipengele: Ongeza maoni kwa kipengele mahususi kuhusu eneo, mwingiliano, aina ya kipengele, mtindo, maandishi au ukosefu wa utendaji.
• Kiwango cha maoni: Maelezo yanaweza kuwekwa kama “lazima ibadilishwe”, “pendekezo” au “swali”.
• Maoni ya jumla: Rekodi maoni kuhusu mtindo, mwelekeo wa marejeo na majibu ya maswali ya uthibitishaji yaliyoorodheshwa awali na Agent.
• Kurudisha kiraka: Marekebisho ya muundo huambatanishwa mwishoni mwa maoni kama viraka vinavyolenga ID, bila kuhitaji kurudisha mpango mzima.

Maandalizi kabla ya usakinishaji

Ujenzi wa prototipu ya smyw unahitaji tu Node.js 18 au toleo jipya zaidi. Mradi wenyewe hauhitaji seva wala utegemezi wa wakati wa kuendesha. Kwanza thibitisha toleo la Node.js:

node --version

Ukipanga kuendesha majaribio ya mwisho hadi mwisho ya hazina au kutengeneza upya picha za skrini, utahitaji pia kusakinisha Google Chrome. Njia ya usakinishaji isiyo ya chaguo-msingi inaweza kubainishwa kupitia kigezo cha mazingira cha CHROME.

Sakinisha skill ya smyw

Hatua ya kwanza: Kloni hazina

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

Hatua ya pili: Weka skill mahali Agent inaweza kuisoma

Watumiaji wa Claude Code wanaweza kuunda kiungo cha mfano cha kimataifa ili miradi yote iweze kutumia smyw:

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

Ikiwa Agent itasoma saraka ya skills za jumla, unaweza pia kuunganisha kwenye:

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

Ikiwa ungependa kuiwasha kwenye mradi mmoja tu, nakili kwenye saraka ya skill ya ndani ya mradi huo:

cp -r skills/smyw <mradi-wako>/.claude/skills/smyw

Baada ya usakinishaji kukamilika, unaweza kumpa Agent hitaji litakalorekebisha kiolesura au API, au kusema moja kwa moja: “Kwanza nitengenezee prototipu niione.”

Endesha mfano wa hazina kwanza

Hazina tayari ina mifano miwili ya HTML iliyotengenezwa. Hakuna haja ya kuanzisha seva; ifungue moja kwa moja kwenye kivinjari:

• skills/smyw/examples/helpdesk-ai/preview.html: Mfano kamili wa skrini moja unaoongeza majibu yanayopendekezwa na AI kwenye eneo la kazi la huduma kwa wateja.
• skills/smyw/examples/task-tags/preview.html: Mfano wa kurasa nyingi unaoonyesha kuongezwa na kufutwa kwa ukurasa mzima.

Baada ya kurekebisha spec ya mfano, unaweza kutengeneza upya onyesho kwa amri hii:

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

Matokeo ya ujenzi ni faili moja safi ya upande wa mbele inayoweza kufunguliwa na kukaguliwa bila mtandao.

Matumizi ya msingi kutoka mahitaji hadi prototipu

Hatua ya kwanza: Eleza mahitaji kwa Agent

Eleza lengo la biashara na vikwazo kadiri uwezavyo, lakini si lazima uamue mapema kila undani wa kiolesura. Kwa mfano:

Tafadhali ongeza jibu linalopendekezwa na AI kwenye maelezo ya tiketi ya huduma kwa wateja. Kwanza soma ukurasa na API zilizopo, usianze kuandika msimbo mara moja; tumia smyw kutengeneza prototipu ili niidhinishe kiingilio cha droo, mtiririko wa kubadilisha jibu na API zinazohusika.

Hatua ya pili: Kagua spec na onyesho lililotengenezwa

Agent itahifadhi mpango uliopangwa kwenye saraka kama hii:

.smyw/<tarehe>-<jina>/spec.json

Kisha itatumia build.mjs kukagua na kutengeneza preview.html. Baada ya kufungua onyesho, kagua kwa mpangilio ufuatao:

1. Tumia “tosheleza” kwanza kuweka turubai nzima ndani ya eneo la kutazama.
2. Kagua ikiwa fremu za mabadiliko za njano, kijani na nyekundu zinaendana na mahitaji.
3. Bofya orodha ya mabadiliko moja baada ya nyingine na uthibitishe ulinganisho wa kabla na baada pamoja na mabadiliko ya sehemu.
4. Kagua ikiwa vipengele, vitendaji na API zinazohusiana zinaendana na msimbo uliopo.
5. Fungua “mabadiliko ya mtiririko” na “mabadiliko ya nyuma” ili kukagua athari za tabaka mbalimbali.
6. Ingia kwenye hali ya onyesho na ubofye menyu, madirisha ibukizi, droo na vitufe vya hali kwa vitendo.

Hatua ya tatu: Hariri na toa maelezo kuhusu mpango

Muundo usipokidhi matarajio, badili hadi “hariri mpango” na uburute vipengele moja kwa moja, au badilisha maudhui ya ndani kuwa dirisha ibukizi. Kwa maoni yasiyofaa kurekebishwa moja kwa moja, chagua kipengele, ongeza maelezo na uweke aina pamoja na kipaumbele.

Inapendekezwa kutofautisha wazi aina hizi tatu za maoni:

• Lazima ibadilishwe: Masuala yanayopaswa kutekelezwa kabla ya kuanza.
• Pendekezo: Agent anaweza kutathmini kama ayakubali, lakini asipoyakubali anapaswa kueleza sababu.
• Swali: Jambo linalohitaji kujibiwa na kufafanuliwa kwanza kabla ya kuamua marekebisho.

Hatua ya nne: Nakili maoni na umrudishie Agent

Ingia kwenye ukurasa wa “maoni”, ongeza maoni ya jumla kuhusu mtindo, jibu maswali yanayosubiri uthibitisho, kisha ubofye “nakili maoni”. Bandika Markdown iliyotengenezwa kwenye mazungumzo ya Agent.

Kwa kawaida Agent itahifadhi maoni kama feedback-v<N>.md, kisha iendeshe:

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

apply-feedback.mjs itahifadhi nakala rudufu ya spec ya zamani, itumie viraka vilivyo kwenye maoni na kuongeza nambari ya toleo. Toleo la maoni lisipoendana na spec ya sasa, script itakataa kulitumia ili kuzuia kubatilisha mpango mpya zaidi.

Hatua ya tano: Anza kuandika msimbo baada ya kuthibitisha

Kagua prototipu ya toleo linalofuata na uthibitishe kuwa maoni yote ya “lazima ibadilishwe” yametekelezwa na “maswali” yamejibiwa. Ikiwa hakuna tatizo jingine, bofya “Thibitisha mpango, unaweza kuanza”, kisha mwache Agent aingie kwenye hatua rasmi ya utekelezaji.

Kuelewa muundo wa msingi wa spec

smyw hutumia mti mmoja kueleza kiolesura kabla na baada ya mabadiliko kwa wakati mmoja. Kila nodi huonyesha mabadiliko kupitia alama ya change, huku mwingiliano na hali vikielezwa na on, hidden na states.

{
  "id": "reply",
  "type": "form",
  "label": "Mjibu mteja",
  "component": "<ReplyBox>",
  "change": "modified",
  "before": { "label": "Jibu" },
  "children": [
    {
      "id": "reply-quick",
      "type": "select",
      "text": "Jibu la haraka",
      "change": "removed"
    },
    {
      "id": "reply-polish",
      "type": "button",
      "label": "Boresha kwa AI",
      "change": "added",
      "fn": "openDraftDrawer({ mode: \"polish\" })",
      "on": [
        { "action": "open", "target": "ai-drawer" }
      ]
    }
  ]
}

Msimbopicha huu unaonyesha kuwa kichwa cha fomu ya kujibu kimebadilishwa kutoka “Jibu” hadi “Mjibu mteja”, jibu la haraka lililokuwepo limeondolewa, na kitufe kipya cha kufungua paneli ya AI kimeongezwa. component inawakilisha kipengele cha msimbo, na fn inaonyesha tabia husika au nafasi ya kiolesura cha API.

Maelezo kamili ya sehemu yanapatikana kwenye spec-format.md, na kanuni za utekelezaji za Agent zinapatikana kwenye SKILL.md.

Mbinu za matumizi ya hali ya juu

Kagua kiolesura, mtiririko na upande wa nyuma kwa wakati mmoja

Usikague mpangilio wa ukurasa pekee. Kwa vipengele vinavyohusisha mabadiliko ya API au data, unapaswa pia kuangalia njia za mtiririko na mabadiliko ya upande wa nyuma. Njia za mtiririko hulinganisha hali kabla na baada ya mabadiliko kwa mtumiaji, upande wa mbele, upande wa nyuma, hifadhidata na huduma za nje; sehemu za kufikia kwenye hatua zinaweza kurudi kwenye vipengele vinavyolingana vya kiolesura.

Tumia upau wa zana kuelewa athari kwenye msimbo

• Fungua “ƒ Kazi” ili kuona tabia au nafasi ya API iliyo nyuma ya kipengele.
• Fungua “Vipengele” ili kuona kipengele cha msimbo kinacholingana na moduli.
• Fungua “Fifisha visivyobadilishwa” ili kuzingatia eneo lililoathiriwa na ombi hili.
• Unapohitaji kukagua uhusiano wote wa vichochezi, fungua “Mistari yote ya kuunganisha”.

Tumia hali ya maonyesho kuthibitisha mabadiliko ya hali

Hali ya maonyesho si ya kutazama urambazaji pekee; inafaa pia kuthibitisha uhusiano wa hali. Kwa mfano, kitufe cha “Hamisha kwenye kisanduku cha jibu” kinaweza kujaza rasimu kwenye kisanduku cha jibu na kufunga paneli. Maelezo huweka kiotomatiki kumbukumbu ya ukurasa uliokuwa wazi wakati huo, maudhui yaliyofunguliwa na historia ya mibofyo, jambo linalomsaidia Agent kuunda upya tatizo.

Weka vitambulisho vya ID viwe thabiti

Mabadiliko ya muundo katika maoni hupatikana kwa kutumia ID ya nodi, kwa hiyo unapaswa kuweka ID za nodi zilizopo zikiwa thabiti kadiri inavyowezekana katika marudio mengi. Usibadilishe ID bila sababu isipokuwa kipengele chenyewe kimefutwa au maana yake imebadilika kabisa.

Zingatia uthibitishaji wa ujenzi

build.mjs hukagua matatizo ya kawaida kama vile ID zinazorudiwa, nodi zilizobadilishwa kukosa before, kutumia “(haijabadilika)” badala ya moduli halisi, na madirisha ibukizi kukosa kichochezi. Hitilafu ikitokea, rekebisha spec kwanza kisha kagua matokeo yaliyotengenezwa.

Shughulikia madirisha membamba na vikwazo vya sandbox

Katika madirisha membamba kama onyesho la pembeni la Agent, orodha ya mabadiliko huwekwa ndani ya kitufe cha “☰ Mabadiliko”, huku maelezo yakielea juu ya turubai. Katika sandbox yenye vikwazo, kivinjari kinaweza kuzuia kuhifadhi maendeleo au kunakili kiotomatiki; kunakili kukishindikana, ukurasa huchagua kiotomatiki maudhui ya maoni, kisha bonyeza Ctrl au Command pamoja na C.

Uendelezaji na majaribio ya mradi

Ukitaka kurekebisha smyw yenyewe, unaweza kuendesha majaribio ya mwisho hadi mwisho au kutengeneza upya picha za skrini za README:

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

Majaribio yanahitaji Node.js 18 au toleo jipya zaidi na Google Chrome. Chrome ikiwa haipo kwenye njia chaguo-msingi, bainisha njia yake hivi:

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

Mradi umetolewa chini ya leseni ya MIT.

Muhtasari

smyw hubadilisha mtiririko wa kazi wa Agent wa usimbaji kutoka “kuelewa mahitaji kisha kuandika msimbo moja kwa moja” kuwa “kusoma msimbo kwanza, kutengeneza spec, kuonyesha mfano unaoweza kuingiliana, kukusanya maoni yaliyopangwa, kisha kuanza utekelezaji”. Inafaa hasa kwa mahitaji yanayohusisha mpangilio wa ukurasa, madirisha ibukizi, mabadiliko ya hali, mtiririko wa kurasa nyingi au API za upande wa mbele na nyuma.

Anza kwa kujaribu mfano wa hifadhi, thibitisha kuwa Agent anaweza kusoma skill, kisha uitumie kwenye mradi halisi. Kwa kutumia alama za mabadiliko, hali ya maonyesho, uhariri wa moja kwa moja, maelezo na maoni yenye matoleo, unaweza kupunguza kwa kiasi kikubwa tofauti za uelewa wa mahitaji na kufanya usimbaji rasmi ujengwe juu ya suluhisho lililothibitishwa tayari.