Design Extractor

A DESIGN.md is a plain-text design system document that AI coding agents read to generate consistent UI. It is the design counterpart to AGENTS.md: humans and agents can both read it, edit it, and enforce it. Under the hood it has two layers. YAML front matter holds machine-readable design tokens like colors, typography, and spacing. The markdown body explains the design rationale.

A DESIGN.md usually includes eight canonical sections in order: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, and Do's and Don'ts. The YAML front matter encodes the exact token values. The markdown body explains how and why to apply them. Sections can be omitted if they are not relevant, and extra domain-specific sections can be added.

Paste any public website URL into Design Extractor and click extract. Sign up, buy a credit pack, and each extraction spends a few credits. The result is a DESIGN.md you can copy. Drop the DESIGN.md into your repo and your AI agent reads it as a style reference for Claude, Cursor, Copilot, or Stitch.

Any AI coding tool that reads markdown files from your project directory can use DESIGN.md. That includes Claude Code, Cursor, GitHub Copilot, and other coding assistants with file access. Drop the DESIGN.md into your project root or a docs folder and reference it in your prompt.

Any publicly accessible website. Design Extractor analyzes the live page as rendered in a browser. It works with static sites, SPAs, and server-rendered pages. The site must be reachable via a standard HTTP/HTTPS URL.

Some sites, such as government portals and local shops, only open for visitors from certain countries. If an extraction fails because the site refused the visit, the result page says so and suggests the countries where the site does load. Pick one and the page is loaded by a browser in that country, then extracted as usual. A run from another country costs the tier price plus a small surcharge, shown before you start, and a run that still fails is refunded. The same option is available in the Chrome extension and through the MCP server.

Yes. The Design Extractor extension for Chrome reuses the session you signed in with on the site: no separate login. Its popup shows your credit balance, and one click sends the page in your current tab to the same extraction as the form on the home page, in Lite or Pro, for the same credits. The finished DESIGN.md opens on the site and appears in My extractions. In this first version the page has to be public: the server captures it, so pages behind a login, on localhost or on a private network are not supported yet. Editing and download still happen on the site.

Yes. Design Extractor is also an MCP server. In claude.ai, Claude Desktop or ChatGPT add the server URL as a connector and sign in with your account; in Claude Code, Codex, Cursor or the Agent SDK connect with one command (the docs page has the block for each, with an API key from your account page where the client needs one), and ask it to extract a site. The agent starts the run, checks back after about a minute, and gets the DESIGN.md text to save into your repo, for the same credits as on the site. Claude Code and Codex can also install it as a plugin, which adds a skill that applies a DESIGN.md to a codebase.