Designrail – DESIGN.md Generator & Design Token Extractor

Turn any website into DESIGN.md, SKILL.md and Cursor rules your AI agents follow, then check your build against them.

Designrail is a DESIGN.md generator and design token extractor for AI coding agents. It turns any website into a design system your agents follow: it reads the live page, writes a DESIGN.md file and an agent skill, then checks your build against them. Works with any AI coding agent that reads project files, such as Claude Code or Cursor. Docs and guides: https://designrail.appzlr.com It infers a system rather than dumping raw values: • Colours grouped by perception and named by role (background, text, primary, border, danger…), with a raw palette layer underneath and WCAG contrast ratios • Type scale with its ratio, spacing grid, corner radii, shadows and motion • Component specs (buttons, inputs, cards, links) including hover, focus and disabled states • Light and dark values, breakpoints and mobile type sizes LIVE DESIGN CHECK, LIKE A SPELLCHECKER FOR YOUR UI Open your build on localhost or staging and Designrail underlines every element that breaks your design system: off-palette colours, contrast failures, stray fonts, type sizes, spacing and radii. Hover an underline to see the token to use instead. It rechecks every time the page changes, and in React, Vue and Svelte development builds it names the exact source file and line. Copy the fixes straight into your agent. BORROW A COMPONENT Like a pricing table or a navbar on another site? Pick it on the page and Designrail captures its structure and spacing rhythm, rewrites every value in your own design tokens, and gives your agent a build spec with a reference screenshot. Take the pattern, keep your brand. FREE (with a free account) • Scan the current page • DESIGN.md and an agent skill (SKILL.md): preview, copy, download • Install both into your project folder in one click • Fix contrast: make a palette pass WCAG AA with the smallest change, in light and dark mode • Up to 3 saved sites PRO (monthly or yearly subscription, see designrail.appzlr.com/pricing) • Live design check with underlines on the page, hover fixes, and source file and line • Borrow a component, rewritten in your design tokens • Whole-site scan: crawls up to 10 pages and merges them, plus a mobile pass • Every export format, so the same design system goes into your stylesheets, your component theme and your coding agent's rules • Unlimited library with version history and token diffs PRIVATE BY DESIGN Scans run in your browser and page content is never sent anywhere. No analytics. You sign in with a free Designrail account (Google or email), which is only used to know your plan. Site access is optional and only requested when you use a feature that needs it. Extract designs you have the right to use: your own products, your clients', or public references for inspiration.