Design Extractor logo
Chrome Web Store Featured

One-Click Extract
DESIGN.md

Generate AI-readable complete design spec documents in 30 seconds — no manual CSS inspection, no DevTools needed

Install Chrome Extension FreeView Extraction Examples

Page Screenshot

DESIGN.md Output

Why DESIGN.md Extraction

Three Pain Points of Manual Design System Reverse Engineering

Pain 01

Cloning a Website Takes Too Long

Manually open DevTools, inspect elements one by one, record colors, fonts, spacing, motion, then compile into a document. The whole process takes 1-3 hours and details are easily missed.

1-3 hours30 seconds
Pain 02

Cannot Describe Style to AI Clearly

When working with Cursor or Claude, "make it look like Linear" cannot convey precise intent, causing AI to generate inconsistent UI styles every time.

Vague descriptionPrecise spec
Pain 03

Competitor Analysis is Manual Drudgery

UI designers need to compare design languages across multiple products, but screenshotting, annotating, and organizing is extremely inefficient.

Manual drudgeryStandardized docs

Capabilities

Six Design Dimensions, Extracted in One Pass

Color Palette

Auto-detect primary, secondary, text, background colors, gradients, and compute contrast ratios.

primary: '#635BFF'
secondary: '#0A2540'
accent: '#00D4AA'
text: '#425466'

Typography

Extract complete font-family stack, weight distribution, size system, and line-height ratios.

fontFamily: 'Inter, -apple-system'
display: '64px / weight 600'
headline: '32px / weight 500'
body: '16px / 1.5'

Spacing System

Analyze padding, margin, gap patterns to derive base units and spacing scale.

baseUnit: '4px'
space.1: '16px'
space.2: '24px'
space.3: '32px'

Visual Texture

Extract shadow hierarchy, radius system, border style, backdrop-blur and other visual texture params.

shadow: '0 8px 30px rgba(0,0,0,0.12)'
borderRadius: '8px'
border: '1px solid rgba(0,0,0,0.08)'

Motion Design

Capture transition and animation duration, easing curves, and interaction feedback patterns.

duration: '150ms'
easing: 'cubic-bezier(0.4,0,0.2,1)'
hover: 'border-color transition'

Component Styles

Identify style patterns and variants for Button, Card, Input, Navigation and other key components.

Button:
  primary: 'bg-indigo-600 text-white'
  secondary: 'border-white/10'
Card:
  glass: 'bg-white/[0.035] backdrop-blur'

Multi-Tool Support

One DESIGN.md, Many Workflows

Claude Code

Place DESIGN.md in project root; Claude reads it and generates UI code matching your design system

Cursor

Paste into .cursorrules or context to keep Cursor referencing your design spec while coding

Codex

Inject as a design skill; Codex automatically applies the design system when generating frontend code

V0 / Lovable

Upload DESIGN.md as design reference; AI maintains style consistency when generating components

Real Cases

What Extracted DESIGN.md Looks Like

Linear Design SystemDESIGN.md
1## Core Style
2Dark cyber-SaaS: deep void backgrounds
3with indigo glow accents.
4
5### Color Palette
6- background: #0a0a0a
7- surface: rgba(255,255,255,0.04)
8- primary: #6366f1 (indigo-500)
9- textPrimary: rgba(255,255,255,0.9)
10
11### Typography
12- display: SF Pro Display, 48px, 300
13- body: Inter, 14px, 1.5

Comparison

Why Choose Design Extractor?

FeatureManualOpen SourceDesign Extractor
InstallationNo installDeveloper mode required
One-click from Chrome Web Store
Ease of UseHigh (needs CSS knowledge)Medium-High
Zero barrier, one-click extract
Extraction Speed1-3 hours~1 min
30 seconds
Chinese SitesDepends on skillPartial
Full support
AI StreamingNoNo
Real-time character-by-character
Screenshot AssistManualNo
Auto-capture 3 key screenshots
Custom API KeyN/APartial
Any OpenAI-compatible API
Published on CWSN/ANo
Yes

FAQ

About DESIGN.md Extraction

DESIGN.md is a Markdown file format that describes a web design system, including colors, typography, spacing, component styles, and more. AI coding tools like Claude Code and Cursor can read this file directly to generate UI code with consistent style.

The Free tier is completely free — use your own API Key for unlimited analyses. Pro ($5/mo) gives 50 platform-powered analyses. Max ($20/mo) gives 200 analyses, ideal for design teams.

Chrome and Chromium-based browsers (Edge, Arc, Brave, etc.). The extension uses Manifest V3, compliant with the latest Chrome extension standards.

Design Extractor is officially published on the Chrome Web Store — no developer mode needed. We support full Chinese website extraction, AI streaming output, automatic screenshot analysis, and any OpenAI-compatible API (Kimi, GPT-4o, etc.).

Absolutely. Save the generated DESIGN.md to your project root and Cursor will read it automatically; or paste it into your .cursorrules file to keep AI referencing your design spec.

Fully supported. Design Extractor can analyze webpages in any language, including Chinese, Japanese, and Korean. AI correctly identifies font stacks and typography parameters.

Very secure. Your API Key is stored only in local chrome.storage.local and never passes through our servers. The extension itself works offline when using a custom key.

Yes. After analysis, you can copy to clipboard with one click, or download as a {hostname}_DESIGN.md file to your local machine.

Extract Your First DESIGN.md

Install the Chrome extension, open any webpage, and get a complete design spec in 30 seconds

Install Chrome Extension Free