← 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.

Fastest path: the CLI

One command registers the Layout MCP server with Claude Code (20 tools, including compliance checking) and writes the design system managed block into CLAUDE.md, creating the file if it does not exist:

bash
npx @layoutdesign/context install --target claude

To regenerate just the CLAUDE.md block at any time:

bash
npx @layoutdesign/context export --format claude-md
Layout also ships a Claude Code plugin manifest in the CLI repository (.claude-plugin/plugin.json) that bundles the MCP server and the layout-md skill, for installation through the Claude Code plugin system.

Manual 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.