Prototype Notes Skill maalumu kwa Demo za HTML na miradi ya mbele ya tovuti.
Katika kipindi hiki, nimezidi kuzoea kuiacha AI itengeneze moja kwa moja kurasa za prototaipu na msimbo wa mbele ya tovuti.
Ukurasa unatengenezwa haraka, lakini tatizo jipya hujitokeza:
“Kitufe hiki kikibonyezwa kinahitaji uthibitisho wa pili.”
“Picha hii haipendezi, ibadilishe kwa mwonekano mwingine.”
“Jedwali linapobadilisha kategoria, linapaswa pia kuchuja data iliyo hapa chini.”
Maneno haya yaandikwe wapi?
Kutuma picha ya skrini, kuchora kisanduku chekundu, kuandika hati, au kuongeza sentensi kwenye kikundi cha mazungumzo—kisha timu ya uhandisi hutumia muda kutafuta mahali panapozungumziwa kwenye ukurasa. Ukurasa ukibadilishwa, picha ya zamani ya skrini hupoteza umuhimu; maoni yakizidi, muktadha kwenye mazungumzo pia hupotea kwa urahisi.
Kwa hiyo nilitengeneza Skill: Prototype Notes (Maelezo ya prototaipu). Inaweza kuongeza zana huru ya maelezo kwenye prototaipu ya HTML au mazingira ya uundaji wa mbele ya tovuti, ili mahitaji na maoni ya marekebisho yabaki moja kwa moja kwenye ukurasa husika.
Inafanya nini hasa?
Kwa ufupi, ni kama kuweka “karatasi ndogo za kumbukumbu za eneo” kwenye ukurasa wa wavuti.
Baada ya kuwasha hali ya maelezo, bofya kulia mahali popote kwenye ukurasa ili kuchagua aina mbili za maudhui:
Maelezo ya hitaji: Kwa ajili ya wasimamizi wa bidhaa, kueleza mahitaji mapya au mabadiliko ya mahitaji. Unaweza kuweka kipaumbele, hali, na kuongeza maelezo mengi.
Maoni ya marekebisho: Kwa ajili ya wakaguzi, kutoa mapendekezo ya ukaguzi. Jina la mtia-maoni linahitajika, lakini kipaumbele na hali si lazima kuwekwa.
>Baada ya kuwasha hali ya maelezo, bofya kulia ili kuchagua aina ya maelezo ya kuongeza
Baada ya kutuma, maelezo hukunjwa na kuwa ikoni ndogo kwenye ukurasa. Timu ya uhandisi ikibofya ikoni inaweza kuona muktadha, bila kubahatisha tena “kile kilicho kwenye picha ya skrini kinahusu eneo gani”.
Vipengele vikuu
01 Maelezo ya mahitaji na maoni ya ukaguzi yametenganishwa
Mahitaji ya bidhaa na mapendekezo ya ukaguzi ni aina mbili tofauti za taarifa. Skill haikuzibana kwenye fomu moja; badala yake, inazitenganisha wazi tangu kwenye menyu ya kubofya kulia.
>Maelezo ya hitaji: maudhui mengi, kipaumbele, hali ya kuongeza au kubadilisha, muda wa kuhifadhi
>Maoni ya marekebisho: jaza jina la mkaguzi na urekodi moja kwa moja pendekezo la ukaguzi
02 Alama moja inaweza kubeba maelezo mengi
Si lazima mahitaji yanayohusiana na eneo moja yajaze mstari mzima wa ikoni. Alama moja ya hitaji inaweza kuongezewa maelezo mengi, na alama moja ya maoni ya marekebisho inaweza pia kuongezewa maoni mengi, huku idadi ikionyeshwa kwenye beji ndogo.
03 Alama na dirisha linaloelea vinaweza kusogezwa
Mahali pa alama pasipokuwa sahihi, unaweza kuiburuta na kuiweka upya moja kwa moja; dirisha linaloelea pia linaweza kusogezwa ili lisifunike maudhui ya ukurasa unaotazamwa. Alama huhifadhi nafasi yake ya kadiri, na hujitahidi kubaki karibu na kipengele lengwa ukurasa unapoviringishwa au ukubwa unapobadilika.
04 Unaweza kubandika picha moja kwa moja kwenye maelezo
Maandishi pekee yasipotosha, nakili picha ya skrini na uibandike moja kwa moja kwenye maelezo ya sasa. Picha itabanwa kiotomatiki na kuhifadhiwa pamoja na data ya maelezo, na inaweza kufutwa peke yake.
05 Hali isiyo ya maelezo ni ya kusoma tu kabisa
Wakati wa kutazama kawaida, maudhui hayawezi kubadilishwa kimakosa, wala kubofya kulia kwa kawaida hakutazuiwi. Ni baada ya kuwasha hali ya maelezo ndipo unaweza kuongeza, kuhariri, kusogeza, kuleta au kufuta alama.
>Hali ya kawaida ya kutazama: unaweza kuona maelezo, lakini hakuna vitendo vya kuhariri au kufuta
06 Huhifadhiwa kiotomatiki kama JSON kwenye hazina ya Git
Data ya maelezo huhifadhiwa katika:
.prototype-notes/annotations.json
Baada ya kuhifadhi, kusogeza, kuleta au kufuta, mazingira ya uundaji huandika faili hili upya kiotomatiki. Baada ya wanachama wa timu kutuma mabadiliko kwenye Git, maelezo yanaweza kufuatana na mradi, kukaguliwa na kuhifadhi historia. Uletaji na utoaji wa faili kwa mkono bado vinapatikana kama njia ya kurejesha data ikitokea hitilafu.
07 Ujenzi rasmi haujumuishi msimbo wa maelezo
Hii si zana inayojifanya kuwa salama kwa “kubofya kuficha”. Miradi ya Vite hupakia runtime wakati wa uundaji pekee, na kiolesura cha kuhifadhi huwekwa kwenye seva ya uundaji pekee; kwa miradi ya HTML tuli, unaweza kuondoa runtime kabla ya kuichapisha. Lengo la ukaguzi wa uchapishaji ni kwamba bidhaa ya uzalishaji isiwe na runtime wala maudhui ya maelezo kabisa.
Baadhi ya mawazo madogo ninayoyapenda
Ikoni ya hati ya bluu na ikoni ya maoni ya machungwa. Hata bila kufungua dirisha linaloelea, unaweza kutambua kama ni hitaji la bidhaa au maoni ya ukaguzi.
Inachukua udhibiti wa kubofya kulia wakati wa hali ya maelezo pekee. Wakati wa kawaida haisumbui utendaji wa ukurasa; iwashe tu unapohitaji kurekodi jambo.
Kila maelezo yana muda wa mwisho wa kuhifadhi. Timu ya uhandisi inaweza kujua ikiwa wanachoona ni toleo lililosasishwa hivi karibuni.
Akiba ya ndani kama kinga. Uandishi wa kiotomatiki ukishindikana, rasimu kwenye kivinjari haipotei mara moja, na upau wa zana huonyesha “Usawazishaji umeshindikana”.
Alama ya chanzo iliyojengewa ndani. Toleo la sasa huonyesha “泥嚎的AI实验室”, na huhifadhi alama hiyo ya pamoja inayoweza kuthibitishwa kwenye runtime, zana za uundaji na JSON inayotolewa.
Inatatua tatizo gani?
Kwanza, hupunguza upotevu wa muktadha wa mahitaji. Mahitaji hayatenganishwi tena na ukurasa na kuelea pekee kwenye kumbukumbu za mazungumzo au hati.
Pili, hupunguza gharama ya kutafuta eneo kati ya bidhaa na uhandisi. Alama imeambatanishwa na kidhibiti mahususi, hivyo ukifungua ukurasa unajua pa kufanya marekebisho.
Tatu, hutenganisha mahitaji ya bidhaa na maoni ya ukaguzi. Nani aliyependekeza na maudhui hayo ni ya aina gani vinaonekana mara moja.
Nne, huingiza prototaipu za AI katika mchakato halisi wa marudio. AI inawajibika kwa uundaji wa haraka, huku safu ya maelezo ikisaidia kurudisha maoni kwa AI au timu ya uhandisi.
Tano, hailengi usalama wa uchapishaji. Maelezo ni ya mazingira ya uundaji na ukaguzi pekee, wala hayawi kipengele cha bidhaa rasmi.
Jinsi ya kuitumia katika hali tofauti?
Hali ya kwanza: Demo ya HTML ya ukurasa mmoja iliyotengenezwa na AI
Muombe AI itumie Prototype Notes Skill kusakinisha safu ya maelezo na kuanzisha huduma ya karibu ya uundaji inayohusiana. Bidhaa inaweza kubofya kulia kwenye ukurasa na kuandika mahitaji; baada ya kuhifadhi, data huingia kiotomatiki kwenye JSON ya mradi. Baada ya kuthibitisha, ondoa runtime kisha uchapishe ukurasa tuli.
Hali ya pili: Mradi wa mbele ya tovuti wa Vue / React + Vite
Skill itaweka runtime kwenye saraka ya zana za uundaji na kusakinisha programu-jalizi ya kuhifadhi inayofanya kazi kwenye seva ya uundaji pekee. Tumia tu amri ya kawaida ya kuendesha mradi katika hali ya uundaji; wakati wa ujenzi rasmi, runtime ya maelezo haitapakiwa.
Hali ya tatu: Wasimamizi wa bidhaa na timu ya uhandisi wanashirikiana kwenye hazina moja ya Git
Baada ya bidhaa kuhifadhi alama, tuma annotations.json; timu ya uhandisi ikivuta msimbo inaweza kuona maelezo kwenye ukurasa wa awali na kuendelea kutuma mabadiliko baada ya kukamilisha marekebisho. Git inasimamia matoleo, uunganishaji na historia, huku zana ya maelezo ikisimamia uwasilishaji wa jambo moja kwa moja kwenye ukurasa.
Hali ya nne: Ukaguzi wa usanifu au biashara
Mkaguzi huchagua “ongeza maoni ya marekebisho”, huweka jina lake kisha kurekodi pendekezo. Mahitaji ya bidhaa hayachanganywi na maoni ya ukaguzi, na timu ya uhandisi inaweza kujua maoni yametoka kwa nani.
Hali ya tano: Mkutano wa ukaguzi wenye ruhusa ya kutazama pekee
Baada ya kuzima hali ya maelezo, washiriki bado wanaweza kubofya ikoni kuzitazama, lakini hawawezi kuhariri; pia wanaweza kuficha alama zote kwa kubofya mara moja ili ukurasa urudi kwenye mwonekano safi.
Jinsi ya kusakinisha na kuita Skill?
Skill hii bado haijawekwa wazi kwa umma. Ikiwa ungependa kuijaribu:
Fuatilia “泥嚎的AI实验室”
Tuma ujumbe binafsi wenye neno kuu: 原型批注
Nitakutumia kifurushi cha Skill pamoja na maelekezo ya matumizi.
Baada ya kupokea kifurushi, kifungue kwenye saraka yako binafsi ya Codex Skill:
C:\Users\jina_lako\.codex\skills\prototype-notes
Baada ya kufungua upya kazi ya Codex, unaweza kuiita hivi:
Tumia $prototype-notes kuongeza kipengele cha maelezo kwenye prototaipu ya sasa ya HTML.
Unaweza pia kusema kwa lugha ya kawaida, kwa mfano:
“Sakinisha maelezo ya prototaipu kwenye mradi huu wa Vue/Vite, data ihifadhiwe kiotomatiki kwenye Git JSON, na msimbo wa maelezo usijumuishwe kwenye ujenzi wa uzalishaji.”
“Ongeza maelezo ya mahitaji na maoni ya marekebisho yenye jina kwenye Demo hii ya HTML ya ukurasa mmoja, kisha unisaidie kuanzisha hakikisho la karibu.”
Maswali yanayoulizwa mara nyingi wakati wa matumizi
1. Ukurasa unafunguka, lakini JSON haibadiliki baada ya kuhifadhi
Mara nyingi sababu ni kutumia seva ya kawaida ya faili tuli. Kivinjari hakiwezi kuandika faili za Git moja kwa moja; unahitaji kutumia huduma ya uundaji ya HTML iliyosakinishwa na Skill, au kuwezesha programu-jalizi ya uundaji inayohusiana kwenye Vite. Upau wa zana unapoonyesha “Usawazishaji umeshindikana”, akiba ya ndani bado itahifadhi rasimu.
2. Sioni maelezo baada ya kubadilisha kompyuta
Thibitisha kuwa .prototype-notes/annotations.json imetumwa kwenye Git, na kwamba mtu mwingine amevuta msimbo wa hivi karibuni. localStorage ni kinga ya kompyuta ya ndani pekee, si njia ya kushirikiana na timu.
3. Menyu ya maelezo haionekani ninapobofya kulia
Kwanza bofya kitufe cha “Maelezo” kilicho chini kulia ili kuingia kwenye hali ya maelezo. Hali ya kawaida huacha kubofya kulia kwa kivinjari kama kawaida, ili kuepuka kuingilia utendaji wa kila siku.
4. Alama imepoteza usahihi baada ya kubadilisha muundo wa ukurasa
Katika hali ya maelezo, buruta ikoni hadi mahali papya. Kwa maeneo muhimu ambayo muundo wake hubadilishwa mara kwa mara, unaweza kuomba AI iongeze data-prototype-anchor thabiti ili kuepuka kutegemea viwango vya DOM vinavyobadilika kwa urahisi.
5. Kuna mgongano wakati wa kuunganisha annotations.json kwenye Git
Inafaa kwa ushirikiano usio wa papo hapo, si uhariri wa wakati halisi wa watu wengi. Kabla ya kuanza kuweka maelezo, vuta tawi jipya zaidi; watu wengi wanapobadilisha kwa wakati mmoja, kagua migongano kwa kutumia kitambulisho cha alama na muda wa kusasisha. Ikiwa unahitaji usawazishaji halisi wa watu wengi, fikiria kutumia huduma ya hifadhidata.
6. Nina wasiwasi kuhusu kuvuja kwa mahitaji ya ndani au picha za skrini
Maudhui ya maelezo, majina ya wakaguzi, njia za ukurasa na picha zilizobandikwa zinaweza kuwa na taarifa nyeti. Mradi unapaswa kutumia hazina binafsi; usiweke huduma ya karibu ya uundaji wazi kwenye mtandao usioaminika, wala usichapishe saraka ya .prototype-notes mtandaoni.
7. Kuna picha nyingi sana na kivinjari hakiwezi kuzihifadhi
Runtime hubana picha na kuweka kikomo cha idadi ya picha katika kila maelezo, lakini picha za skrini bado huongeza ukubwa wa JSON. Inashauriwa kuhifadhi tu picha zinazohusiana moja kwa moja na tatizo, na kupunguza picha kubwa kabla ya kuzibandika.
Hitimisho
AI imefanya “kutengeneza ukurasa” kuwa jambo la haraka zaidi, lakini kati ya ukurasa na bidhaa inayoweza kuwasilishwa bado kunahitajika mahitaji yaliyo wazi, ukaguzi na ushirikiano.
Nilitengeneza Skill hii si kwa lengo la kuunda mfumo mwingine mkubwa wa usimamizi wa miradi, bali kutimiza pengo dogo na mahususi:
Kuruhusu maoni yabaki mahali ambapo yalitokea.