نظام التصميم كمهارة Claude Code

Claude ما بيعرف الديزاين سيستم تبعك، فبيخمّن. وانت بتصلّح تخمينه بكل شاشة.

بيختار لون ما حدا وافق عليه. بيرسم بإيده زر موجود أصلاً. بيعمل الشاشة العربي بأنه يعكس الإنجليزي بالآخر. الديزاين سيستم كله براسك وبملف Figma، وولا وحدة من هدول Claude بيقدر يقراها.

هاد الكيت هو نفس الديزاين سيستم بس مكتوب كمجلد Claude بيقراه قبل ما يرسم أو يراجع أو يصلّح أي إشي. بتحطه بالمشروع، بتبدّل البراند التجريبي ببراندك، وبيبطّل يخمّن.

وين انت هلق

1. قيم سايبة. هيكس ورقم بكسل مكتوبين بكل شاشة. ما إلهن اسم، فما في إشي بيقدر يتأكد منهن.
2. ستايلز بملف Figma. مسمّيين بمكان واحد بس، والكود بيعيد كتابة نفس القيم بالإيد.
3. tokens بدائية. في scale وللخطوات أسامي، بس ما في قاعدة بتقول أي خطوة وين بتروح.
4. أدوار دلالية. الـ tokens مسمّية بالشغلة يلي بتعملها، وإلها modes للفاتح والغامق وللكثافة وللبريك بوينت.
5. عقود وقواعد. كل كومبوننت إله مواصفة مكتوبة، وفي validator بيرفض أي قيمة بتكسرها.
6. سيستم بيقراه ايجنت. المجلد هو المصدر. Claude بيفتحه أول إشي، وبيستشهد فيه، وبيقترح بدل ما يخترع.

الكيت بيعطيك المستويات أربعة وخمسة وستة جاهزين، على ثمن foundations: اللون، الخط، المسافات، الراديوس، الحدود، الارتفاع، الـ layout، والحركة. كل وحدة فيهن على ثلاث طبقات، scale بعدين primitives بعدين أدوار دلالية. بتبدّل الـ primitives ببراندك والسيستم كله بيمشي وراك.

قبل

• بتقول لـ Claude أي لون، بكل مرة.
• نفس الزر مرسوم من جديد بثلاث شاشات.
• ملف Figma والكود بيبعدوا عن بعض، وما حدا بيعرف مين الصح.
• سؤال “هاد على البراند؟” بينجاوب من الذاكرة.
• العربي هو الإنجليزي مقلوب بالآخر.
• قرار انأخذ بآذار بينعاد نقاشه بأيلول.

بعد

• Claude بيوصل اللون لمسار token دلالي، أو بيقولك ما في token لهاي الحالة.
• كل عنصر مربوط بعقد جوا components/. ما في عقد يعني اقتراح، مش حرية تصرّف.
• figma-variables.js بيدفع نفس tokens.json عالملف كثمن مجموعات variables بأوضاعها.
• أي ملاحظة مراجعة لازم تستشهد بمسار token أو حقل بالعقد أو سطر بالقواعد، وإلا ما بتنحسب.
• rtl.md بينشغّل على كل ترتيب، والـ tokens حاملة حجم الخط العربي.
• مجلد decisions/ فيه السجل، وHISTORY.md بيوصلك له بخطوة وحدة.

شو بينزل معك

• مجلد واحد، 79 ملف. ستين ملف زائد 19 دليل PDF.
• 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 على ديزاين سيستم موجود، ولا رح تبدأ واحد من الكيت. وشو النسخة الاحتياطية يلي بدك ياها قبل أول تعديل، نسخة مسمّاة بـ Figma ولا برانش بالريبو.

لمين

مصممين منتجات، مسؤولين ديزاين سيستم، ومؤسسين شغالين على Claude Code مع Figma أو Cursor أو أي محرر بيقرا skills. أسامي الـ foundations زي قوالب designsystems.surf، فإذا عندك هديك الملفات الـ tokens بتنطبق عليها وحدة بوحدة. الفرق تبع هاد الكيت هو قواعد RTL وطبقة الخط العربي، هدول مش موجودين بالقوالب. البراند التجريبي اسمه Bunn، أبلكيشن توصيل قهوة، ماشي بكل الأدلة عشان تشوف سيستم مخلّص قبل ما تبدّله.