DESIGN.md generator for AI coding agents
Turn any website into a design system your AI agents follow
Designrail turns any website into a design system your AI coding agents follow: it reads the live page, writes DESIGN.md, SKILL.md, Cursor and Copilot rules and Tailwind tokens, then checks your build against them.
Chrome and Edge 137+. No account. Nothing leaves your browser.
01 How it works
- Scan. Open any site and click the Designrail icon. The side panel reads the page’s computed styles and infers a system: colours with roles, a type scale, a spacing grid, components and their states.
- Add to your project. Copy DESIGN.md, or pick your repo folder and Designrail writes DESIGN.md and the rule file for your agent where it looks for them.
- Check your build. Open localhost or staging and press Check. You get a score out of 100, every off-system colour, font, size, spacing and contrast failure, and a fix list to paste into your agent.
02 What you get
One scan, every file your stack reads. Add to project writes them in place; existing AGENTS.md content is kept and only the Designrail section is replaced.
DESIGN.mdTokens and rules in Google’s open format, for any agent.claude/skills/<name>/SKILL.mdA Claude Code skill.cursor/rules/<name>.mdcA Cursor project rule.github/instructions/<name>.instructions.mdGitHub Copilot instructionsAGENTS.mdA marked section for Codex and other agents, updated in placedesign-system/tailwind-theme.cssTailwind v4 @themedesign-system/shadcn-theme.cssshadcn/ui theme in OKLCH, light and darkdesign-system/tokens.css · tokens.jsonCSS variables and DTCG design tokens
03 What it extracts
- Colours with roles
- Background, text, primary, border, danger and more, grouped perceptually in OKLCH, with a raw palette underneath, light and dark values paired, and WCAG contrast ratios.
- Type scale
- Families, sizes, weights, line heights and letter spacing, with the scale’s ratio, plus mobile sizes from a narrow-viewport pass.
- Spacing, corners, shadows, motion
- The spacing grid and how well the page fits it, radii, shadow levels and transition timings.
- Components and states
- Buttons, inputs, cards and links, including hover, focus, active and disabled styles read from the site’s CSS.
- Breakpoints
- The media-query breakpoints the site actually uses, merged and ranked.
- Whole site
- Pro scans up to 10 pages in background tabs and merges them, so one landing page doesn’t define your system.
04 Check my build
AI agents drift. Check my build compares the page in your tab with the saved design system and tells you exactly where.
- Off-palette colours, matched to the nearest token with CIEDE2000
- WCAG contrast failures, with a passing token suggested
- Fonts, type sizes, spacing off the grid and stray corner radii
- Outline the offending elements on the page
- Copy a Markdown fix list your agent can act on
05 In your terminal and CI
pnpm dlx designrail scan example.com --install
MCP serverLet Claude Code, Cursor and other MCP clients look up tokens and check snippets while they write.designrail mcp
GitHub ActionAnnotate pull requests that bypass the design system, and open a PR when the live site’s design changes.uses: designrail/designrail/action@v0
06 Free and Pro
| Feature | Free | Pro |
|---|---|---|
| Scan the current page | ● | ● |
| DESIGN.md and SKILL.md | ● | ● |
| Add to project (writes the files into your repo) | ● | ● |
| Light and dark pairing | ● | ● |
| Saved sites | ● | ● |
| Whole-site scan with mobile pass | – | ● |
| Check my build: score and agent fix list | – | ● |
| Cursor, Copilot, AGENTS.md, Tailwind, shadcn/ui, CSS, DTCG exports | – | ● |
| Version history and token diffs | – | ● |
| Saved sites | 3 | Unlimited |
Pro is unlocked with a licence key that’s verified on your device. The CLI, MCP server and GitHub Action don’t need one.
07 Install
Browser. The Chrome Web Store and Edge Add-ons listings are on the way. Until then, use the CLI below.
Terminal. Needs Node.js and Chrome:
pnpm dlx designrail scan example.com --install08 Private by design
Everything runs on your machine. The extension asks for no host permissions at install; it reads the tab you open it on, and asks for site access only for features that need it. No account, no server, no analytics. Read the privacy policy.
09 Questions
What does Designrail do?
It reads the rendered styles of a website and turns them into a design system file your AI coding agent reads: DESIGN.md, plus SKILL.md, Cursor rules, Copilot instructions, an AGENTS.md section and Tailwind, shadcn/ui, CSS and DTCG token files. It can then score your own build against that system and list the fixes.
Which AI coding agents does it work with?
Claude Code, Cursor, OpenAI Codex and GitHub Copilot get their own rule files, and any agent that reads DESIGN.md or AGENTS.md can use the output. Agents that support MCP can also query the tokens and check snippets through the Designrail MCP server.
Does it work on localhost and staging sites?
Yes. Check my build scans whatever page is open in the tab, including localhost and staging, once you allow site access. The CLI does the same from the terminal or CI.
Does any page data leave my browser?
No. Scans run inside your browser, saved sites stay in local extension storage, and licence keys are checked offline. Designrail has no server.
Which browsers are supported?
Chrome and Microsoft Edge, version 137 or newer. Firefox and Safari are not supported yet; the CLI runs anywhere Node.js and Chrome are installed.
Why does it need Chrome 137 or newer?
Pro licence keys are verified offline with Ed25519 signatures in the browser’s built-in WebCrypto, which Chrome and Edge support from version 137.
Do I need an account?
No. The free plan needs nothing, and Pro is unlocked by pasting a licence key, which is checked on your device.
What is free and what is Pro?
Free covers single-page scans, DESIGN.md and SKILL.md, adding those to a project and 3 saved sites. Pro adds whole-site scans with a mobile pass, Check my build, every export format, version history with token diffs and unlimited saved sites.
Is it OK to extract the design of someone else’s website?
Designrail reads the same computed styles your browser’s developer tools show. Colour and spacing values are rarely protected, but logos, names and distinctive brand identity can be, so use other sites as reference and ship your own brand.