Claude does not know your design system, so it guesses. You correct the guess on every screen. It picks a colour nobody approved. It hand draws a button that already exists. It writes an Arabic screen by mirroring the English one at the end. The system is in your head and in a Figma file, and neither of those is something Claude can read. This kit is that system written as a folder Claude loads before it draws, audits or fixes anything. Drop it in, replace the example brand with yours, and the guessing stops. WHERE YOU ARE NOW Loose values. A hex and a pixel number typed on each screen. Nothing names them, so nothing can check them. Styles in the Figma file. Named in one place only. The code retypes the same values by hand. Primitive tokens. A scale exists and the steps have names. No rule says which step belongs where. Semantic roles. Tokens named by the job they do, with modes for light and dark, density, and breakpoint. Contracts and rules. Every component has a written spec, and a validator fails the values that break it. A system an agent reads. The folder is the source. Claude loads it first, cites it, and proposes instead of inventing. This kit hands you levels four, five and six already built, across eight foundations: colour, typography, spacing, radius, border, elevation, layout, motion. Each one runs three layers, scale then primitives then semantic roles. You replace the primitives with your brand and the whole system follows. BEFORE You tell Claude which colour, every time. The same button is redrawn on three screens. The Figma file and the code drift, and nobody knows which one is right. "Is this on brand" gets answered from memory. Arabic is the English layout, flipped at the end. A decision made in March gets argued again in September. AFTER Claude resolves the colour to a semantic token path, or it reports that no token exists. Every element maps to a contract in components/. No contract means a proposal, not a free hand. figma-variables.js pushes the same tokens.json into the file as eight variable collections with their modes. An audit finding cites a token path, a contract field or a rule line, or it does not count. rtl.md runs on every placement, and the tokens carry the Arabic type size. decisions/ holds the record and HISTORY.md routes to it in one hop. WHAT LANDS IN THE DOWNLOAD One folder, 79 files. Sixty of them plus 19 PDF guides. SKILL.md · MD · The router. One load path per task, the intake rule, and four rules that never bend. tokens.json · JSON · 637 tokens in W3C DTCG shape. Scale, primitives and semantic roles, with modes for light and dark, compact, default and comfortable density, and four breakpoints. foundations/ · 33 MD · Eight foundations. Each one has its rules file plus ACCESSIBILITY.md (the WCAG criteria and the one test), DEV_HANDOFF.md (the CSS variables and the mode switch) and KNOWLEDGE_BASE.md (one file to paste into any chat or NotebookLM). components/ · 6 YAML · Button, TextField, CodeField, Badge, Banner, EmptyState, plus the schema they are checked against. Tokens, geometry, props, states, copy rules, accessibility, do and do not. references/ · 8 MD · The design, audit, fix and component methods. Plus rtl.md, content-system.md, figma-sync.md and design-system.md. GOVERNANCE.md, HISTORY.md, decisions/ · MD · The lifecycle ladder, the three part promotion gate, the two tier SemVer policy, and one record per decision with a template. scripts/ · 3 PY + 1 JS · build_tokens.py generates tokens.json from the scales. validate.py rejects a hex, a scale step or a primitive on a component. tokens_to_css.py emits the CSS variables. figma-variables.js builds the eight Figma collections through the Claude Figma connector and updates them by name on a re run. docs/ · 19 PDF · 312 pages. The Kit guide (18 pages), the Foundations guide (19) and the Prompts library (27 pages, 17 prompts across six stages), then a usage guide (20 pages) and a prompt library (11 pages) for each of the eight foundations. HOW IT STARTS The first message asks two things and writes nothing until both are answered. Are you connecting Claude to a design system that already exists, or starting one from this kit. And what backup do you want in place before the first change, a named version in Figma or a branch in the repo. WHO IT IS FOR Product designers, design system leads and founders working in Claude Code with Figma, Cursor, or any editor that reads skills. The foundation names follow the designsystems.surf templates, so if you own those Figma files the tokens map one to one. Arabic first teams get the RTL rules and the Arabic type layer, which the templates do not carry. The example brand is Bunn, a coffee delivery app, used across every guide so you can see a finished system before you replace it. Licence. One person, unlimited projects and clients. The design system you build with it is yours. Updates ship to the same download. كلود ما بيعرف الديزاين سيستم تبعك، فبيخمّن. وانت بتصلّح تخمينه بكل شاشة. بيختار لون ما حدا وافق عليه. بيرسم بإيده زر موجود أصلاً. بيعمل الشاشة العربي بأنه يعكس الإنجليزي بالآخر. الديزاين سيستم كله براسك وبملف فيجما، وولا وحدة من هدول كلود بيقدر يقراها. هاد الكيت هو نفس الديزاين سيستم بس مكتوب كمجلد كلود بيقراه قبل ما يرسم أو يراجع أو يصلّح أي إشي. بتحطه بالمشروع، بتبدّل البراند التجريبي ببراندك، وبيبطّل يخمّن. وين انت هلق 1. قيم سايبة. هيكس ورقم بكسل مكتوبين بكل شاشة. ما إلهن اسم، فما في إشي بيقدر يتأكد منهن. 2. ستايلز بملف فيجما. مسمّيين بمكان واحد بس، والكود بيعيد كتابة نفس القيم بالإيد. 3. tokens بدائية. في scale وللخطوات أسامي، بس ما في قاعدة بتقول أي خطوة وين بتروح. 4. أدوار دلالية. الـ tokens مسمّية بالشغلة يلي بتعملها، وإلها modes للفاتح والغامق وللكثافة وللبريك بوينت. 5. عقود وقواعد. كل كومبوننت إله مواصفة مكتوبة، وفي validator بيرفض أي قيمة بتكسرها. 6. سيستم بيقراه ايجنت. المجلد هو المصدر. كلود بيفتحه أول إشي، وبيستشهد فيه، وبيقترح بدل ما يخترع. الكيت بيعطيك المستويات أربعة وخمسة وستة جاهزين، على ثمن foundations: اللون، الخط، المسافات، الراديوس، الحدود، الارتفاع، الـ layout، والحركة. كل وحدة فيهن على ثلاث طبقات، scale بعدين primitives بعدين أدوار دلالية. بتبدّل الـ primitives ببراندك والسيستم كله بيمشي وراك. قبل بتقول لكلود أي لون، بكل مرة. نفس الزر مرسوم من جديد بثلاث شاشات. ملف فيجما والكود بيبعدوا عن بعض، وما حدا بيعرف مين الصح. سؤال "هاد على البراند؟" بينجاوب من الذاكرة. العربي هو الإنجليزي مقلوب بالآخر. قرار انأخذ بآذار بينعاد نقاشه بأيلول. بعد كلود بيوصل اللون لمسار 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 بفيجما عن طريق الـ connector. docs/ · 19 PDF · 312 صفحة. دليل الكيت (18 صفحة)، دليل الـ foundations (19)، ومكتبة البرومبتات (27 صفحة، 17 برومبت على ست مراحل)، وبعدين دليل استخدام (20 صفحة) ومكتبة برومبتات (11 صفحة) لكل foundation من الثمنية. كيف بتبدأ أول رسالة بتسأل شغلتين وما بتكتب إشي قبل ما تنجاوب الثنتين. هل رح توصّل كلود على ديزاين سيستم موجود، ولا رح تبدأ واحد من الكيت. وشو النسخة الاحتياطية يلي بدك ياها قبل أول تعديل، نسخة مسمّاة بفيجما ولا برانش بالريبو. لمين مصممين منتجات، مسؤولين ديزاين سيستم، ومؤسسين شغالين على Claude Code مع فيجما أو Cursor أو أي محرر بيقرا skills. أسامي الـ foundations زي قوالب designsystems.surf، فإذا عندك هديك الملفات الـ tokens بتنطبق عليها وحدة بوحدة. الفرق تبع هاد الكيت هو قواعد RTL وطبقة الخط العربي، هدول مش موجودين بالقوالب. البراند التجريبي اسمه Bunn، أبلكيشن توصيل قهوة، ماشي بكل الأدلة عشان تشوف سيستم مخلّص قبل ما تبدّله.