Claude uchun Kubai Icons yordamida uyg‘un animatsiyali va statik SVG ikonalar yarating

Kubai Icons — bitta vizual tilda ishlaydigan ikonalar yaratish uchun Claude ko‘nikmasi. Claude’ga funksiyalar ro‘yxati yoki mavjud mahsulot repozitoriyasini bering, u loyihaga kiritilgan 66 ta namunaga mos ikonalar yaratadi. Natija JavaScript boshqaradigan dinamik SVG yoki mustaqil statik SVG fayl bo‘lishi mumkin.

Tizim qatlamli shakllar, tashqi konturlar, aksent ranglardan hosil qilinadigan ranglar, gradientlar, soyalar va obyektga xos hover harakatlariga asoslangan. Papka ochiladi, konvert muhrini ochadi, taqvim esa umumiy animatsiyadan foydalanish o‘rniga sahifasini aylantiradi.

Jonli galereyani oching va to‘liq to‘plamni ko‘ring, palitralarni almashtiring hamda ikonalar ustiga kursor olib boring.

Loyiha qanday ishlaydi

Kubai Icons to‘plami Claude’ga to‘plamni izchil kengaytirish uchun kerak bo‘ladigan dizayn qoidalari va amalga oshirish vositalarini taqdim etadi:

• PROMPT.md kanvas o‘lchami, yo‘naltiruvchi chiziqlar, qatlamlar, burchaklar, konturlar, yoritish, rang, belgilar va harakat uchun qat’iy talablarni belgilaydi.
• src/engine.js rang hosil qilish, tashqi konturlar, gradientlar, soyalar, interpolatsiya va palitralarni taqdim etadi.
• src/icons.js yangi ikonalar uchun tuzilmaviy namuna bo‘lib xizmat qiladigan 66 ta tayyor misolni o‘z ichiga oladi.
• scripts/check.mjs tinch va hover holatlari, animatsiyaning oraliq kadrlari, bir nechta o‘lchamlar va barcha palitralar bo‘yicha vizual tekshiruvni brauzersiz bajaradi.

Har bir ikona orqa qism, ixtiyoriy oq kontent va old qismdan tuziladi. Papkaga o‘xshash ushbu tuzilma chuqurlikni saqlashga va harakatni aniq ko‘rsatishga yordam beradi. Har bir qismda ikkita keyframe mavjud: tinch holat va hover holati.

Claude ko‘nikmasini o‘rnating

Claude Code orqali o‘rnatish

Eng oddiy usul — Claude Code’dan repozitoriyani ko‘nikmalar katalogiga o‘rnatishni so‘rash. Quyidagi so‘rovni yuboring:

Install the Kubai Icons skill for me:
clone https://github.com/kubai087/kubai-icons into ~/.claude/skills/kubai-icons
(if it's already there, pull the latest version instead),
make sure ~/.claude/skills/kubai-icons/SKILL.md exists, and tell me when it's ready.

O‘rnatishdan so‘ng Claude Code’ni qayta ishga tushiring. Ko‘nikma keyingi ishga tushirishda mavjud bo‘ladi.

Qo‘lda o‘rnatish

Eng so‘nggi reliz arxivini yuklab olib, uni ko‘nikmalar katalogiga chiqarishingiz mumkin:

unzip kubai-icons-v1.0.0.zip -d ~/.claude/skills/

Shuningdek, repozitoriyani bevosita klonlashingiz mumkin:

git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-icons

SKILL.md faylida versiya va ko‘rsatiladigan nom maydonlarini talab qiladigan ko‘nikmalar marketpleysi uchun shu relizdagi kubai-icons-v*-platform.zip arxividan foydalaning. Unda frontmatter qismida ushbu maydonlar mavjud.

Mos modelni tanlang

Ko‘nikma aniq geometriya, qatlamli animatsiya va takroriy skrinshot tekshiruviga tayanadi. Loyiha Claude Opus 5.5 yordamida ishlab chiqilgan va ko‘r-ko‘rona sinovdan o‘tkazilgan. Claude Code’da uni quyidagicha tanlashingiz mumkin:

claude --model claude-opus-5-5

Birinchi ikonkalaringizni yarating

Ko‘nikma o‘rnatilgach, kerakli ikonalarni oddiy tilda tasvirlang. Ko‘nikma nomini aniq ko‘rsatishingiz shart emas, chunki u ikonkalarga oid so‘rovlarga javob beradi.

• Read this repository and draw dynamic icons for its main features.
• Add a scissors icon and a map icon to this set.
• We need an icon for Export that matches the others.

Claude takrorlanadigan jarayonni bajaradi:

1. U PROMPT.md faylini o‘qiydi va har bir funksiyani kundalik obyekt hamda tabiiy hover harakati, masalan, “papka ochiladi”, sifatida tasvirlaydi.
2. Tuzilishi bo‘yicha eng yaqin mavjud ikonani tanlaydi va loyiha dvigatelidan qayta foydalanadi.
3. Yangi ish yonida taqqoslash ikonalarini ko‘rsatgan holda o‘z-o‘zini tekshirishni ishga tushiradi.
4. O‘lchamlar, konturlar, qatlamlar, ranglar va animatsiya holatlari bo‘yicha skrinshotlarni tekshiradi.
5. Tekshiruv ro‘yxatidan o‘tmaguncha takrorlaydi, so‘ng ikonalarni galereyaga qo‘shadi va sonlarni yangilaydi.

O‘z mahsulotingiz uchun alohida ikona to‘plamini boshlash uchun ko‘nikma dvigatel, galereya va o‘z-o‘zini tekshirish vositasini loyihangizga ko‘chirib, yangi ikonalarni shu yerda ishlab chiqishi mumkin.

Dinamik yoki statik chiqishni tanlang

Dinamik chiqish standart hisoblanadi. U hover paytida ikona shakllarini o‘zgartiradigan SVG va JavaScript’ni o‘z ichiga oladi hamda veb-sahifalar yoki JavaScript ishlaydigan interfeyslar uchun mo‘ljallangan. Statik chiqish har bir ikona uchun skript va uslublar jadvalisiz, mustaqil bitta SVG yaratadi. Shu sababli u dizayn vositalari, mahalliy ilovalar, hujjatlar va <img> elementlari uchun mos keladi.

Eksport qilingan materiallar kerak bo‘lganda Claude’dan statik SVG fayllar yoki Figma’ga joylay oladigan ikonalarni so‘rang. Shuningdek, mavjud ikonalarni bevosita repozitoriyadan eksport qilishingiz mumkin.

node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/

Eksport parametrlari

• --palette palitrani tanlaydi. Mavjud qiymatlar: 彩色, 蓝灰, 青瓷, 薄荷, 薰衣草, 杏色 va 黑色.
• --accent #hex barcha ikonkalarga bitta aksent rangni qo‘llaydi.
• --state hover tinch holat o‘rniga hover animatsiyasining oxirgi kadrini eksport qiladi.
• --size 96 chiqish kengligi va balandligini piksellarda belgilaydi.
• --pad 2.5 soyalar kesilib qolmasligi uchun kanvas atrofida bo‘sh joy qo‘shadi.
• --out dir chiqish katalogini tanlaydi. Standart qiymat: export/.

Ikonalar to‘plamini mahalliy ko‘rib chiqing

Repozitariy to‘liq to‘plamni ko‘rish uchun galereyani o‘z ichiga oladi. Belgilarni mahalliy ko‘rish uchun brauzerda index.html faylini oching. Harakatini ko‘rish uchun belgi ustiga kursorni olib boring, ranglar palitrasini o‘zgartiring yoki to‘plam animatsiyasini kuzatish uchun demo rejimini yoqing.

Yetti palitra mavjud: har bir belgi uchun alohida rang, ko‘k-kulrang, seladon, yalpiz, lavanda, o‘rik va qora. Palitra tizimi belgilar ranglarini asosiy aksent rangidan hosil qiladi, palitralarni almashtirish esa rang o‘tishini ham animatsiyalaydi.

Vizual o‘z-o‘zini tekshirishni ishga tushirish

O‘z-o‘zini tekshirish uchun Node.js 18 yoki undan keyingi versiyasi va Chrome kerak. U yashirin rejimda ishlaydi, shuning uchun brauzer oynasini ochmaydi. Tanlangan belgilarni tekshirish va taqqoslash uchun mavjud belgilarni ularning yoniga joylashtirish uchun quyidagini ishga tushiring:

node scripts/check.mjs --only 剪刀,地图 --with 文件夹,邮件,下载

• --only faqat nomi ko‘rsatilgan belgilarni tekshiradi. U bo‘lmasa, to‘liq to‘plam tekshiriladi.
• --with vizual taqqoslash uchun tanlangan belgilar yoniga mavjud belgilarni qo‘shadi.
• --accent #F59E0B och rangli fonlarda sinov belgilariga bitta aksent rangini qo‘llaydi.
• --scale 3 choklarni ko‘rsatish uchun varaqlarni odatdagi o‘lchamdan uch baravar kattalashtirib chiqaradi.
• --out dir skrinshotlarni check-out/ o‘rniga boshqa katalogga yozadi.

Chrome nostandart yo‘lda o‘rnatilgan bo‘lsa, CHROME muhit o‘zgaruvchisini belgilang. Repozitariyning animatsiya yaratish skripti, scripts/media.mjs, qo‘shimcha ravishda ffmpeg va img2webp dasturlarini talab qiladi.

Ilg‘or ish jarayoni bo‘yicha maslahatlar

Faqat ma’nodan emas, tuzilishdan boshlang

Yangi belgi so‘raganingizda, xususiyat va uning ko‘zda tutilgan jismoniy harakatini tushuntiring. Claude eng yaqin mavjud misoldan tuzilma uchun boshlang‘ich nuqta sifatida foydalanadi, shuning uchun “ochilib ketadigan qulf” kabi so‘rov xavfsizlik ramzini umumiy so‘rashdan ko‘ra foydaliroq yo‘nalish beradi.

Belgilarni bir nechta sharoitda taqqoslang

Taqqoslash belgilari, muqobil palitralar va kattaroq o‘lcham bilan tekshiruvlarni ishga tushiring. Bu bitta standart ko‘rinishda sezilmasligi mumkin bo‘lgan konturlar, choklar, qatlamlar, belgilar va ranglar kontrastidagi nomuvofiqliklarni aniqlashga yordam beradi.

Vebdan tashqari manzillar uchun statik eksportdan foydalaning

Manzil engine JavaScript’ini ishga tushira olmasa, masalan, dizayn vositasi, native ilova, hujjat yoki standart rasm elementi uchun statik SVG’ni tanlang. Interfeysning bir qismi sifatida kursor ustiga olib borish interaksiyasi kerak bo‘lsa, dinamik chiqishdan foydalaning.

Yaxshilanishlarni ehtiyotkorlik bilan qo‘shing

Tushunarsiz qoidalar haqida xabar berish, yangi Claude sessiyasi bilan ko‘r test o‘tkazish yoki skriptni tuzatish orqali skill’ni yaxshilashingiz mumkin. Shuningdek, skill yordamida belgi yaratib, pull request yuborishingiz mumkin. Hissa qo‘shishdan oldin CONTRIBUTING.md va xulq-atvor kodeksini o‘qing. Xavfsizlik muammolari uchun SECURITY.md ko‘rsatmalariga amal qiling.

Litsenziya bo‘yicha mulohazalar

Kubai Icons Kubai Icons License litsenziyasidan foydalanadi va ochiq manbali emas, balki manbasi mavjud loyiha hisoblanadi. Skill yordamida yaratilgan belgilar ularni yaratuvchilarga tegishli bo‘lib, mualliflik ko‘rsatmasisiz tijoriy maqsadlarda ishlatilishi mumkin. Har bir fayl tepasidagi mualliflik huquqi eslatmasi saqlansa, repozitariyning engine’i, galereyasi, namunaviy belgilari va o‘z-o‘zini tekshirish vositasi belgilar to‘plami loyihasiga ko‘chirilishi mumkin.

66 ta namunaviy belgidan mahsulotlarda, jumladan animatsiyalangan yoki eksport qilingan SVG aktivlari sifatida foydalanish mumkin, ammo alohida belgi to‘plami sifatida emas. Skill’dan foydalanish, uni shaxsiy ish uchun o‘zgartirish va aynan o‘zgartirilmagan nusxa sifatida bepul ulashish mumkin. PROMPT.md va SKILL.md fayllarining o‘zgartirilgan yoki tarjima qilingan versiyalari boshqa mahsulot sifatida qayta nashr etilmasligi, sotilmasligi yoki boshqa nom ostida taqdim qilinmasligi kerak.

Xulosa

Kubai Icons Claude’ni bir martalik tasvir generatori emas, balki takroriy belgi dizayni ish jarayoniga aylantiradi. Skill’ni o‘rnating, mahsulot xususiyatlarini tasvirlang, dinamik yoki statik chiqishni tanlang, mahalliy galereyani tekshiring va izchillikni takomillashtirish uchun yashirin rejimdagi o‘z-o‘zini tekshirishdan foydalaning. Kiritilgan engine, misollar, palitralar va qoidalar har safar vizual tizimni qayta qurmasdan to‘plamni kengaytirishni amaliy qiladi.