Kubai Icons هي مهارة فـ Claude كتعاون فصناعة الأيقونات اللي كيتقاسمو نفس اللغة البصرية. عطِ Claude لائحة ديال الخصائص ولا مستودع ديال منتوج موجود، وغادي يقدر يصمّم أيقونات كتشبه لـ 66 مثال اللي داخلين فالمشروع. النتيجة تقدر تكون SVG ديناميكي كيتحكّم فيه JavaScript ولا ملف SVG ثابت ومستاقل بوحدو.
النظام مبني على أشكال مركّبة فالطبقات، حدود خارجية، ألوان مشتقة من اللون المميّز، تدرّجات، ظلال، وحركة عند المرور خاصة بكل عنصر. المجلد كيتحل، الظرف كيتفتح، والتقويم كيقلب صفحة، عوض استعمال حركة عامة.
حلّ المعرض المباشر باش تشوف المجموعة كاملة، تبدّل لوحات الألوان، وتمرّر فوق الأيقونات.
كيفاش كيخدم المشروع
Kubai Icons كيجمع قواعد التصميم وأدوات التنفيذ اللي كيحتاجها Claude باش يوسّع المجموعة بشكل منسجم:
PROMPT.mdكيحدّد المتطلبات الدقيقة ديال قياس اللوحة، الخطوط المرجعية، الطبقات، الزوايا، الحدود، الإضاءة، اللون، العلامات، والحركة.src/engine.jsكيوفّر اشتقاق الألوان، الحدود الخارجية، التدرّجات، الظلال، الاستيفاء، ولوحات الألوان.src/icons.jsفيه 66 مثال خدام كيرجع ليهم Claude من الناحية البنيوية فالأيقونات الجديدة.scripts/check.mjsكيدير فحص بصري بلا واجهة عبر حالات السكون والمرور، الإطارات الوسيطة ديال الحركة، قياسات مختلفة، وجميع لوحات الألوان.
كل أيقونة كتتركّب من قطعة خلفية، ومحتوى أبيض اختياري، وقطعة أمامية. هاد البناء بحال المجلد كيساعد يحافظ على العمق وكيخلّي الحركة واضحة. كل جزء فيه جوج ديال الإطارات الأساسية: حالة السكون وحالة المرور.
ثبّت مهارة Claude
التثبيت عبر Claude Code
أسهل طريقة هي تطلب من Claude Code يثبّت المستودع فمجلد المهارات ديالو. صيفط ليه هاد الطلب:
ثبّت ليا مهارة Kubai Icons:
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 من نفس الإصدار. فيه هاد الحقول فـ frontmatter.
اختار موديل مناسب
المهارة كتحتاج هندسة دقيقة، حركة على طبقات، ومراجعة متكررة باللقطات. المشروع تطوّر وتجرّب بلا اطلاع مسبق باستعمال Claude Opus 5.5. فـ Claude Code، تقدر تختارو بهاد الأمر:
claude --model claude-opus-5-5ولّد أول أيقونات ديالك
منين تثبّت المهارة، شرح الأيقونات اللي محتاج بلغة عادية. ما محتاجش تذكر اسم المهارة صراحة حيث كتجاوب على الطلبات المرتبطة بالأيقونات.
قرا هاد المستودع ورسم أيقونات ديناميكية للخصائص الرئيسية ديالو.زيد أيقونة ديال المقص وأيقونة ديال الخريطة لهاد المجموعة.محتاجين أيقونة للتصدير تكون منسجمة مع الباقي.
Claude كيتبع واحد العملية قابلة للتكرار:
- كيقرا
PROMPT.mdوكيصف كل خاصية كشيء من الحياة اليومية مع حركة طبيعية عند المرور، بحال «مجلد كيتحل». - كيختار أقرب أيقونة موجودة من ناحية البنية وكيعاود يستعمل محرّك المشروع.
- كيدير الفحص الذاتي مع أيقونات للمقارنة حدّ العمل الجديد.
- كيراجع اللقطات باش يتأكد من القياسات، الحدود، الطبقات، الألوان، وحالات الحركة.
- كيعاود العملية حتى كتدوز اللائحة، ومن بعد كيضيف الأيقونات للمعرض وكيحدّث الأعداد.
باش تبدا مجموعة أيقونات مستقلة للمنتوج ديالك، المهارة تقدر تنسخ المحرّك، المعرض، والفحص الذاتي للمشروع ديالك باش تطوّر الأيقونات الجديدة تما.
اختار مخرجات ديناميكية ولا ثابتة
المخرجات الديناميكية هي الافتراضية. فيها SVG وJavaScript كيبدّل أشكال الأيقونة عند المرور، ومخصّصة للصفحات أو الواجهات اللي كتشغّل JavaScript. المخرجات الثابتة كتنتج SVG واحد مستقل لكل أيقونة بلا سكريبت ولا stylesheet، وهاد الشي كيخليها مناسبة لأدوات التصميم، التطبيقات الأصلية، الوثائق، وعناصر <img>.
طلب من Claude ملفات SVG ثابتة ولا أيقونات نقدر نحطّها مباشرة فـ 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 كيستعمل أقرب مثال موجود كنقطة بداية هيكلية، لذلك طلب بحال «قفل كيتحلّ بنابض» كيعطي توجيهاً مفيداً أكثر من طلب عام على رمز ديال الأمان.
قارن الأيقونات فظروف متعددة
دير الفحوصات مع أيقونات للمقارنة، وباليتات مختلفة، وحجم أكبر. هاد الشي كيساعد يبيّن الاختلافات فالمحيطات، والفواصل، والطبقات، والعلامات، وتباين الألوان اللي ممكن ما تبانش فمعاينة افتراضية وحدة.
استعمل التصدير الثابت للوجهات اللي ماشي ويب
اختار SVG ثابت إلا كانت الوجهة ما كتقدرش تشغّل JavaScript ديال المحرك، بحال أداة تصميم، تطبيق أصلي، وثيقة، ولا عنصر صورة عادي. استعمل الإخراج الديناميكي إلا كان التفاعل مع تمرير الماوس جزءاً من الواجهة.
ساهم بالتحسينات بحذر
تقدر تحسّن المهارة بالتبليغ على القواعد اللي ما واضحةش، أو بإجراء اختبار أعمى مع جلسة Claude جديدة، أو بإصلاح سكريپت. وتقدر حتى تصمّم أيقونة باستعمال المهارة وتقدّم طلب سحب. قرا CONTRIBUTING.md ومدونة السلوك قبل المساهمة. المشاكل الأمنية خاصها تتبع SECURITY.md.
اعتبارات الترخيص
Kubai Icons كيستعمل ترخيص Kubai Icons، وهو متاح للاطلاع على المصدر وماشي مفتوح المصدر. الأيقونات اللي كتتخلق بالمهارة كتنتمي للمبدعين ديالها، ويمكن استعمالها تجارياً بلا ذكر المصدر. محرك الريپوزيتوري، والغالبية، وأمثلة الأيقونات، والفحص الذاتي، يمكن نسخهم لمشروع ديال مجموعة أيقونات إلا بقى إشعار حقوق النشر فالفوق ديال كل ملف.
الأيقونات الـ66 النموذجية يمكن استعمالها فالمنتجات، بما فيها كأصول SVG متحركة أو مُصدّرة، ولكن ما يمكنش تستعمل كحزمة أيقونات مستقلة. يمكن استعمال المهارة وتعديلها للأعمال الشخصية ومشاركة نسخة مطابقة وغير معدّلة منها مجاناً. النسخ المعدّلة أو المترجمة من PROMPT.md وSKILL.md ما خاصهاش تعاود تنشر كمنتج آخر، ولا تتباع، ولا تتقدّم باسم مختلف.
الخلاصة
Kubai Icons كيحوّل Claude لسير عمل قابل للتكرار فتصميم الأيقونات، ماشي غير مولّد صور لمرة وحدة. نصّب المهارة، وصف ميزات المنتج ديالك، اختار الإخراج الديناميكي ولا الثابت، عاين الغاليري المحلي، واستعمل الفحص الذاتي بلا واجهة باش تحسّن الانسجام. المحرك، والأمثلة، والباليتات، والقواعد المرفقة كيجعلو توسيع المجموعة عملياً بلا ما تعاود تبني النظام البصري كل مرة.