Get a DESIGN.md
from any website
Extract design tokens from any website in seconds. Get ready-to-use DESIGN.md files formatted for Claude Code, Cursor, Copilot, and Windsurf.
Catalog
Featured Design Systems
Stripe
Stripe's design uses a deep navy-to-indigo palette anchored by #533afd (Stripe Indigo), sohne-var typography, and a signature spectral gradient hero.
Airbnb
Explore the official Airbnb design system. Featuring coral-red (#ff385c) accents, Cereal VF typeface, and rounded card UI with layered shadows on a white canvas.
Notion
Notion pairs a deep navy (#02093a) hero with a light (#f6f5f4) body, NotionInter typeface, and a 12-column grid with dual-radius language.
Linear
Linear's design is ultra-minimal with purple/blue gradients, Inter typeface, and a dark-first aesthetic built for speed and developer focus.
Vercel
Discover the Vercel design system powered by the Geist design system font family, iconic black-and-white minimalism, and high-contrast tokens.
Shopify
Shopify uses a dramatic full-bleed video hero with near-black (#02090a) background, vivid mint green (#36f4a4) accent, and pill-shaped CTAs.
Workflow
Drop DESIGN.md into your repo. Your agent does the rest.
01.Extract any site
Paste any URL or use our Chrome extension to generate a DESIGN.md packed with color palettes, typography, spacing, and design rules.
02.Save it in your repo
Save DESIGN.md in your project root, .cursor/rules/, or CLAUDE.md file so your coding tools pick it up automatically.
03.Point your agent at it
Instruct your AI coding assistant to use DESIGN.md as its design system source of truth for consistent UI generation.
Extract on the fly.
Right in your browser.
Browse to any website, click the extension icon, and download a DESIGN.md — no copy-paste, no tab switching, no extra tools required.
Works with Chrome, Brave, Arc, and any Chromium browser.
One-click extraction
Click the extension icon on any site to instantly pull its design tokens.
Works in seconds
No page reload, no configuration. Results appear in the popup immediately.
100% private
Everything runs inside your browser tab. Nothing is sent to external servers.
## Colors
- primary: "#635bff"
- background: "#f6f9fc"
## Typography
- fontSans: "Sohne, sans-serif" |
Works with every major AI coding tool
One format, any agent.
DESIGN.md is plain markdown — no SDK, no plugin. Any AI that can read a file can use it.
- C
Claude
Anthropic's assistant
- C
Cursor
AI-first code editor
- G
GitHub Copilot
In-editor AI pair
- W
Windsurf
Agentic IDE by Codeium
- D
Devin
Autonomous AI engineer
+ Codex, Gemini, Copilot Workspace, and any custom agent.
FAQ
Common questions
A DESIGN.md is a plain-text design system document that AI coding agents read to generate consistent UI. It has two layers: YAML front matter holds machine-readable design tokens (colors, typography, spacing), while the markdown body explains the design rationale. Think of it as a style guide that both humans and AI can read.
To get design system from website URLs, paste any link into our online extraction tool or install the design md extension chrome. In seconds, you get a full DESIGN.md, Tailwind v4 config, CSS variables, and DTCG design tokens. No signup required.
Yes! Our official design.md generator Chrome extension lets you extract design tokens and generate DESIGN.md files instantly from your browser toolbar while viewing any live website.
Our catalog features pre-analyzed files for top platforms including the Airbnb design system, Vercel design system (Geist design system), Stripe, Notion, Linear, GitHub, and Shopify.
Any AI coding tool that reads markdown files from your project directory can use DESIGN.md. That includes Claude Code, Cursor, GitHub Copilot, Devin, OpenAI Codex, and other coding assistants with file access.
Yes! The free tier includes full catalog browsing and 5 URL extractions per day. Pro users get unlimited extractions, all output formats, and priority processing for $9/month.
Start extracting design systems today.
Paste any URL and get a ready-to-use DESIGN.md in seconds. Free, no account required.