Designrail Install

Designrail is launching soon on the Chrome Web Store and Edge Add-ons. This site describes the extension as it will ship.

Updated

Make Claude follow your design system

Claude follows a design system when the system is in front of it as concrete values and rules: a DESIGN.md with your colour tokens, type scale, spacing grid and component specs, plus a short instruction to use only those values. In claude.ai, put the file in a Project's knowledge and the rule in the Project instructions; in Claude Code, use a project skill and a pointer in CLAUDE.md. Then check what Claude builds, because instructions guide it but don't enforce anything.

Why Claude drifts from your design

Without your system in context, Claude falls back on what it has seen most: framework defaults such as Tailwind's blue-500, round spacing values like 20px, and generic fonts. It also fills gaps. If your system has no token for a warning colour or a card radius, Claude invents one. Three things reduce this:

  1. Values, not adjectives. "Clean and modern" leaves every decision open. primary: #4f46e5, spacing.md: 16px and rounded.lg: 12px close them.
  2. Hard rules. Say that only these values may be used, and what to do when one is missing (ask instead of inventing).
  3. Something that checks. Even with good instructions, some values slip through, especially in long sessions.

Get your design system into one file

DESIGN.md is an open format for exactly this: design tokens in YAML front matter (colours, typography, spacing, radii, components), followed by short sections explaining how to apply them. If you already have tokens in Figma or code, write the file from those. If the design exists as a live website, Designrail reads the rendered page in Chrome or Edge and writes the file for you, including hover, focus and disabled states and light and dark values.

Keep the file at the root of your repository so every tool can find it.

In claude.ai: use a Project

A Project gives every conversation in it the same files and instructions.

  1. Create a Project for the product you are designing or building.
  2. Add DESIGN.md to the Project's knowledge.
  3. Add a short rule to the Project's instructions, for example:
UI work in this project follows the design system in DESIGN.md.
Use only its colour, type, spacing and radius tokens. Never introduce new hex values,
font families or spacing values. If something is missing, ask before adding it.
When you produce UI (including artifacts), list the tokens you used at the end.

Asking for the list of tokens at the end is a cheap self-check: it makes invented values visible in the answer itself.

In Claude Code: a skill and a pointer

Claude Code loads CLAUDE.md in every session and loads a project skill when a task matches its description. Put the design rules in a skill at .claude/skills/<name>/SKILL.md, keep the full reference in DESIGN.md, and add one line to CLAUDE.md pointing at both. The Claude Code guide walks through the file layout, a skill example and troubleshooting. Designrail's Add to project… writes DESIGN.md and the skill into your repository in one step.

Check what Claude builds

Instructions are guidance, so verify the result on the page itself. Open the page Claude built (localhost or a preview deploy) in Chrome and run Designrail's live check against your design system:

  • Every element using an off-system colour, font, type size, spacing value or radius is underlined on the page, like a spellchecker.
  • Hovering an underline shows the token to use instead.
  • In React, Vue and Svelte development builds, each issue names the source file and line.
  • Copy fixes for your agent produces a Markdown fix list you can paste straight back into Claude or Claude Code.

The check reruns whenever the page changes, so you can watch the underlines disappear as Claude applies the fixes.

Reuse a pattern without copying another brand

When you like a component on another site, such as a pricing table or a navigation bar, ask Claude to rebuild the pattern rather than the look. Designrail's Borrow a component does the translation first: pick the component on the page and it writes a build spec with the structure and spacing rhythm, with every colour, type size, gap and radius already mapped to your tokens. Paste that into Claude.

FAQ

Does Claude read DESIGN.md automatically?

No. In claude.ai, add it to a Project's knowledge; in Claude Code, point to it from CLAUDE.md or a skill. Once it is in context, Claude can follow it like any other instruction.

Should I paste the whole design system into every chat?

No. A Project keeps the file and the rule attached to every conversation, and in Claude Code a skill loads only when the task is UI work, which keeps unrelated conversations free of token lists.

Why does Claude still use colours outside my palette?

Usually because the value it needed wasn't in the system, or the instruction was too soft. Add the missing token, make the rule explicit ("never introduce new hex values"), and check the page so stray values are caught and fixed.

Does this work with Claude's artifacts?

Yes. Artifacts are code Claude writes in the conversation, so the same Project instructions apply. Ask for the token list at the end to spot anything it invented.