Clone Any Website’s Design System in One Command — Then Hand It to Your AI
Clone Any Website’s Design System in One Command — Then Hand It to Your AIOne CLI command. One markdown file. Your AI coding agent stops guessing and starts building exactly what you showed it.
Your AI keeps generating ugly UIs because you never told it what “good” looks like.
Every time you prompt Claude Code, Cursor, or Copilot to build a landing page, it starts from zero. No color palette. No spacing rules. No idea what font you want. So it guesses — and you spend 20 minutes fixing buttons and padding that shouldn’t have been wrong in the first place. DESIGN.md fixes this. It’s a plain markdown file that captures an entire design system — colors, typography, spacing, components, motion, accessibility — in a format AI agents actually read. Google Stitch just made this concept official. And now there’s a free open-source CLI that generates one from any live website in seconds.*
🧠 What's a DESIGN.md and Why Should You Care
Think of it as a README, but for how things should look.
A regular README tells contributors how to install and run your code. A DESIGN.md tells your AI coding agent how to make your UI look consistent — what colors to use, what font sizes mean “heading” vs “body,” how much padding goes around a card, what a button should look like.
Google introduced this concept through their AI design tool Stitch a few weeks ago, and it spread fast. The idea is simple: instead of describing your design system in every single prompt, you write it once in a markdown file. Drop it in your project root. Every AI agent — Claude Code, Cursor, Copilot, Stitch — reads it automatically and follows the rules.
Without DESIGN.md:
You prompt → AI guesses fonts, colors, spacing → output looks generic → you manually fix everything → repeat for every component.
With DESIGN.md:
You prompt → AI reads your design rules → output matches the style you want → you move on to the next thing.
The difference between “build me a pricing page” producing something that looks like your app vs something that looks like a Bootstrap template from 2019.
🛠️ What DesignerMD Actually Does — Under the Hood
Hey everyone!
I built an open-source tool called DesignerMD to solve a problem we all face: that awkward “blank page” phase when starting a new app.
Here’s what happens when you point it at a URL:
Step 1 — It fetches the website’s HTML, all linked stylesheets, inline styles, and font resources.
Step 2 — It detects which CSS framework the site uses (Tailwind, Bootstrap, Bulma, Chakra, Material UI, Ant Design, or custom).
Step 3 — It analyzes 11 design system layers and writes them into a single DESIGN.md file in your current directory.
| Layer | What It Extracts |
|---|---|
| Colors | Semantic roles, accent palettes, gradients, harmony analysis, WCAG contrast scores |
| Typography | Font families, weight usage, heading hierarchy, letter-spacing, line-height scale |
| Components | Button styles, input fields, cards, navigation, badges, modals, tooltips, dropdowns, tables, avatars, toggles |
| Layout | Spacing scale (GCD analysis), border-radius scale, grid system detection (Flexbox vs CSS Grid) |
| Shadows | Shadow hierarchy, border-depth, glass/blur effects |
| Motion | Transitions, keyframe animations, duration scale, easing functions, reduced-motion support |
| Accessibility | Focus indicators, skip links, ARIA landmarks, screen reader utilities, outline reset detection |
| Design Patterns | Layout pattern, nav style, hero style, card style, component density, visual style |
| Responsive | Media query breakpoints, fluid typography (clamp), container queries, mobile-first detection |
| Do’s & Don’ts | Auto-generated rules based on the site’s actual design characteristics |
| Agent Prompts | Ready-to-use component prompts, page templates, and design system commands for your AI |
Trick: The “Agent Prompt Guide” section at the bottom of every generated DESIGN.md is the real power move. It gives you copy-paste prompts like “Build a card component following the design system” that are pre-loaded with the exact tokens from the analysis. No more vague prompting.
⚡ Install and Run — 60 Seconds Flat
Option 1 — Global install (recommended):
npm install -g designermd
Option 2 — Clone and link:
git clone https://github.com/sidhant947/designermd
cd designermd
npm install
npm link
Run it:
designermd
It asks for a URL. Enter any website. Wait a few seconds. DESIGN.md appears in your current directory.
Example output when pointed at linear.app:
Colors: 9 semantic roles | 5 accents
Typography: 7 levels | 33 fonts | 7 weights
Components: 3 detected
Layout: CSS Grid | base unit: 4px | max-width: 640px
Motion: playful | 5 transitions | 5 animations
A11y: 3/4 checks passed | contrast: AAA
Responsive: 4 breakpoints | fluid type: yes
That entire analysis lands in a single .md file you drop into any project.
🤖 How to Use It With Your AI Coding Agent
The generated DESIGN.md works with any AI agent that reads project files. Here’s how to use it with the big ones:
Claude Code:
Drop DESIGN.md in your project root. Claude Code reads it automatically. Prompt: “Build the landing page following the design system in DESIGN.md.”
Cursor:
Same thing — place it in the project root. Cursor’s AI picks it up as context. Reference it in your prompt or let it auto-detect.
GitHub Copilot / GPT-5:
Add DESIGN.md to your workspace. Reference it explicitly: “Use the color tokens and typography from DESIGN.md for this component.”
Google Stitch:
Stitch natively supports the DESIGN.md format — it was designed for exactly this file type. Import it directly into your Stitch project for consistent generation.
| What You Say | What Actually Happens |
|---|---|
| “Follow DESIGN.md” | AI uses extracted color tokens, spacing scale, font hierarchy instead of guessing |
| “Build a card component” | AI checks DESIGN.md for card styles, border-radius, shadow levels, padding values |
| “Make this responsive” | AI reads the breakpoint map and fluid type settings from the analysis |
| “Match the existing design” | AI has the complete design DNA — it’s not matching vibes, it’s matching data |
linear-design.md,stripe-design.md), then tell your AI: “Combine the typography from linear-design.md with the color system from stripe-design.md.” You just built a custom design system without opening Figma.
🔄 DesignerMD vs Other Options — What Else Exists
The DESIGN.md ecosystem is moving fast. Here’s where DesignerMD fits:
| Tool | What It Does | Pros | Cons |
|---|---|---|---|
| DesignerMD | CLI that analyzes a live URL and generates DESIGN.md | Automated, real-time analysis, 11 layers deep, npm install | Early-stage project, single developer |
| awesome-design-md | Curated collection of 55+ pre-made DESIGN.md files from popular sites | Ready to use, covers Stripe/Vercel/Linear/Notion etc. | Static files — doesn’t analyze YOUR target site |
| Google Stitch | AI design tool with built-in DESIGN.md extraction | Native support, generates full UI too | Requires Google account, limited to Stitch workflow |
| Design MD Skills (Figma Plugin) | Exports DESIGN.md from Figma designs | Works from your actual design files | Requires Figma, tied to their ecosystem |
The gap DesignerMD fills: You want a DESIGN.md from a specific live website — not from a pre-made collection, not from a Figma file, not through a Google tool. Just point a CLI at any URL and get back a comprehensive analysis. That’s it.
🎯 Real Workflows That Make This Click
Freelancer starting a client project:
Client says “make it look like Notion.” You run designermd, enter notion.so, get a complete design spec in 10 seconds, drop it into your project, and your AI builds pixel-accurate layouts from the first prompt. Client thinks you’re a genius.
Indie hacker building a SaaS:
You like how Linear looks but can’t afford a designer. Analyze linear.app. Now you have their exact spacing scale, color tokens, and typography hierarchy. Your AI builds components that feel premium because the design DNA is premium.
Team rebuilding an existing product:
Your own marketing site looks great but the app is inconsistent. Run DesignerMD against your marketing site. Now your AI builds the app using the same tokens — brand consistency without a 50-page style guide.
Learning CSS design systems:
Analyze 10 different sites. Compare the generated DESIGN.md files side by side. You’ll learn more about professional design systems in an hour than in a semester of design courses. Every file is a case study.
⚠️ What to Know Before You Run It
It’s early. This is a fresh open-source project — 10 commits, single developer. It works, but expect rough edges. If something breaks, open an issue on GitHub.
It analyzes what’s publicly visible. The tool reads CSS that the browser can see. If design tokens are buried in JavaScript runtime or behind authenticated routes, they won’t be captured.
CSS framework detection isn’t magic. It checks for Tailwind, Bootstrap, Bulma, Chakra, Material UI, and Ant Design. Custom frameworks or heavily modified setups might show as “Custom.”
The output is a starting point. The generated DESIGN.md gets you 80-90% there. You’ll likely want to tweak specific values, add project-specific rules, or remove sections that don’t apply.
Node.js required. It’s an npm package — you need Node.js installed on your machine.
Quick Hits
| Want | Do |
|---|---|
| Clone any site’s design system |
→ npm install -g designermd → run designermd → enter URL |
 Stop AI from guessing your UI |
→ Drop the generated DESIGN.md in project root |
 Pre-made files for popular sites |
→ awesome-design-md has 55+ ready to use |
 Mix design systems from multiple sites |
→ Analyze several URLs, rename files, tell AI to combine |
 Support the developer |
→ Star the repo on GitHub |
I’d love to hear how you guys are using this in your AI workflows. If you find it helpful, please drop a on the repo!
Let’s chat in the comments!
One markdown file. Zero design guesswork. Your AI finally builds what you actually wanted.
!