smyw yordamida kodlash agentiga avval prototip chizdirib, keyin kod yozdiring: o‘rnatish, ko‘rib chiqish va fikr-mulohaza bo‘yicha to‘liq qo‘llanma

smyw nima

smyw, ya’ni “show me you want”, Claude Code, DeepSeek Harness va SKILL.md faylini qo‘llab-quvvatlaydigan boshqa Agentlar uchun mo‘ljallangan skill hisoblanadi. U Agentga sahifa, interaktiv jarayon yoki frontend va backend interfeyslarini o‘zgartirishdan oldin kodni o‘qish, strukturali spec yozish va oflayn ochiladigan bitta HTML fayldan iborat prototip yaratish imkonini beradi.

Bu prototip yakuniy vizual maket emas, balki modullar tarkibi, joylashuvi, ishga tushirish aloqalari va funksional o‘zgarishlarni ifodalovchi past aniqlikdagi wireframe hisoblanadi. Yakuniy amalga oshirishda loyiha mavjud dizayn qoidalariga amal qilinishi kerak.

U qanday muammoni hal qiladi

An’anaviy Agent kodlash jarayoni ko‘pincha matnli talabdan bevosita amalga oshirish bosqichiga o‘tadi. Bu sahifa tuzilishi, interaktiv usul yoki interfeys chegaralarini tushunishda nomuvofiqliklarga olib kelishi mumkin. smyw talablar va kod o‘rtasiga vizual tasdiqlash bosqichini qo‘shadi:

1. Foydalanuvchi funksional talabni bildiradi.
2. Agent loyiha kodini o‘qib, spec.json yaratadi.
3. Build skripti spec’ni tekshiradi va preview.html faylini chiqaradi.
4. Foydalanuvchi brauzerda yechimni ko‘radi, namoyish qiladi, sudraydi va izohlar qo‘shadi.
5. Foydalanuvchi fikr-mulohazani nusxalab, suhbatga yuboradi.
6. Agent fikr-mulohazani qo‘llaydi va prototipning keyingi versiyasini yaratadi.
7. Foydalanuvchi yechimni tasdiqlagandan keyingina Agent kod yozishni boshlaydi.

smyw dizayn vositalarini almashtirish uchun emas, balki foydalanuvchi va kod yozuvchi Agent amalga oshirishdan oldin “nimani o‘zgartirish, qayerga joylashtirish va qanday ishga tushirish” masalalarida bir xil tushunchaga ega bo‘lishi uchun kerak.

Asosiy funksiyalar

Raqamli belgilar va oldingi-keyingi taqqoslash

Prototip haqiqiy sahifa joylashuviga asoslanib to‘liq ko‘rinishni chizadi va o‘zgarishlarni ranglar bilan ajratadi: sariq o‘zgartirishni, yashil qo‘shilganini, qizil o‘chirilganini bildiradi. Faqat eng tashqi qatlamida o‘zgarish bo‘lgan modullarga raqam beriladi, shu tariqa ichki elementlarda takroriy belgilar ko‘payib ketmaydi.

Kanvasdagi raqam yoki chap tomondagi o‘zgarishlar ro‘yxati bosilganda, kanvas tegishli hududga fokuslanadi. O‘ng tomonda o‘zgarishdan oldingi va keyingi lokal wireframe’lar, maydonlar farqi, Agent izohi, kod komponentlari hamda tegishli funksiyalar yoki interfeyslar ko‘rsatiladi.

Agar butun modul yangi qo‘shilgan bo‘lsa, tafsilotlar bo‘limidagi “o‘zgarishdan oldin” qismida modul avval mavjud bo‘lmagani ko‘rsatiladi, ichki tugmalar va matnlarga alohida raqam berilmaydi.

Komponent ko‘chirilishini aniq ifodalash

Komponent bir joydan boshqa joyga ko‘chirilganda, avvalgi joyda qizil “chiqish”, yangi joyda esa yashil “kirish” ko‘rsatiladi. Ikki yozuv o‘zaro bog‘langan bo‘lib, bu o‘chirish va unga aloqasi bo‘lmagan qo‘shish emasligini tasdiqlashni osonlashtiradi.

Modal oynalar, menyular va ochiladigan kontent

Qalqib chiquvchi oynalar, drawer’lar, ochiluvchi menyular, tooltip’lar va faqat bosilgandan keyin ochiladigan kontent asosiy ekran yonidagi mustaqil panellarga joylashtiriladi hamda chiziq orqali ishga tushiruvchi tugmaga ulanadi. Bitta modal oyna bir nechta kirish nuqtasiga bog‘lanishi mumkin, o‘chirilgan modal esa qizil punktir chiziq bilan ko‘rsatiladi.

Ko‘p darajali menyular qo‘shni panellarga ajratishda davom etadi. Shu joyning o‘zida ochiladigan kontent sahifada binafsha punktir joy bilan qoldiriladi va ochilgandan keyin qayerda paydo bo‘lishini ko‘rsatadi. Sahifa o‘tishlari va holat almashinuvi chiziqlari odatda yashiriladi; ularni tegishli element tanlanganda ko‘rish yoki “Barcha chiziqlar” orqali birgalikda ochish mumkin.

Bosib ko‘rish mumkin bo‘lgan namoyish rejimi

Yuqori o‘ng burchakdagi “▶ Namoyish” tugmasi bosilganda, prototip o‘zgarish ramkalarini yashiradi va haqiqiy foydalanishni bitta ekran rejimida taqlid qiladi. Unda menyu ochilishi, drawer chiqishi, modal oynaning ochilishi, tugma holatining o‘zgarishi va sahifaga o‘tish kabi harakatlarni namoyish qilish mumkin.

Agar bosilganda ishlamaydigan hudud tanlansa, ayni paytda bosish mumkin bo‘lgan barcha joylar ko‘k ramka bilan bir zumda ko‘rsatiladi, chap tomonda esa bajarish mumkin bo‘lgan amallar ro‘yxati chiqadi. Namoyish rejimida ortga qaytish, boshidan boshlash va “o‘zgarishdan oldin” hamda “o‘zgarishdan keyin” holatlari o‘rtasida almashish qo‘llab-quvvatlanadi.

Bevosita tahrirlash va markazlashtirilgan fikr-mulohaza

• Tuzilmani tahrirlash: komponentlarni sudrab, ularning tartibi yoki qaysi konteynerga tegishliligini o‘zgartirish, shuningdek matn, tur, kenglik va joylashuvni tahrirlash.
• Shaklni o‘zgartirish: inline modulni modal oyna, ochiluvchi menyu, drawer yoki tooltip’ga aylantirish; tizim ishga tushiruvchi tugma va bog‘lovchi chiziqlarni yaratadi.
• Bekor qilish va qayta bajarish: Ctrl yoki Command va Z tugmalarini bosib amalni bekor qilishni qo‘llab-quvvatlaydi.
• Elementga izoh: muayyan elementga joylashuv, interaktivlik, komponent turi, uslub, matn yoki funksiya yetishmasligi kabi toifalarda fikr qo‘shish.
• Fikr darajasi: izohni “Majburiy”, “Tavsiya” yoki “Savol” sifatida belgilash mumkin.
• Umumiy fikr-mulohaza: uslub bo‘yicha fikrlar va yo‘nalishlarni qayd etish, shuningdek Agent oldindan bergan tasdiqlash savollariga javob berish.
• Patch qaytarish: tuzilma o‘zgarishlari to‘liq yechim o‘rniga faqat ID orqali aniqlanadigan patch shaklida fikr-mulohazaning oxiriga qo‘shiladi.

O‘rnatishdan oldingi tayyorgarlik

smyw prototipini yaratish uchun faqat Node.js 18 yoki undan yuqori versiya kerak bo‘ladi. Loyihaning o‘ziga server va ishga tushirish bog‘liqliklari kerak emas. Avval Node.js versiyasini tekshiring:

node --version

Agar repository’ning end-to-end testlarini ishga tushirish yoki skrinshotlarni qayta yaratish rejalashtirilsa, Google Chrome’ni ham o‘rnatish kerak. Standart bo‘lmagan o‘rnatish yo‘lini CHROME muhit o‘zgaruvchisi orqali ko‘rsatish mumkin.

smyw skill’ini o‘rnatish

1-qadam: Repository’ni klonlash

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

2-qadam: skill’ni Agent o‘qiy oladigan joyga joylashtirish

Claude Code foydalanuvchilari barcha loyihalarda smyw’dan foydalanish uchun global ramziy havola yaratishi mumkin:

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

Agar Agent umumiy skills katalogini o‘qisa, quyidagi joyga ham havola yaratish mumkin:

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

Uni faqat ma’lum bir loyihada yoqmoqchi bo‘lsangiz, loyiha lokal skill katalogiga nusxalang:

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

O‘rnatish tugagach, Agentga interfeys yoki interfeyslarni o‘zgartiradigan talabni berishingiz yoki bevosita “Avval menga prototip ko‘rsat.” deb aytishingiz mumkin.

Avval repository misollarini ishga tushiring

Repository’da serverni ishga tushirmasdan, brauzerda bevosita ochish mumkin bo‘lgan ikkita tayyor HTML misoli mavjud:

• skills/smyw/examples/helpdesk-ai/preview.html: mijozlarga xizmat ko‘rsatish ish stansiyasiga AI tavsiya qilgan javoblar qo‘shilgan, bitta ekranli to‘liq misol.
• skills/smyw/examples/task-tags/preview.html: butun sahifani qo‘shish va butun sahifani o‘chirishni ko‘rsatuvchi ko‘p sahifali misol.

Misol spec’ini o‘zgartirgandan so‘ng, ko‘rib chiqishni qayta yaratish uchun quyidagi buyruqni bajaring:

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

Build natijasi sof frontend’li bitta fayl bo‘lib, uni oflayn ochish va ko‘rib chiqish mumkin.

Talabdan prototipgacha asosiy foydalanish tartibi

1-qadam: Agentga talabni tasvirlash

Biznes maqsadi va cheklovlarni imkon qadar tushuntiring, ammo barcha interfeys tafsilotlarini oldindan belgilash shart emas. Masalan:

Mijozlarga xizmat ko‘rsatish ticket tafsilotlariga AI tavsiya qilgan javobni qo‘shing. Avval mavjud sahifa va interfeyslarni o‘qing, darhol kod yozmang; smyw’dan foydalanib prototip yarating, shunda drawer kirish nuqtasi, javobni almashtirish jarayoni va tegishli interfeyslarni tasdiqlay olaman.

2-qadam: Yaratilgan spec va ko‘rib chiqishni tekshirish

Agent strukturali yechimni quyidagiga o‘xshash katalogda saqlaydi:

.smyw/<sana>-<nomi>/spec.json

Keyin build.mjs orqali uni tekshiradi va preview.html yaratadi. Ko‘rib chiqishni ochgach, quyidagi tartibda tekshirishingiz mumkin:

1. Avval “Moslashtirish” tugmasidan foydalanib, to‘liq kanvasni ko‘rish oynasiga joylashtiring.
2. Sariq, yashil va qizil o‘zgarish ramkalari talabga mosligini tekshiring.
3. O‘zgarishlar ro‘yxatini ketma-ket bosib, oldingi va keyingi holatlarni hamda maydonlar o‘zgarishini tekshiring.
4. Tegishli komponentlar, funksiyalar va interfeyslar mavjud kodga mosligini ko‘ring.
5. “Jarayon o‘zgarishlari” va “Backend o‘zgarishlari”ni ochib, qatlamlararo ta’sirni tekshiring.
6. Namoyish rejimiga kirib, menyu, modal oyna, drawer va holat tugmalarini amalda bosing.

3-qadam: Yechimni tahrirlash va izoh qo‘shish

Agar tuzilma kutilganidek bo‘lmasa, “Yechimni tahrirlash” rejimiga o‘tib, komponentlarni bevosita sudrashingiz yoki inline kontentni modal qatlamga aylantirishingiz mumkin. Bevosita o‘zgartirish noqulay bo‘lgan fikrlar uchun elementni tanlab, izoh qo‘shing va uning toifasi hamda ustuvorligini belgilang.

Fikr-mulohazaning uch turini aniq ajratish tavsiya etiladi:

• Majburiy: amalga oshirishdan oldin albatta hal qilinishi kerak bo‘lgan masalalar.
• Tavsiya: Agent qabul qilish-qilmaslikni baholashi mumkin, ammo qabul qilmasa sababini tushuntirishi kerak.
• Savol: avval javob va aniqlik kiritish kerak, shundan keyin qanday o‘zgartirishni hal qilish mumkin.

4-qadam: Fikr-mulohazani nusxalab Agentga qaytarish

“Fikr-mulohaza” sahifasiga kirib, umumiy uslub bo‘yicha fikrlarni to‘ldiring va aniqlashtirilishi kerak bo‘lgan savollarga javob bering, so‘ng “Fikr-mulohazani nusxalash” tugmasini bosing. Yaratilgan Markdown’ni Agent suhbatiga joylashtiring.

Agent odatda fikr-mulohazani feedback-v<N>.md sifatida saqlaydi, so‘ng quyidagilarni ishga tushiradi:

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 eski spec’ning zaxira nusxasini yaratadi, fikr-mulohazadagi patch’larni qo‘llaydi va versiya raqamini oshiradi. Agar fikr-mulohaza versiyasi joriy spec’ga mos kelmasa, yangi yechim ustidan yozib yubormaslik uchun skript uni qo‘llashni rad etadi.

5-qadam: Kod yozishni tasdiqlagandan keyin boshlash

Prototipning keyingi versiyasini tekshirib, barcha “Majburiy” fikrlar amalga oshirilgani va “Savol”lar javoblanganini tasdiqlang. Boshqa muammo bo‘lmasa, “Yechimni tasdiqlash, boshlash mumkin” tugmasini bosib, Agentni rasmiy amalga oshirish bosqichiga o‘tkazing.

spec’ning asosiy tuzilishini tushunish

smyw bitta daraxt yordamida interfeysning o‘zgarishdan oldingi va keyingi holatini bir vaqtda tasvirlaydi. Har bir tugun o‘zgarishni change belgisi orqali ko‘rsatadi, interaktivlik va holatlar esa on, hidden hamda states orqali ifodalanadi.

{
  "id": "reply",
  "type": "form",
  "label": "Mijozga javob berish",
  "component": "<ReplyBox>",
  "change": "modified",
  "before": { "label": "Javob berish" },
  "children": [
    {
      "id": "reply-quick",
      "type": "select",
      "text": "Tezkor javob",
      "change": "removed"
    },
    {
      "id": "reply-polish",
      "type": "button",
      "label": "AI orqali sayqallash",
      "change": "added",
      "fn": "openDraftDrawer({ mode: \"polish\" })",
      "on": [
        { "action": "open", "target": "ai-drawer" }
      ]
    }
  ]
}

Bu misolda javob berish formasi sarlavhasi “Javob berish”dan “Mijozga javob berish”ga o‘zgartirilgani, mavjud tezkor javob funksiyasi olib tashlangani va AI oynachasini ochadigan tugma qo‘shilgani ko‘rsatilgan. component kod komponentiga, fn esa tegishli xatti-harakat yoki API uchun joy tutuvchiga mos keladi.

Barcha maydonlar tavsifini spec-format.md faylida, Agent ijro qoidalarini esa SKILL.md faylida ko‘rishingiz mumkin.

Ilg‘or foydalanish usullari

Interfeys, jarayon va backendni bir vaqtda tekshirish

Faqat sahifa maketini ko‘rib chiqish bilan cheklanib qolmang. API yoki ma’lumotlar o‘zgarishini o‘z ichiga olgan funksiyalar uchun jarayon yo‘laklari va backenddagi o‘zgarishlarni ham ko‘rib chiqing. Jarayon yo‘lagi foydalanuvchi, frontend, backend, ma’lumotlar bazasi va tashqi xizmatlar bo‘yicha o‘zgarishlardan oldingi va keyingi holatlarni taqqoslaydi; qadamlar ustidagi yo‘naltirish nuqtasi tegishli interfeys elementiga qaytish imkonini beradi.

Kod ta’sirini tushunish uchun asboblar panelidan foydalanish

• Element ortidagi xatti-harakat yoki API joy tutuvchisini ko‘rish uchun “ƒ Funksiya”ni oching.
• Modulga mos kod komponentini ko‘rish uchun “Komponent”ni oching.
• Joriy talab ta’sir qiladigan doiraga e’tibor qaratish uchun “O‘zgarmaganlarni xiralashtirish”ni oching.
• To‘liq ishga tushirish bog‘lanishlarini tekshirish kerak bo‘lgandagina “Barcha bog‘lanishlar”ni oching.

Holat o‘zgarishlarini demo rejimida tekshirish

Demo rejimi faqat o‘tishlarni ko‘rish uchun emas, balki holatlar o‘rtasidagi bog‘lanishni tekshirish uchun ham qulay. Masalan, “Javob oynasiga almashtirish” tugmasi qoralamani javob oynasiga kiritib, oynachani yopishi mumkin. Izohlar o‘sha paytdagi sahifa, ochilgan tarkib va bosishlar tarixini avtomatik qayd etadi, bu esa Agentga muammoni qayta tiklashda yordam beradi.

IDlarni barqaror saqlash

Fikr-mulohazalardagi strukturaviy o‘zgarishlar tugun IDsi orqali aniqlanadi, shuning uchun bir necha iteratsiya davomida mavjud tugun IDlarini imkon qadar barqaror saqlash kerak. Elementning o‘zi o‘chirilmagan yoki ma’nosi butunlay o‘zgarmagan bo‘lsa, IDni o‘zboshimchalik bilan almashtirmang.

Build tekshiruviga e’tibor berish

build.mjs takroriy IDlar, o‘zgartirilgan tugunda before yo‘qligi, haqiqiy modul o‘rniga “（o‘zgarmagan）”dan foydalanish, qalqib chiquvchi oynada ishga tushiruvchi element yo‘qligi kabi keng tarqalgan muammolarni tekshiradi. Xato yuz bersa, avval specni tuzating, keyin yaratilgan natijani ko‘rib chiqing.

Tor oyna va sandbox cheklovlarini boshqarish

Agentning yon panelidagi oldindan ko‘rish kabi tor oynalarda o‘zgarishlar ro‘yxati “☰ O‘zgarishlar” tugmasi ichiga yig‘iladi, tafsilotlar esa canvas ustida qalqib turadi. Cheklangan sandboxda brauzer jarayonni saqlash yoki avtomatik nusxalashni taqiqlashi mumkin; nusxalash muvaffaqiyatsiz bo‘lsa, sahifa fikr-mulohaza matnini avtomatik belgilaydi, shunda Ctrl yoki Command tugmasini bosib, C tugmasini bosing.

Loyihani ishlab chiqish va test qilish

Agar smywning o‘ziga o‘zgartirish kiritishingiz kerak bo‘lsa, end-to-end testlarini ishga tushirishingiz yoki README skrinshotlarini qayta yaratishingiz mumkin:

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

Testlar uchun Node.js 18 yoki undan yuqori versiyasi va Google Chrome kerak. Chrome standart yo‘lda bo‘lmasa, uni quyidagicha ko‘rsatishingiz mumkin:

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

Loyiha MIT litsenziyasi asosida tarqatiladi.

Xulosa

smyw kod yozuvchi Agentning ish jarayonini “talabni tushunib, darhol kod yozish”dan “avval kodni o‘qish, spec yaratish, interaktiv prototipni ko‘rsatish, strukturaviy fikr-mulohazalarni yig‘ish va shundan keyin amalga oshirish”ga o‘zgartiradi. U ayniqsa sahifa maketi, qalqib chiquvchi oynalar, holat almashinuvi, ko‘p sahifali jarayonlar yoki frontend va backend APIlariga oid talablar uchun mos keladi.

Repositorydagi misollardan foydalanishni boshlang va Agent skillni o‘qiy olishini tasdiqlaganingizdan keyin uni haqiqiy loyihalarda qo‘llang. O‘zgarish belgilari, demo rejimi, to‘g‘ridan-to‘g‘ri tahrirlash, izohlar va versiyalangan fikr-mulohazalar orqali talabni tushunishdagi og‘ishlarni sezilarli darajada kamaytirish va rasmiy kodlashni allaqachon tasdiqlangan yechimga asoslash mumkin.