Claude کے لیے Kubai Icons سے یکساں متحرک اور جامد SVG آئیکنز بنائیں

Kubai Icons ایک Claude اسکل ہے جو ایک ہی بصری زبان میں ہم آہنگ آئیکنز بنانے کے لیے استعمال ہوتی ہے۔ Claude کو خصوصیات کی فہرست یا موجودہ پروڈکٹ ریپوزٹری دیں، اور یہ ایسے آئیکنز ڈیزائن کر سکتا ہے جو پروجیکٹ میں شامل 66 مثالوں سے مطابقت رکھتے ہوں۔ نتیجہ JavaScript سے چلنے والا متحرک SVG یا خود کفیل جامد SVG فائل ہو سکتا ہے۔

یہ نظام تہہ دار اشکال، بیرونی خاکوں، ایکسنٹ سے اخذ کردہ رنگوں، گریڈینٹس، سائے، اور آبجیکٹ کے مطابق ہوور حرکت پر مبنی ہے۔ فولڈر کھلتا ہے، لفافہ کھلتا ہے، اور کیلنڈر عام اینیمیشن استعمال کرنے کے بجائے صفحہ پلٹتا ہے۔

مکمل مجموعہ دیکھنے، پیلیٹس تبدیل کرنے، اور آئیکنز پر ہوور کرنے کے لیے لائیو گیلری کھولیں۔

پروجیکٹ کیسے کام کرتا ہے

Kubai Icons ان ڈیزائن اصولوں اور نفاذی ٹولز کو پیکج کرتا ہے جن کی Claude کو مجموعے میں یکسانیت کے ساتھ توسیع دینے کے لیے ضرورت ہوتی ہے:

• PROMPT.md کینوس کے سائز، کی لائنز، تہوں، کونوں، خاکوں، روشنی، رنگ، نشانات، اور حرکت کے لیے سخت تقاضے متعین کرتا ہے۔
• src/engine.js رنگ اخذ کرنے، بیرونی خاکوں، گریڈینٹس، سائے، انٹرپولیشن، اور پیلیٹس کی سہولت فراہم کرتا ہے۔
• src/icons.js 66 مکمل مثالوں پر مشتمل ہے جو نئے آئیکنز کے لیے ساختی حوالوں کا کام دیتی ہیں۔
• scripts/check.mjs آرام اور ہوور حالتوں، اینیمیشن کے درمیانی فریمز، متعدد سائز، اور ہر پیلیٹ پر ہیڈ لیس بصری جانچ انجام دیتا ہے۔

ہر آئیکن ایک پچھلے حصے، اختیاری سفید مواد، اور اگلے حصے سے تشکیل پاتا ہے۔ فولڈر جیسی یہ ساخت گہرائی برقرار رکھنے اور حرکت کو واضح بنانے میں مدد دیتی ہے۔ ہر حصے کے دو کی فریمز ہوتے ہیں: آرام کی حالت اور ہوور کی حالت۔

Claude اسکل انسٹال کریں

Claude Code کے ذریعے انسٹال کریں

آسان ترین طریقہ یہ ہے کہ Claude Code سے ریپوزٹری کو اس کی اسکلز ڈائریکٹری میں انسٹال کرنے کو کہا جائے۔ یہ درخواست بھیجیں:

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.

انسٹالیشن کے بعد Claude Code دوبارہ شروع کریں۔ اگلی بار شروع ہونے پر اسکل دستیاب ہونی چاہیے۔

دستی طور پر انسٹال کریں

آپ تازہ ترین ریلیز آرکائیو ڈاؤن لوڈ کر کے اسے اپنی اسکلز ڈائریکٹری میں ایکسٹریکٹ کر سکتے ہیں:

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

متبادل طور پر، ریپوزٹری کو براہ راست کلون کریں:

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

ایسی اسکل مارکیٹ پلیس کے لیے جس میں SKILL.md میں ورژن اور ڈسپلے نام کے فیلڈز درکار ہوں، اسی ریلیز کا kubai-icons-v*-platform.zip آرکائیو استعمال کریں۔ اس کے فرنٹ میٹر میں یہ فیلڈز شامل ہیں۔

موزوں ماڈل منتخب کریں

یہ اسکل محتاط جیومیٹری، تہہ دار اینیمیشن، اور بار بار اسکرین شاٹ کے جائزے پر منحصر ہے۔ پروجیکٹ کو Claude Opus 5.5 کے ساتھ تیار اور بلائنڈ ٹیسٹ کیا گیا تھا۔ Claude Code میں اسے یوں منتخب کریں:

claude --model claude-opus-5-5

اپنے پہلے آئیکنز بنائیں

اسکل انسٹال ہونے کے بعد، مطلوبہ آئیکنز کو عام زبان میں بیان کریں۔ آپ کو اسکل کا نام واضح طور پر بتانے کی ضرورت نہیں، کیونکہ یہ آئیکن سے متعلق درخواستوں پر جواب دیتی ہے۔

• 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 ایک قابل تکرار عمل کی پیروی کرتا ہے:

1. یہ PROMPT.md پڑھتا ہے اور ہر خصوصیت کو روزمرہ کی ایک شے اور قدرتی ہوور ایکشن کے طور پر بیان کرتا ہے، جیسے “ایک فولڈر کھلتا ہے۔”
2. یہ ساخت کے لحاظ سے قریب ترین موجودہ آئیکن منتخب کر کے پروجیکٹ انجن دوبارہ استعمال کرتا ہے۔
3. یہ نئے کام کے ساتھ تقابلی آئیکنز رکھ کر خود جانچ چلاتا ہے۔
4. یہ سائز، خاکوں، تہوں، رنگوں، اور اینیمیشن کی حالتوں کے لیے اسکرین شاٹس کا جائزہ لیتا ہے۔
5. یہ چیک لسٹ پاس ہونے تک عمل دہراتا ہے، پھر آئیکنز کو گیلری میں شامل کر کے شمار اپ ڈیٹ کرتا ہے۔

اپنی پروڈکٹ کے لیے الگ آئیکن سیٹ شروع کرنے کے لیے، اسکل انجن، گیلری، اور خود جانچ کو آپ کے پروجیکٹ میں کاپی کر سکتی ہے تاکہ نئے آئیکنز وہیں تیار کیے جا سکیں۔

متحرک یا جامد آؤٹ پٹ منتخب کریں

متحرک آؤٹ پٹ ڈیفالٹ ہے۔ اس میں SVG اور JavaScript شامل ہوتے ہیں جو ہوور پر آئیکن کی اشکال تبدیل کرتے ہیں، اور یہ ان ویب صفحات یا انٹرفیسز کے لیے ہے جہاں JavaScript چلتی ہو۔ جامد آؤٹ پٹ ہر آئیکن کے لیے ایک خود کفیل SVG تیار کرتا ہے، جس میں کوئی اسکرپٹ یا اسٹائل شیٹ نہیں ہوتی، اس لیے یہ ڈیزائن ٹولز، مقامی ایپس، دستاویزات، اور <img> عناصر کے لیے موزوں ہے۔

جب آپ کو ایکسپورٹ کیے گئے اثاثوں کی ضرورت ہو تو Claude سے static SVG files یا icons I can drop into Figma طلب کریں۔ آپ موجودہ آئیکنز کو ریپوزٹری سے براہ راست بھی ایکسپورٹ کر سکتے ہیں۔

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

ایکسپورٹ کے اختیارات

• --palette ایک پیلیٹ منتخب کرتا ہے۔ دستیاب اقدار میں 彩色، 蓝灰، 青瓷، 薄荷، 薰衣草، 杏色، اور 黑色 شامل ہیں۔
• --accent #hex ہر آئیکن پر ایک ایکسنٹ رنگ لاگو کرتا ہے۔
• --state hover آرام کی حالت کے بجائے ہوور اینیمیشن کے اختتام کو ایکسپورٹ کرتا ہے۔
• --size 96 آؤٹ پٹ کی چوڑائی اور اونچائی پکسلز میں متعین کرتا ہے۔
• --pad 2.5 کینوس کے گرد جگہ شامل کرتا ہے تاکہ سائے کٹ نہ جائیں۔
• --out dir آؤٹ پٹ ڈائریکٹری منتخب کرتا ہے۔ ڈیفالٹ export/ ہے۔

آئیکن سیٹ کا مقامی پیش منظر دیکھیں

ریپوزٹری میں مکمل مجموعہ دیکھنے کے لیے ایک گیلری شامل ہے۔ آئیکنز کو مقامی طور پر دیکھنے کے لیے براؤزر میں index.html کھولیں۔ کسی آئیکن پر کرسر لے جا کر اس کی حرکت دیکھیں، رنگوں کا مجموعہ تبدیل کریں، یا ڈیمو موڈ فعال کریں تاکہ مجموعے کو متحرک ہوتے دیکھ سکیں۔

سات رنگوں کے مجموعے شامل ہیں: ہر آئیکن کے لیے ایک رنگ، نیلا مائل خاکستری، سیلاڈون، پودینے کا رنگ، لیونڈر، خوبانی، اور سیاہ۔ رنگوں کا نظام بنیادی نمایاں رنگ سے آئیکنز کے رنگ اخذ کرتا ہے، اور رنگوں کے مجموعے تبدیل کرنے پر رنگوں کی منتقلی بھی متحرک ہوتی ہے۔

بصری خود جانچ چلائیں

خود جانچ کے لیے Node.js 18 یا بعد کا ورژن اور Chrome درکار ہیں۔ یہ پس منظر میں چلتی ہے، اس لیے براؤزر ونڈو نہیں کھولتی۔ منتخب آئیکنز کو جانچنے اور موازنے کے لیے موجودہ آئیکنز کو ان کے ساتھ دکھانے کے لیے یہ کمانڈ چلائیں:

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

• --only صرف نامزد آئیکنز کو جانچتا ہے۔ اس کے بغیر مکمل مجموعہ جانچا جاتا ہے۔
• --with بصری موازنے کے لیے موجودہ آئیکنز کو منتخب آئیکنز کے ساتھ شامل کرتا ہے۔
• --accent #F59E0B ہلکے پس منظر پر ٹیسٹ نشانات کے لیے ایک نمایاں رنگ لاگو کرتا ہے۔
• --scale 3 شیٹس کو معمول کے پیمانے سے تین گنا بڑا رینڈر کرتا ہے تاکہ جوڑ نمایاں ہو سکیں۔
• --out dir اسکرین شاٹس کو check-out/ کے بجائے کسی دوسری ڈائریکٹری میں محفوظ کرتا ہے۔

اگر Chrome غیرمعیاری مقام پر انسٹال ہے تو CHROME ماحول کا متغیر مقرر کریں۔ ریپوزٹری کے اینیمیشن بنانے والے اسکرپٹ scripts/media.mjs کے لیے اضافی طور پر ffmpeg اور img2webp درکار ہیں۔

اعلیٰ سطحی ورک فلو کے مشورے

صرف مفہوم نہیں، ساخت سے آغاز کریں

نیا آئیکن طلب کرتے وقت فیچر اور اس کی مطلوبہ جسمانی کارروائی بیان کریں۔ Claude قریب ترین موجودہ مثال کو ساختی نقطۂ آغاز کے طور پر استعمال کرتا ہے، اس لیے “ایسا قفل جو اچھل کر کھل جائے” جیسی درخواست، سکیورٹی کی علامت کے لیے عمومی درخواست سے زیادہ مفید رہنمائی فراہم کرتی ہے۔

آئیکنز کا متعدد حالات میں موازنہ کریں

موازنے والے آئیکنز، متبادل رنگوں کے مجموعوں، اور بڑے پیمانے کے ساتھ جانچ چلائیں۔ اس سے خاکوں، جوڑوں، تہہ بندی، نشانات، اور رنگوں کے تضاد میں ایسی عدم مطابقتیں سامنے آ سکتی ہیں جو کسی ایک طے شدہ پیش منظر میں نظر نہ آئیں۔

غیر ویب مقامات کے لیے جامد برآمد استعمال کریں

جب منزل انجن کی JavaScript نہیں چلا سکتی، مثلاً ڈیزائن ٹول، مقامی ایپلیکیشن، دستاویز، یا معیاری تصویری عنصر، تو جامد SVG منتخب کریں۔ جب ہوور تعامل انٹرفیس کا حصہ ہو تو متحرک آؤٹ پٹ استعمال کریں۔

بہتریاں احتیاط سے شامل کریں

آپ غیر واضح قواعد کی اطلاع دے کر، تازہ Claude سیشن کے ساتھ بلائنڈ ٹیسٹ چلا کر، یا کسی اسکرپٹ کو درست کر کے اس اسکل کو بہتر بنا سکتے ہیں۔ آپ اس اسکل سے آئیکن ڈیزائن کر کے پل ریکویسٹ بھی جمع کرا سکتے ہیں۔ تعاون سے پہلے CONTRIBUTING.md اور ضابطۂ اخلاق پڑھیں۔ سکیورٹی کے مسائل کے لیے SECURITY.md کی ہدایات پر عمل کریں۔

لائسنس سے متعلق امور

Kubai Icons، Kubai Icons License استعمال کرتا ہے اور اوپن سورس کے بجائے سورس دستیاب منصوبہ ہے۔ اس اسکل سے بنائے گئے آئیکنز ان کے تخلیق کاروں کی ملکیت ہیں اور انہیں کریڈٹ کے بغیر تجارتی طور پر استعمال کیا جا سکتا ہے۔ ریپوزٹری کے انجن، گیلری، مثالی آئیکنز، اور خود جانچ کو آئیکن سیٹ کے منصوبے میں نقل کیا جا سکتا ہے، بشرطیکہ ہر فائل کے آغاز میں موجود کاپی رائٹ نوٹس برقرار رہے۔

66 مثالی آئیکنز کو مصنوعات میں، بشمول متحرک یا برآمد شدہ SVG اثاثوں کے طور پر، استعمال کیا جا سکتا ہے، لیکن الگ آئیکن پیک کے طور پر نہیں۔ اس اسکل کو ذاتی کام کے لیے استعمال اور تبدیل کیا جا سکتا ہے، اور اس کی بالکل غیر تبدیل شدہ نقل مفت میں شیئر کی جا سکتی ہے۔ PROMPT.md اور SKILL.md کے تبدیل شدہ یا ترجمہ شدہ ورژنز کو کسی اور پروڈکٹ کے طور پر دوبارہ شائع، فروخت، یا مختلف نام سے پیش نہیں کیا جا سکتا۔

نتیجہ

Kubai Icons، Claude کو یک بارہ تصویری جنریٹر کے بجائے قابل تکرار آئیکن ڈیزائن ورک فلو میں تبدیل کرتا ہے۔ اسکل انسٹال کریں، اپنی مصنوعات کے فیچرز بیان کریں، متحرک یا جامد آؤٹ پٹ منتخب کریں، مقامی گیلری کا معائنہ کریں، اور مستقل مزاجی بہتر بنانے کے لیے پس منظر میں چلنے والی خود جانچ استعمال کریں۔ شامل انجن، مثالیں، رنگوں کے مجموعے، اور قواعد ہر بار بصری نظام دوبارہ بنائے بغیر مجموعے کو وسعت دینا عملی بناتے ہیں۔