Design System as a Claude Code SkillStarter kit · Tokens · Figma variables
Stop describing your design system in prompts.
Write it as a folder Claude reads before it draws. Claude Code produces good code and quietly ignores your spacing scale, your type ramp and your RTL rules. Longer prompts fix that for one session and decay over the next five.
One payment. 79 files. Instant download.
637tokens, W3C DTCG
6component contracts
19guides
79files in the download
What is in the folder
Six things, and one of them does the real work.
Tokens tell the model what blue is. The contract tells it what a button is allowed to be. That second one is what stops the drift.
01637 design tokensW3C DTCG shape across eight foundations, portable rather than tied to one tool.
02Six component contractsYAML, one definition per component, so the model has something to compare against.
03A validatorFails any screen that uses a value outside the tokens. Prompts drift. A test does not.
04RTL rules and an Arabic type layerHeld inside the system, not bolted on as a separate stylesheet.
05A Figma sync scriptPushes the tokens in as variable collections, so the file and the code stop disagreeing.
0619 PDF guidesOne per foundation, written to be read by a person, not generated filler.
How it looks
Eight foundations, each one written down.
The foundations, as the kit ships them.
Why a contract beats a prompt
An agent drifts from instructions. It does not drift from a failing test.
Writing the contracts is the part that forces the decisions a team has been avoiding. You cannot write down the five things a button may be without admitting the other eleven were mistakes.
Who it is for
Product designers, design system leads, and founders working in Claude Code.
Built for Figma and Cursor workflows. Useful whether or not you write Arabic, and unusual if you do: the RTL rules and the Arabic type layer are part of the system rather than a later patch.
One payment. 79 files. Instant download.
العدّة بالعربي
بطّل توصف الديزاين سيستم بالبرومبت.
اكتبه كمجلد يقرأه كلود قبل ما يرسم. Claude Code بيكتب كود منيح وبيتجاهل مقياس المسافات وسلّم الخطوط وقواعد الـ RTL. البرومبت الأطول بيزبط جلسة وحدة وبيبدأ يضيع بعدها.
637 توكن بصيغة W3C DTCG عبر ثمانية أسس
ستة عقود لمكوّنات بصيغة YAML، كل مكوّن بتعريف واحد
فاليديتور بيفشّل أي شاشة تستخدم قيمة خارج التوكنز
قواعد RTL وطبقة خط عربية، جوّا النظام مش مضافة بعدين