Built for AI coding agents

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 all

Works 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.

01

Extract any site

Paste a URL. Get a DESIGN.md with colors, typography, spacing, shapes, components, and brand rationale.

02

Save it anywhere

Drop DESIGN.md wherever you like, repo root, docs folder, a Notion page. The path doesn't matter.

03

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

New

Extract 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

Available in the Chrome Web Store
Design Extractor24 credits

Magentix Studio

magentix.studio

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

  1. Add the server once. No key needed.

    claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp
  2. Run /mcp, pick design-extractor and choose Authenticate. Sign in and approve on the page that opens.

  3. 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.