Get a DESIGN.md
from any website
Paste a URL to extract a design system. Get a DESIGN.md for your AI agent. Learn more
Featured
Browse allWorks with your agent
Drop DESIGN.md into your repo. Your agent does the rest.
DESIGN.md pairs YAML design tokens with a markdown rationale, so any AI coding agent can read it. No plugin, no SDK, no integration step.
Extract any site
Paste a URL. Get a DESIGN.md with colors, typography, spacing, shapes, components, and brand rationale.
Save it anywhere
Drop DESIGN.md wherever you like, repo root, docs folder, a Notion page. The path doesn't matter.
Point your agent at it
Tell your AI coding agent to use DESIGN.md as the style guide. That's it.
Works with
- Claude
- Cursor
- GitHub Copilot
- Devin
- Codex
- Any AI agent
Chrome extension
NewExtract from the tab you are on
Open any public site, click Extract in the popup, and the DESIGN.md lands in My extractions. Same account, same credits, nothing to copy. Learn how it works
Magentix Studio
magentix.studio
Lite
This page
6 credits
Pro
Key pages
10 credits
Runs you start show up here.
MCP server
Connected in a minute, from any agent
Claude Code, Codex, Cursor, n8n or any other MCP client can extract a site and read the DESIGN.md. Sign in or use an API key, the same credits. Learn how to connect
Add the server once. No key needed.
claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcpRun
/mcp, pick design-extractor and choose Authenticate. Sign in and approve on the page that opens.Ask for a site: “extract the design of stripe.com”.
Claude Code, Codex, claude.ai, Claude Desktop and ChatGPT sign in with your account. Cursor, n8n and scripts use a personal API key from the account page.
FAQ
Common questions about Design Extractor
Short answers to the main questions developers ask before extracting a website's design into a DESIGN.md.
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.
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.






