HTML demolar va frontend loyihalari uchun maxsus Prototype Notes Skill.
So‘nggi paytlarda AI’dan prototip sahifalari va frontend kodini bevosita yaratishni tobora ko‘proq odat qilyapman.
Sahifani tez yaratish mumkin, ammo shu bilan birga yangi muammo ham paydo bo‘ladi:
“Bu tugma bosilganda ikkilamchi tasdiqlash kerak.”
“Bu yerdagi rasm yaxshi ko‘rinmayapti, boshqa ko‘rinishga almashtiring.”
“Jadval kategoriyalar o‘rtasida almashganda, pastdagi ma’lumotlar ham bir vaqtda filtrlanishi kerak.”
Bu gaplarni qayerga yozish kerak?
Skrinshot yuborish, qizil ramka chizish, hujjat yozish yoki guruhga qo‘shimcha xabar qoldirishga to‘g‘ri keladi, keyin dasturchilar sahifadan kerakli joyni uzoq izlaydi. Sahifa o‘zgartirilsa, eski skrinshot foydasiz bo‘ladi; fikrlar ko‘payganda esa guruh chatidagi kontekstni yo‘qotish oson.
Shuning uchun men Prototype Notes (prototip izohlari) nomli Skill yaratdim. U HTML prototipi yoki frontend ishlab chiqish muhitiga mustaqil izohlar vositasini qo‘shadi va talablar hamda o‘zgartirish fikrlarini bevosita sahifaning o‘zida saqlaydi.
U aslida nima qiladi?
Qisqacha aytganda, u veb-sahifaga “joyidagi eslatmalar” qatlamini o‘rnatadi.
Izohlar rejimi yoqilgach, sahifaning istalgan joyida sichqonchaning o‘ng tugmasini bosib, ikki xil tarkibdan birini qo‘shish mumkin:
Talab izohi: mahsulot menejerlari uchun mo‘ljallangan bo‘lib, yangi talab yoki talabdagi o‘zgarishni bayon qilish, ustuvorlik va holatni belgilash hamda bir nechta izoh qo‘shish imkonini beradi.
O‘zgartirish fikri: tekshiruvchilar uchun mo‘ljallangan bo‘lib, ko‘rib chiqish takliflarini bildirishga xizmat qiladi. Muallif nomini kiritish kerak, ammo ustuvorlik va holatni belgilash shart emas.
>Izohlar rejimi yoqilgach, o‘ng tugmani bosib qo‘shiladigan izoh turini tanlang
Yuborilgandan so‘ng, izoh sahifada kichik belgiga yig‘iladi. Dasturchi belgini bosib kontekstni ko‘rishi mumkin va “skrinshotda qaysi joy nazarda tutilgan?” deb taxmin qilishi shart bo‘lmaydi.
Asosiy funksiyalar
01 Talab izohlari va tekshiruv fikrlarini ajratish
Mahsulot talablari va tekshiruv takliflari aslida ikki xil ma’lumot turidir. Skill ularni bitta shaklga majburan birlashtirmaydi, balki o‘ng tugma menyusining o‘zidan boshlab aniq ajratadi.
>Talab izohi: bir nechta tarkib, ustuvorlik, qo‘shilgan yoki o‘zgartirilgan holat, saqlangan vaqt
>O‘zgartirish fikri: tekshiruvchi nomini kiriting va ko‘rib chiqish taklifini bevosita qayd eting
02 Bitta belgi bir nechta izohni o‘z ichiga olishi mumkin
Bir joyga tegishli talablarni butun qator belgilar bilan to‘ldirish shart emas. Bitta talab belgisi orqali bir nechta talab izohini, o‘zgartirish fikri belgisi orqali esa bir nechta fikrni qo‘shish mumkin. Ularning soni belgi ustidagi ko‘rsatkichda aks etadi.
03 Belgilar va suzuvchi oynalarni ko‘chirish mumkin
Belgi joyi aniq bo‘lmasa, uni sudrab qayta joylashtirish mumkin; suzuvchi oynani ham ko‘rishdagi sahifa tarkibini to‘smasligi uchun boshqa joyga olib borish mumkin. Belgilar nisbiy joylashuvni qayd etadi, shu sababli sahifa aylantirilganda yoki o‘lchami o‘zgarganda ham nishon elementga imkon qadar yopishib turadi.
04 Izohga rasmlarni bevosita joylashtirish mumkin
Faqat matn bilan tushuntirish qiyin bo‘lsa, skrinshotni nusxalab joriy izohga bevosita joylashtiring. Rasm avtomatik siqiladi va izoh ma’lumotlari bilan birga saqlanadi; uni alohida o‘chirish ham mumkin.
05 Izohlar rejimidan tashqarida qat’iy faqat o‘qish
Kundalik ko‘rish vaqtida tarkibni tasodifan o‘zgartirishga yo‘l qo‘yilmaydi va odatiy o‘ng tugma menyusi ham to‘sib qo‘yilmaydi. Faqat izohlar rejimi qo‘lda yoqilgandan keyin izohlarni qo‘shish, tahrirlash, ko‘chirish, import qilish yoki o‘chirish mumkin.
>Oddiy ko‘rish rejimi: izohlarni ko‘rish mumkin, ammo tahrirlash va o‘chirish amallari mavjud emas
06 Git omboridagi JSON fayliga avtomatik saqlash
Izoh ma’lumotlari loyiha ildiz katalogidagi quyidagi faylda saqlanadi:
.prototype-notes/annotations.json
Saqlash, ko‘chirish, import qilish yoki o‘chirishdan so‘ng ishlab chiqish muhiti ushbu faylni avtomatik yangilaydi. Jamoa a’zolari Git’ga yuborgach, izohlar loyiha bilan birga ko‘chiriladi, tekshiriladi va tarixda saqlanadi. Qo‘lda import va eksport qilish ham nosozliklardan tiklanish usuli sifatida saqlab qolinadi.
07 Yakuniy build izohlar kodini o‘z ichiga olmaydi
Bu “bosib yashirish” orqali xavfsiz ko‘rinishga keltiriladigan vosita emas. Vite loyihasida runtime faqat ishlab chiqish rejimida yuklanadi, saqlash interfeysi ham faqat ishlab chiqish serverida mavjud bo‘ladi; statik HTML loyihasida onlayn chiqarishdan oldin uni olib tashlash mumkin. Chiqarish tekshiruvining maqsadi shuki: production mahsulotida izohlar runtime’i ham, izohlarning o‘zi ham umuman bo‘lmasligi kerak.
Menga yoqadigan kichik yechimlar
Ko‘k hujjat belgisi va to‘q sariq fikr belgisi. Suzuvchi oynani ochmasdan ham bu mahsulot talabi yoki tekshiruv fikri ekanini ko‘rish mumkin.
O‘ng tugmani faqat izohlar rejimida boshqaradi. Oddiy vaqtda veb-sahifaning o‘ziga xalaqit bermaydi, qayd kiritish kerak bo‘lganda esa yoqiladi.
Har bir izohda eng so‘nggi saqlash vaqti ko‘rsatiladi. Dasturchi ko‘rayotgan versiyasi yaqinda yangilangan yoki yangilanmaganini bilishi mumkin.
Mahalliy kesh zaxira sifatida ishlaydi. Avtomatik yozish muvaffaqiyatsiz bo‘lsa, brauzerdagi qoralama darhol yo‘qolmaydi, asboblar panelida esa “Sinxronlash muvaffaqiyatsiz tugadi” xabari ko‘rsatiladi.
Manba belgisi mavjud. Joriy versiyada “泥嚎的AI实验室” ko‘rsatiladi va runtime, ishlab chiqish vositalari hamda eksport qilingan JSON ichida yagona tekshiriladigan belgi saqlanadi.
U qanday muammoni hal qiladi?
Birinchidan, talab kontekstining yo‘qolishini kamaytiradi. Talablar endi sahifadan ajralib, chatlar yoki hujjatlarda alohida suzib yurmaydi.
Ikkinchidan, mahsulot va dasturchilarning joyni aniqlash xarajatini kamaytiradi. Belgi aniq boshqaruv elementiga biriktiriladi, sahifani ochish bilan nimani o‘zgartirish kerakligi bilinadi.
Uchinchidan, mahsulot talablari va tekshiruv fikrlarini ajratadi. Kim taklif qilgani va uning mazmuni qanday ekanini bir qarashda farqlash mumkin.
To‘rtinchidan, AI prototipini haqiqiy iteratsiya jarayoniga olib kiradi. AI tezkor yaratish uchun javob beradi, izohlar qatlami esa keyingi fikrlarni yana AI yoki dasturchilarga uzatadi.
Beshinchidan, ishga chiqarish xavfsizligini buzmaydi. Izohlar faqat ishlab chiqish va tekshiruv muhitiga tegishli bo‘lib, rasmiy mahsulot funksiyasiga aylanmaydi.
Turli holatlarda qanday foydalaniladi?
1-holat: AI yaratgan bir sahifali HTML demo
AI’dan Prototype Notes Skill yordamida izohlar qatlamini o‘rnatishni va unga mos mahalliy ishlab chiqish xizmatini ishga tushirishni so‘rang. Mahsulot menejeri sahifada o‘ng tugmani bosib talablarni yozadi, saqlangandan so‘ng ular avtomatik ravishda loyiha JSON fayliga kiritiladi. Tasdiqlangach, runtime olib tashlanadi va statik sahifa chiqariladi.
2-holat: Vue / React + Vite frontend loyihasi
Skill runtime’ni ishlab chiqish vositalari katalogiga joylaydi va faqat ishlab chiqish serverida ishlaydigan saqlash plaginini o‘rnatadi. Loyiha ishlab chiqish buyrug‘ini odatdagidek bajarsangiz, undan foydalanishingiz mumkin; production build vaqtida izohlar runtime’i yuklanmaydi.
3-holat: Mahsulot menejeri va dasturchilar bir xil Git omborida hamkorlik qiladi
Mahsulot menejeri izohlarni saqlab, annotations.json faylini yuboradi, dasturchilar esa kodni tortib olib, izohlarni asl sahifada ko‘rishi mumkin; o‘zgartirishni yakunlagach, yana yuboradi. Git versiyalar, birlashtirish va tarixni boshqaradi, izohlar vositasi esa sahifadagi aniq fikrlarni ifodalaydi.
4-holat: Dizayn yoki biznes tekshiruvi
Tekshiruvchi “O‘zgartirish fikrini qo‘shish” bandini tanlaydi va nomini kiritib taklifni qayd etadi. Mahsulot talablari tekshiruv fikrlari bilan aralashmaydi, dasturchilar esa fikr kimdan kelganini biladi.
5-holat: Faqat ko‘rish huquqiga ega tekshiruv yig‘ilishi
Izohlar rejimi o‘chirilgandan so‘ng ham ishtirokchilar belgilarni bosib ko‘rishi mumkin, ammo tahrirlay olmaydi; barcha belgilarni bir tugma bilan yashirib, sahifani toza ko‘rinishga qaytarish ham mumkin.
Skill’ni qanday o‘rnatish va chaqirish mumkin?
Bu Skill hozircha ochiq manbali emas. Sinab ko‘rmoqchi bo‘lsangiz:
“泥嚎的AI实验室”ni kuzating
Shaxsiy xabarda kalit so‘zni yuboring: 原型批注
Men sizga Skill arxivi va foydalanish yo‘riqnomasini yuboraman.
Arxivni olgach, uni shaxsiy Codex Skill katalogiga oching:
C:\Users\foydalanuvchi_nomingiz\.codex\skills\prototype-notes
Codex vazifasini qayta ochgach, Skill’ni quyidagicha chaqirishingiz mumkin:
Joriy HTML prototipiga izohlar funksiyasini qo‘shish uchun $prototype-notes dan foydalaning.
Tabiiy tilda ham aytish mumkin, masalan:
“Ushbu Vue/Vite loyihasiga prototip izohlarini o‘rnating, ma’lumotlarni Git JSON’iga avtomatik saqlang va production build’ga izohlar kodini qo‘shmang.”
“Ushbu bir sahifali HTML demoga talab izohlari va muallif ko‘rsatilgan o‘zgartirish fikrlarini qo‘shing hamda mahalliy ko‘rishni ishga tushiring.”
Foydalanishda ko‘p uchraydigan muammolar
1. Sahifa ochiladi, ammo saqlangandan keyin JSON o‘zgarmaydi
Ko‘pincha bunga oddiy statik serverdan foydalanish sabab bo‘ladi. Brauzer Git fayllariga bevosita yozolmaydi, shuning uchun Skill o‘rnatgan HTML ishlab chiqish xizmatidan foydalanish yoki Vite’da mos ishlab chiqish plaginini yoqish kerak. Asboblar panelida “Sinxronlash muvaffaqiyatsiz tugadi” ko‘rsatilganda ham mahalliy kesh qoralamani saqlab qoladi.
2. Boshqa kompyuterga o‘tgach, izohlar ko‘rinmaydi
.prototype-notes/annotations.json fayli Git’ga yuborilganini va boshqa tomon eng so‘nggi kodni tortib olganini tekshiring. localStorage faqat shu kompyuter uchun zaxira bo‘lib, jamoa bilan ulashiladigan vosita emas.
3. O‘ng tugma menyusida izohlar bandi chiqmaydi
Avval pastki o‘ng burchakdagi “Izohlar” tugmasini bosib, izohlar rejimiga o‘ting. Oddiy rejimda brauzerning asl o‘ng tugma menyusi saqlanadi va kundalik foydalanishga xalaqit berilmaydi.
4. Sahifa qayta ishlab chiqilgach, belgilar joyi siljib ketdi
Izohlar rejimida belgini yangi joyga sudrang. Tuzilishi tez-tez o‘zgaradigan muhim hududlar uchun AI’dan barqaror data-prototype-anchor qo‘shishni so‘rash mumkin. Bu o‘zgaruvchan DOM ierarxiyasiga bog‘liqlikni kamaytiradi.
5. Git birlashtirish vaqtida annotations.json faylida ziddiyat yuz berdi
Bu asinxron hamkorlik uchun mos, real vaqt rejimidagi bir nechta foydalanuvchili tahrirlash uchun emas. Izoh kiritishdan oldin eng so‘nggi branch’ni tortib oling; bir nechta kishi bir vaqtda o‘zgartirganda, ziddiyatlarni belgi ID’si va yangilangan vaqt bo‘yicha tekshiring. Haqiqiy real vaqt sinxronlashi kerak bo‘lsa, ma’lumotlar bazasi xizmatidan foydalanishni ko‘rib chiqing.
6. Ichki talablar yoki skrinshotlar tashqariga chiqib ketishidan xavotirdasiz
Izohlar tarkibi, tekshiruvchi nomi, sahifa marshruti va joylashtirilgan rasmlarda maxfiy ma’lumotlar bo‘lishi mumkin. Loyiha uchun yopiq ombordan foydalaning; mahalliy ishlab chiqish xizmatini ishonchsiz tarmoqqa ochmang va .prototype-notes katalogini onlayn joylashtirmang.
7. Rasmlar juda ko‘p va brauzer ularni saqlay olmayapti
Runtime rasmlarni siqadi va bitta izohdagi rasmlar sonini cheklaydi, ammo skrinshotlar JSON hajmini baribir oshiradi. Faqat muammoga bevosita aloqador tasvirlarni saqlash, katta rasmlarni esa avval qirqib keyin joylashtirish tavsiya etiladi.
Yakunida
AI “sahifa yaratish”ni tobora tezlashtirmoqda, ammo sahifadan tayyor mahsulotgacha bo‘lgan jarayonda hali ham aniq talablar, tekshiruv va hamkorlik kerak.
Men bu Skill’ni ulkan loyiha boshqaruv tizimini qayta yaratish uchun emas, balki kichik, ammo aniq bir bo‘shliqni to‘ldirish uchun yaratdim:
fikrlar haqiqatan paydo bo‘lgan joyida qolishi uchun.