DESIGN.md generators compared
A DESIGN.md generator reads a website's styles and writes them into a DESIGN.md file that AI coding agents such as Claude Code, Cursor and Codex can follow. Most are free browser extensions that scan one page; they differ in how much they infer, which files they write, and whether they help after the first export. This page describes each tool from its own listing, checked on 3 November 2026.
The short answer
If you only need a quick DESIGN.md from one page, most of the free extensions below will do. If you want the system inferred from a whole site, files for several agents, and a way to keep your build on it afterwards, that is what Designrail is built for. If you are on a Mac and use Safari, Siteprint is the main option.
The tools
Designrail
Chrome and Edge extension, plus a designrail CLI, an MCP server and a GitHub Action. It infers colour roles, a type scale with its ratio, a spacing grid, radii, shadows, motion, breakpoints and component states (hover, focus, active, disabled), pairs light and dark values, and can merge up to 10 pages with a mobile pass. It writes DESIGN.md, SKILL.md, a Cursor rule, Copilot instructions, an AGENTS.md section and Tailwind v4, shadcn/ui, CSS and DTCG token files, and scores your own build against the result. Free for single pages, DESIGN.md and SKILL.md; Pro adds whole-site scans, the build check and the other formats. Runs locally.
DESIGN.md Inspector
A Chrome extension whose listing offers one-click copy, download, or quick install of the generated file into a project folder.
DESIGN.md Generator
A Chrome extension: click the toolbar icon and copy the output. Its listing describes colours and typography deduplicated from computed styles, a SKILL.md with YAML front matter for .claude/skills/, and local-only processing.
StyleKit
A Chrome extension that, per its listing, captures colours, typography, spacing, border radius and shadows from computed styles in one click and saves them as DESIGN.md, naming Claude Code, Cursor, GitHub Copilot and Windsurf as targets.
DESIGN.md extractor by getdesignsystem.io
A Chrome extension: click the icon, choose to extract the site's design, then copy or download a DESIGN.md, SKILL.md or JSON tokens. The listing says it runs entirely in the browser.
design-md-chrome (Bergside)
An open-source extension that reads live styles from the active tab and outputs a DESIGN.md or SKILL.md based on the TypeUI format. The GitHub version is loaded unpacked in developer mode.
Siteprint
A Safari extension for macOS 14 and later, linked from siteprint.app. Directory listings describe measuring colours with roles, typography, spacing, corners, shadows and section layout, exporting tokens, DESIGN.md and Tailwind v4 and shadcn themes, and a local MCP server for coding agents. It has a free tier and a one-time Pro purchase.
StyleSift
A Chrome extension that, per its listing, extracts colours, fonts, spacing and CSS variables from the active page and exports CSS variables or JSON. The free tier keeps 3 style guides; a one-time unlock removes the limit.
designpull
An open-source Chrome extension that extracts a site's design system and generates DESIGN.md with AI vision. It is MIT-licensed and loaded unpacked.
How to choose
Ask five questions of any tool, including this one:
- Does it infer or just collect? A list of every colour on a page is not a design system. Look for roles (background, text, primary, border), a type scale and a spacing grid.
- One page or the site? Landing pages over-represent hero styles. Merging several pages, light and dark mode, and a mobile viewport gives a truer system.
- Which files does your agent read? DESIGN.md works everywhere, but Claude Code also reads skills, Cursor reads
.cursor/rules, Copilot reads.github/instructions, and Codex reads AGENTS.md. See the Claude Code guide and the Cursor guide. - What happens after the export? Agents drift. A build check, a code linter or an MCP server keeps generated code on the system.
- Where does the data go? Prefer tools that process locally and ask for site access only when needed.
What Designrail adds
Designrail exists because extraction is the easy half. Its distinctive parts are the ones that keep agents on the system over time:
- Check my build scores localhost or staging against the system and writes a fix list for your agent.
- The CLI and GitHub Action lint pull requests for raw colours, palette classes, off-grid spacing and unknown fonts, and open a PR when the live site's design changes.
- The MCP server lets agents look up tokens and check a snippet before they write it.
- One scan, every format: the DESIGN.md is validated with Google's
@google/design.mdlinter, and the same tokens are written as agent rules and as Tailwind, shadcn/ui, CSS and DTCG files.
FAQ
What is the best DESIGN.md generator?
It depends on what happens after the export. For a one-off file from a single page, several free extensions work; for a whole-site system with agent rules and ongoing checks, use a tool with a build check, linter or MCP server such as Designrail.
Are DESIGN.md files from different tools compatible?
They are if they follow Google's open DESIGN.md format, because agents read the file as text and the format defines the token and section structure. You can check a file with Google's @google/design.md linter.
Is there a free DESIGN.md generator?
Yes. Most of the extensions on this page have a free tier or are free, and Designrail's free plan covers single-page scans with DESIGN.md and SKILL.md.
Do I need a browser extension to make a DESIGN.md?
No. You can write one by hand from your design tokens, or generate one from the terminal with pnpm dlx designrail scan <url>. Extensions are simply the quickest way to capture a site you can see.