Design System From Scratch skill for Claude and Codex

Design System From Scratch as an AI skill. It asks for Product and brand personality, Platforms covered, Starting colours and 3 more, then does the rest. Free…

Install it once and Claude or Codex runs it for you. When your request matches, your AI loads the skill, asks for anything it is missing, and works through the template itself. Prefer to fill it in by hand? See the full prompt template.

Download the skill (.zip) · View SKILL.md

When it is used

Use when a team starting a product or a new platform needs one document that defines design tokens, components, states, and usage rules. Do not use for restyling a single screen or generating only a colour palette. Related topics: design, coding.

What it will ask you for

• Product and brand personality (longer free text)
• Platforms covered (choose any: Web, iOS, Android, Flutter, Email)
• Starting colours (free text, e.g. "Brand hex values or none")
• Team using it (free text, e.g. "Designers and developers and how many")
• Component set (choose any: Buttons, Forms, Navigation, Cards, Modals, Tables, Alerts, Tabs)
• Output format (choose one: Markdown, Design tokens JSON plus Markdown)

How it works

1. Define foundation tokens for colour roles, type, spacing, radius, elevation, and motion.
2. Specify each chosen component with anatomy, variants, sizes, and all seven states.
3. Write usage rules for each component, including the most common misuse.
4. Set accessibility requirements and a lightweight process for proposing and versioning components.
5. List ten decisions the team must confirm before adoption.

What you get

One document with Foundations, Components, Usage Rules, Accessibility, and Governance sections, ending with a ten-item decision list, in the chosen format.

What it watches out for

• Documenting components without states, so developers invent the missing ones differently.
• Naming tokens by value, which breaks when the brand changes.
• Omitting the misuse examples, where most inconsistency is born.

How to install

Claude.ai and the Claude desktop app

1. Download the skill .zip.
2. Open Settings, then Capabilities, and find Skills.
3. Choose Upload skill and select the .zip.
4. Ask Claude for help with the task. It loads the skill when your request matches.

Claude Code

1. Download the skill .zip.
2. Unzip it into ~/.claude/skills/ (or .claude/skills/ inside a project).
3. Start a new session. Claude Code loads the skill when your request matches.

Codex

1. Download the skill .zip.
2. Unzip it into ~/.agents/skills/ (or .agents/skills/ inside a project).
3. Codex picks it up on its own. Type $ and the skill name to use it, or just ask for the task.

Cursor

1. Download the Cursor rule (.mdc).
2. Save it in .cursor/rules/ inside your project.
3. Cursor's agent applies the rule when your request matches its description.

AGENTS.md (Codex, Cursor, and other coding agents)

1. Copy the AGENTS.md section.
2. Paste it into AGENTS.md at the root of your repository, creating the file if needed.
3. Coding agents that read AGENTS.md follow it when your request fits.