← Home

Claude Code

Claude Code reads your project's CLAUDE.md as persistent context on every prompt. Add the design system there so every component Claude generates is on-brand, with no manual context pasting required.

Setup

Step 1: Open or create CLAUDE.md

Open your project's CLAUDE.md in the project root. If the file does not exist yet, create it:

bash
touch CLAUDE.md

Step 2: Paste the design system section

Copy the contents of CLAUDE.md-section.md from your export bundle and paste it into a ## Design System section:

markdown
## Design System

<!-- Paste CLAUDE.md-section.md contents here -->

Step 3: Reference or inject the full layout.md

For the full layout.md, you have two options:

  • Add it to your repo and reference it from CLAUDE.md:
markdown
## Design System

See layout.md for full design system reference.
  • Inject it per-session using the --context flag:
bash
claude --context layout.md
The Quick Reference (Section 0 of layout.md) is designed specifically for CLAUDE.md. It summarises the most critical tokens and rules in 50–75 lines, keeping it concise enough to not exhaust your context budget on every message. Add the full layout.md only when you need deep token or component reference.

How it works in practice

Once CLAUDE.md contains your design system context, Claude Code will automatically use your tokens, colour values, typography scale, and component patterns in every response, without any extra prompting. You can verify this by asking Claude to build a component and checking whether it uses your exact token names rather than arbitrary values.

Commit CLAUDE.md and layout.md to your repo. Treat them like any other configuration file. Update them when your design system changes.