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.

  1. 01637 design tokensW3C DTCG shape across eight foundations, portable rather than tied to one tool.
  2. 02Six component contractsYAML, one definition per component, so the model has something to compare against.
  3. 03A validatorFails any screen that uses a value outside the tokens. Prompts drift. A test does not.
  4. 04RTL rules and an Arabic type layerHeld inside the system, not bolted on as a separate stylesheet.
  5. 05A Figma sync scriptPushes the tokens in as variable collections, so the file and the code stop disagreeing.
  6. 0619 PDF guidesOne per foundation, written to be read by a person, not generated filler.

How it looks

Eight foundations, each one written down.

Design system starter kit

The foundations, as the kit ships them.

Tokens and foundations
Component contracts

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.

Figma variables pushed from tokens

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.

Guides

One payment. 79 files. Instant download.

العدّة بالعربي

بطّل توصف الديزاين سيستم بالبرومبت.

اكتبه كمجلد يقرأه كلود قبل ما يرسم. Claude Code بيكتب كود منيح وبيتجاهل مقياس المسافات وسلّم الخطوط وقواعد الـ RTL. البرومبت الأطول بيزبط جلسة وحدة وبيبدأ يضيع بعدها.

  • 637 توكن بصيغة W3C DTCG عبر ثمانية أسس
  • ستة عقود لمكوّنات بصيغة YAML، كل مكوّن بتعريف واحد
  • فاليديتور بيفشّل أي شاشة تستخدم قيمة خارج التوكنز
  • قواعد RTL وطبقة خط عربية، جوّا النظام مش مضافة بعدين
  • سكربت لفيجما بيدفع التوكنز كمجموعات متغيرات
  • 19 دليلاً بصيغة PDF