Unda Ikoni za SVG Zinazohuishwa na Tuli Zenye Mwonekano Thabiti kwa Kubai Icons katika Claude

Kubai Icons ni ujuzi wa Claude wa kuunda aikoni zinazoshiriki lugha moja ya kuona. Mpe Claude orodha ya vipengele au hazina iliyopo ya bidhaa, naye anaweza kubuni aikoni zinazolingana na mifano 66 iliyojumuishwa kwenye mradi. Matokeo yanaweza kuwa SVG inayobadilika inayoendeshwa na JavaScript au faili ya SVG tuli inayojitegemea.

Fungua ghala la moja kwa moja ili kuhakiki mkusanyiko kamili, kubadilisha paleti, na kuweka kipanya juu ya aikoni.

Jinsi mradi unavyofanya kazi

Kubai Icons hupakia kanuni za muundo na zana za utekelezaji ambazo Claude anahitaji ili kupanua mkusanyiko kwa uthabiti:

• PROMPT.md hufafanua mahitaji madhubuti ya ukubwa wa turubai, mistari elekezi, tabaka, pembe, mihtasari, mwangaza, rangi, alama, na mwendo.
• src/engine.js hutoa uundaji wa rangi, mihtasari ya nje, gradienti, vivuli, interpolation, na paleti.
• src/icons.js ina mifano 66 iliyokamilishwa ambayo hutumika kama marejeo ya kimuundo kwa aikoni mpya.
• scripts/check.mjs hufanya ukaguzi wa kuona bila kivinjari katika hali za pumziko na hover, fremu za kati za uhuishaji, ukubwa mbalimbali, na kila paleti.

Kila aikoni huundwa kutoka kwa kipande cha nyuma, maudhui meupe ya hiari, na kipande cha mbele. Muundo huu unaofanana na folda husaidia kuhifadhi kina na kufanya mwendo usomeke. Kila sehemu ina fremu-msingi mbili: hali ya pumziko na hali ya hover.

Sakinisha ujuzi wa Claude

Sakinisha kupitia Claude Code

Njia rahisi zaidi ni kumwomba Claude Code asakinishe hazina kwenye saraka yake ya ujuzi. Tuma ombi lifuatalo:

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.

Anzisha upya Claude Code baada ya usakinishaji. Ujuzi huo unapaswa kupatikana utakapoanzisha tena.

Sakinisha mwenyewe

Unaweza kupakua kumbukumbu ya toleo jipya zaidi na kuifungua kwenye saraka yako ya ujuzi:

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

Vinginevyo, kloni hazina moja kwa moja:

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

Kwa soko la ujuzi linalohitaji sehemu za toleo na jina la kuonyesha kwenye SKILL.md, tumia kumbukumbu ya kubai-icons-v*-platform.zip kutoka toleo hilo hilo. Ina sehemu hizo katika frontmatter.

Chagua modeli inayofaa

Ujuzi huu unategemea jiometri makini, uhuishaji wa tabaka, na mapitio ya mara kwa mara ya picha za skrini. Mradi huu uliundwa na kufanyiwa majaribio bila upendeleo kwa kutumia Claude Opus 5.5. Kwenye Claude Code, unaweza kuichagua kwa:

claude --model claude-opus-5-5

Tengeneza aikoni zako za kwanza

Baada ya kusakinisha ujuzi, eleza aikoni unazohitaji kwa lugha ya kawaida. Huhitaji kutaja ujuzi huo waziwazi kwa sababu hujibu maombi yanayohusiana na aikoni.

• 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 hufuata mchakato unaoweza kurudiwa:

1. Husoma PROMPT.md na kueleza kila kipengele kama kitu cha kila siku pamoja na kitendo cha asili cha hover, kama vile “folda hufunguka.”
2. Huchagua aikoni iliyopo iliyo karibu zaidi kimuundo na kutumia tena injini ya mradi.
3. Huendesha ukaguzi wa kibinafsi huku aikoni za ulinganisho zikiwa kando ya kazi mpya.
4. Hukagua picha za skrini kwa vipimo, mihtasari, tabaka, rangi, na hali za uhuishaji.
5. Hurudia hadi orodha ya ukaguzi ipite, kisha huongeza aikoni kwenye ghala na kusasisha hesabu.

Ili kuanza seti tofauti ya aikoni kwa bidhaa yako mwenyewe, ujuzi huu unaweza kunakili injini, ghala, na ukaguzi wa kibinafsi kwenye mradi wako ili aikoni mpya ziendelezwe humo.

Chagua matokeo yanayobadilika au tuli

Matokeo yanayobadilika ndiyo chaguo-msingi. Yana SVG na JavaScript inayobadilisha maumbo ya aikoni wakati wa hover, na yamekusudiwa kurasa za wavuti au violesura vinavyoendesha JavaScript. Matokeo tuli hutengeneza SVG moja inayojitegemea kwa kila aikoni bila script au stylesheet, hivyo yanafaa kwa zana za muundo, programu asilia, hati, na vipengele vya <img>.

Muombe Claude static SVG files au icons I can drop into Figma unapohitaji rasilimali zilizohamishwa. Unaweza pia kuhamisha aikoni zilizopo moja kwa moja kutoka kwenye hazina.

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

Chaguo za uhamishaji

• --palette huchagua paleti. Thamani zinazopatikana ni pamoja na 彩色, 蓝灰, 青瓷, 薄荷, 薰衣草, 杏色, na 黑色.
• --accent #hex hutumia rangi moja ya msisitizo kwa kila aikoni.
• --state hover huhamisha mwisho wa uhuishaji wa hover badala ya mkao wa pumziko.
• --size 96 huweka upana na urefu wa matokeo kwa pikseli.
• --pad 2.5 huongeza nafasi kuzunguka turubai ili vivuli visikatwe.
• --out dir huchagua saraka ya matokeo. Chaguo-msingi ni export/.

Hakiki seti ya aikoni ndani ya kifaa chako

Hifadhi hii inajumuisha ghala la kukagua seti nzima. Fungua index.html katika kivinjari ili kuona aikoni kwenye kompyuta yako. Elea juu ya aikoni ili kuona mwendo wake, badilisha paleti, au washa hali ya onyesho ili kutazama mkusanyiko ukihuishwa.

Paleti saba zimejumuishwa: rangi moja kwa kila aikoni, samawati-kijivu, celadoni, mnanaa, lavenda, aprikoti, na nyeusi. Mfumo wa paleti hupata rangi za aikoni kutokana na rangi msingi ya lafudhi, na kubadilisha paleti pia huchezesha mpito wa rangi.

Endesha ukaguzi wa kuona wa kibinafsi

Ukaguzi huu unahitaji Node.js 18 au toleo jipya zaidi na Chrome. Huendeshwa bila kuonyesha kiolesura, kwa hiyo haufungui dirisha la kivinjari. Ili kukagua aikoni zilizochaguliwa na kuweka aikoni zilizopo kando yao kwa ulinganisho, endesha:

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

• --only hukagua aikoni zilizotajwa pekee. Bila chaguo hili, seti nzima hukaguliwa.
• --with huongeza aikoni zilizopo kando ya aikoni zilizochaguliwa kwa ulinganisho wa kuona.
• --accent #F59E0B hutumia rangi moja ya lafudhi kwenye alama za majaribio dhidi ya mandharinyuma mepesi.
• --scale 3 hutoa laha kwa ukubwa mara tatu ya kawaida ili kufichua mipasuko.
• --out dir huandika picha za skrini kwenye saraka tofauti na check-out/.

Weka kigezo cha mazingira cha CHROME ikiwa Chrome imesakinishwa kwenye njia isiyo ya kawaida. Skripti ya kutengeneza uhuishaji ya hifadhi hii, scripts/media.mjs, pia inahitaji ffmpeg na img2webp.

Vidokezo vya mtiririko wa kazi wa hali ya juu

Anza na muundo, si maana pekee

Unapoomba aikoni mpya, eleza kipengele na kitendo chake halisi kinachokusudiwa. Claude hutumia mfano uliopo ulio karibu zaidi kama mwanzo wa kimuundo, kwa hiyo ombi kama “kufuli inayofunguka kwa msukumo” hutoa mwelekeo muhimu zaidi kuliko ombi la jumla la ishara ya usalama.

Linganisha aikoni katika hali nyingi

Endesha ukaguzi ukiwa na aikoni za ulinganisho, paleti mbadala, na ukubwa mkubwa zaidi. Hii husaidia kufichua kutolingana katika mistari ya nje, mipasuko, uwekaji wa tabaka, alama, na utofautishaji wa rangi ambao huenda usionekane katika mwonekano mmoja wa kawaida.

Tumia uhamishaji tuli kwa maeneo yasiyo ya wavuti

Chagua SVG tuli wakati eneo lengwa haliwezi kuendesha JavaScript ya injini, kama vile zana ya usanifu, programu asili, hati, au kipengele cha kawaida cha picha. Tumia matokeo yanayobadilika wakati mwingiliano wa kuelea ni sehemu ya kiolesura.

Changia maboresho kwa uangalifu

Unaweza kuboresha ujuzi huu kwa kuripoti sheria zisizoeleweka, kuendesha jaribio lisilo na upendeleo kwa kipindi kipya cha Claude, au kurekebisha skripti. Unaweza pia kubuni aikoni kwa kutumia ujuzi huu na kuwasilisha ombi la kuvuta. Soma CONTRIBUTING.md na kanuni za mwenendo kabla ya kuchangia. Masuala ya usalama yanapaswa kufuata SECURITY.md.

Mambo ya kuzingatia kuhusu leseni

Aikoni za Kubai hutumia Leseni ya Aikoni za Kubai na zinapatikana kwa kuangaliwa chanzo badala ya kuwa programu huria. Aikoni zilizoundwa kwa ujuzi huu ni za waundaji wake na zinaweza kutumiwa kibiashara bila kutaja chanzo. Injini, ghala, aikoni za mfano, na ukaguzi wa kibinafsi wa hifadhi hii vinaweza kunakiliwa katika mradi wa seti ya aikoni ikiwa notisi ya hakimiliki iliyo juu ya kila faili itabaki.

Aikoni 66 za mfano zinaweza kutumiwa katika bidhaa, zikiwemo kama rasilimali za SVG zilizohuishwa au kuhamishwa, lakini si kama pakiti tofauti ya aikoni. Ujuzi huu unaweza kutumiwa, kurekebishwa kwa kazi binafsi, na kushirikiwa bila malipo kama nakala kamili isiyobadilishwa. Matoleo yaliyorekebishwa au yaliyotafsiriwa ya PROMPT.md na SKILL.md hayapaswi kuchapishwa tena kama bidhaa nyingine, kuuzwa, au kuwasilishwa kwa jina tofauti.

Hitimisho

Aikoni za Kubai hubadilisha Claude kuwa mtiririko wa kazi unaorudiwa wa usanifu wa aikoni badala ya jenereta ya picha ya matumizi ya mara moja. Sakinisha ujuzi huu, eleza vipengele vya bidhaa yako, chagua matokeo yanayobadilika au tuli, kagua ghala la ndani, na utumie ukaguzi wa kibinafsi usio na kiolesura ili kuboresha ulinganifu. Injini, mifano, paleti, na sheria zilizojumuishwa hurahisisha kupanua seti bila kujenga upya mfumo wa kuona kila mara.