How to Give Claude Code a Design System

Claude Code writes good components, but with no design to follow it falls back on safe defaults: a blue primary button, a grey card with a soft shadow, 16px body text and a rounded-lg on everything. Every app it builds ends up looking like every other app.

The fix isn't a longer prompt. A prompt is forgotten after a few turns and can't hold a full palette, a type scale and a spacing system. Claude needs the design written down somewhere it reads every time it touches the interface: a skill.

A design system for an agent is more than a list of hex codes. Values without reasons get applied in the wrong places. A useful skill has:

• Tokens: the palette by role (background, surface, text, muted text, border, accent), the type scale with sizes, weights and line heights, the spacing scale, radii, borders and shadows.
• Rules: the principles that make the design what it is (one accent per screen, borders instead of shadows, type that tightens as it grows) and a Never list.
• Components: how buttons, inputs, cards and navigation are built, including hover and focus states.
• Layout and motion: the container width, section rhythm, breakpoints, transition durations and easing.
• A process: what to do before editing anything, so Claude doesn't rewrite your app in one go.

Claude Code loads skills from .claude/skills in your project (or ~/.claude/skills for every project). Each skill is a folder with a SKILL.md at its root. The front matter tells Claude when to use it:

---
name: my-design
description: Apply our design system to this project. Use when asked to restyle or build UI.
---

# Our design system

Never edit a file before step 5. Ask, don't assume.
...

Keep the data files (tokens.json, rules.md, components.md) next to SKILL.md and tell Claude to read each one only when its step needs it. That keeps its context small.

The most important part of the skill is the order of work. A good flow:

1. 1Audit the project: where tokens, theme files and hard-coded colours live, and how styling works (Tailwind, CSS modules, CSS-in-JS).
2. 2Read the project's own rules (CLAUDE.md, AGENTS.md, lint rules) and note what must not change.
3. 3Report the gap for each area (tokens, components, layout, motion) as small, medium or large.
4. 4Ask which areas to apply, and resolve any conflict with your project rules.
5. 5Apply one area per commit, so any change can be reverted on its own.
6. 6Check text contrast in both themes before finishing.

Writing all of this by hand takes days. Livery measures it from a live website instead: paste a link (or put livery.site/ in front of any address) and it renders the site at three screen sizes, measures its colours, type, spacing, components and motion, and writes the kit, SKILL.md and all, with the flow above built in.

Every kit page has a one-paste install prompt for Claude Code that downloads the kit, verifies its sha256 hash and installs it under .claude/skills. A kit describes the style; to work with the site's own files, the Livery extension copies the pages into Figma.