نظام التصميم كمهارة Claude Code
حزمة البداية: متغيرات Figma ورموز التصميم و19 دليلاً تعلّم Claude نظامك.
طريقة التثبيت
- انسخ المجلد إلى
~/.claude/skills/<brand>/لكل المشاريع، أو إلى<project>/.claude/skills/<brand>/لمشروع واحد. غير اسمه إلى اسم علامتك. - في
SKILL.mdاستبدل{Brand}ومفتاح ملف Figma ومسار المستودع. أعد كتابة سطر الوصف ليسمي منتجاتك، فهذا السطر هو ما يقرر به Claude تحميل السكيل. - في
tokens.jsonاستبدل تدرجات Bunn بتدرجاتك، واحتفظ بالبنية نفسها. - افتح تطبيق Claude، تبويب Code، اختر مجلد مشروعك، وأرسل الرسالة الأولى من
README.md.
# مكان المجلد
~/.claude/skills/<brand>/ # كل المشاريع
<project>/.claude/skills/<brand>/ # مشروع واحد
├── SKILL.md
├── README.md
├── tokens.json
├── foundations/
├── components/
├── references/
├── scripts/
├── decisions/
├── docs/
├── GOVERNANCE.md
├── HISTORY.md
└── CHANGELOG.md
# من داخل مجلد السكيل: تحقق منه، ثم أخرج متغيرات CSS
pip install pyyaml
python3 scripts/validate.py
python3 scripts/tokens_to_css.py > tokens.css- الملفات٦
- اللغاتعربي وإنجليزي
- الصيغمهارة Claude Code، متغيرات Figma، أدلة PDF
- آخر تحديث
ماذا يوجد بالداخل
نظام التصميم كمهارة Claude Code حزمة بداية مدفوعة من ليث الجنيدي تكتب نظام تصميمك كمجلد يقرؤه Claude قبل أن يرسم أي شاشة أو يراجعها أو يصلحها. تضم 637 رمزاً بصيغة W3C DTCG عبر ثمانية أسس، ستة عقود مكوّنات بصيغة YAML، قواعد RTL مع طبقة خط عربي، مدقّقاً، سكربتاً يدفع الرموز إلى Figma كمجموعات متغيرات، و19 دليل PDF. مبنية لمصممي المنتجات ومسؤولي أنظمة التصميم والمؤسسين الذين يعملون في Claude Code مع Figma أو Cursor. 79 ملفاً، 39 دولاراً لمرة واحدة، على Gumroad.
Claude ما بيعرف الديزاين سيستم تبعك، فبيخمّن. وانت بتصلّح تخمينه بكل شاشة.
بيختار لون ما حدا وافق عليه. بيرسم بإيده زر موجود أصلاً. بيعمل الشاشة العربي بأنه يعكس الإنجليزي بالآخر. الديزاين سيستم كله براسك وبملف Figma، وولا وحدة من هدول Claude بيقدر يقراها.
هاد الكيت هو نفس الديزاين سيستم بس مكتوب كمجلد Claude بيقراه قبل ما يرسم أو يراجع أو يصلّح أي إشي. بتحطه بالمشروع، بتبدّل البراند التجريبي ببراندك، وبيبطّل يخمّن.
بأي مستوى نظام التصميم تبعك؟
نظام التصميم كمهارة Claude Code بيقيّم نظام التصميم على ست مستويات، من قيم سايبة لنظام بيقراه الايجنت. أغلب الفرق واقفة على المستوى 1 أو 2 أو 3:
- قيم سايبة. هيكس ورقم بكسل مكتوبين بكل شاشة. ما إلهن اسم، فما في إشي بيقدر يتأكد منهن.
- ستايلز بملف Figma. مسمّيين بمكان واحد بس، والكود بيعيد كتابة نفس القيم بالإيد.
- tokens بدائية. في scale وللخطوات أسامي، بس ما في قاعدة بتقول أي خطوة وين بتروح.
- أدوار دلالية. الـ tokens مسمّية بالشغلة يلي بتعملها، وإلها modes للفاتح والغامق وللكثافة وللبريك بوينت.
- عقود وقواعد. كل كومبوننت إله مواصفة مكتوبة، وفي validator بيرفض أي قيمة بتكسرها.
- سيستم بيقراه ايجنت. المجلد هو المصدر. Claude بيفتحه أول إشي، وبيستشهد فيه، وبيقترح بدل ما يخترع.
الكيت بيعطيك المستويات أربعة وخمسة وستة جاهزين، على ثمن foundations: اللون، الخط، المسافات، الراديوس، الحدود، الارتفاع، الـ layout، والحركة. كل وحدة فيهن على ثلاث طبقات، scale بعدين primitives بعدين أدوار دلالية. بتبدّل الـ primitives ببراندك والسيستم كله بيمشي وراك.
شو بيخرب لما Claude ما بيقدر يقرا نظام التصميم تبعك؟
بدون نظام التصميم كمهارة Claude Code، Claude بيخمّن نظام التصميم بكل شاشة، وبتطلع ست مشاكل:
- بتقول لـ Claude أي لون، بكل مرة.
- نفس الزر مرسوم من جديد بثلاث شاشات.
- ملف Figma والكود بيبعدوا عن بعض، وما حدا بيعرف مين الصح.
- سؤال “هاد على البراند؟” بينجاوب من الذاكرة.
- العربي هو الإنجليزي مقلوب بالآخر.
- قرار انأخذ بآذار بينعاد نقاشه بأيلول.
شو بيتغيّر مع نظام التصميم كمهارة Claude Code؟
لما تركّب العدّة، Claude بيفحص كل قيمة مقابل 637 token و6 عقود مكوّنات قبل ما يرسم. كل سطر تحت بيجاوب سطر من القائمة اللي فوق:
- Claude بيوصل اللون لمسار token دلالي، أو بيقولك ما في token لهاي الحالة.
- كل عنصر مربوط بعقد جوا components/. ما في عقد يعني اقتراح، مش حرية تصرّف.
- figma-variables.js بيدفع نفس tokens.json عالملف كثمن مجموعات variables بأوضاعها.
- أي ملاحظة مراجعة لازم تستشهد بمسار token أو حقل بالعقد أو سطر بالقواعد، وإلا ما بتنحسب.
- rtl.md بينشغّل على كل ترتيب، والـ tokens حاملة حجم الخط العربي.
- مجلد decisions/ فيه السجل، وHISTORY.md بيوصلك له بخطوة وحدة.
شو في بتحميل نظام التصميم كمهارة Claude Code؟
تحميل نظام التصميم كمهارة Claude Code مجلد واحد فيه 79 ملف: 60 ملف شغل و19 دليل PDF فيها 312 صفحة. سعر العدّة 39 دولار، مرة وحدة، على Gumroad.
- SKILL.md · MD · الراوتر. مسار تحميل واحد لكل مهمة، قاعدة الـ intake، وأربع قواعد ما بتنكسر.
- tokens.json · JSON · 637 token بصيغة W3C DTCG. scale وprimitives وأدوار دلالية، مع modes للفاتح والغامق، ولثلاث كثافات، ولأربع بريك بوينتس.
- foundations/ · 33 MD · ثمن foundations. كل وحدة إلها ملف قواعد زائد ACCESSIBILITY.md وDEV_HANDOFF.md وKNOWLEDGE_BASE.md.
- components/ · 6 YAML · Button وTextField وCodeField وBadge وBanner وEmptyState، زائد السكيما يلي بينتفحصوا عليها.
- references/ · 8 MD · طرق التصميم والمراجعة والتصليح وإضافة كومبوننت، زائد rtl.md وcontent-system.md وfigma-sync.md وdesign-system.md.
- GOVERNANCE.md وHISTORY.md وdecisions/ · MD · سلّم دورة الحياة، بوابة الترقية بثلاث شروط، سياسة SemVer بطبقتين، وسجل لكل قرار.
- scripts/ · 3 PY + 1 JS · build_tokens.py بيولّد الـ tokens، validate.py بيرفض الهيكس وخطوات الـ scale والـ primitives على أي كومبوننت، tokens_to_css.py بيطلّع متغيرات CSS، وfigma-variables.js بيبني ثمن مجموعات variables بـ Figma عن طريق الـ connector.
- docs/ · 19 PDF · 312 صفحة. دليل الكيت (18 صفحة)، دليل الـ foundations (19)، ومكتبة البرومبتات (27 صفحة، 17 برومبت على ست مراحل)، وبعدين دليل استخدام (20 صفحة) ومكتبة برومبتات (11 صفحة) لكل foundation من الثمنية.
كيف بتبدأ نظام التصميم كمهارة Claude Code؟
أول رسالة بتسأل شغلتين وما بتكتب إشي قبل ما تنجاوب الثنتين. هل رح توصّل Claude على ديزاين سيستم موجود، ولا رح تبدأ واحد من الكيت. وشو النسخة الاحتياطية يلي بدك ياها قبل أول تعديل، نسخة مسمّاة بـ Figma ولا برانش بالريبو.
لمين نظام التصميم كمهارة Claude Code؟
مصممين منتجات، مسؤولين ديزاين سيستم، ومؤسسين شغالين على Claude Code مع Figma أو Cursor أو أي محرر بيقرا skills. أسامي الـ foundations زي قوالب designsystems.surf، فإذا عندك هديك الملفات الـ tokens بتنطبق عليها وحدة بوحدة. الفرق تبع هاد الكيت هو قواعد RTL وطبقة الخط العربي، هدول مش موجودين بالقوالب. البراند التجريبي اسمه Bunn، أبلكيشن توصيل قهوة، ماشي بكل الأدلة عشان تشوف سيستم مخلّص قبل ما تبدّله.
مدفوع
الحزم المدفوعة
القوالب التسعة بنسختها Pro في عدة واحدة، أو نظام تصميمك كمجلد يقرؤه Claude.