DesignMD Maker
Free & instant — no signup needed

Turn any website into a design system your AI can follow

Paste a URL — get a precise DESIGN.md spec plus a live HTML preview, ready for AI coding agents.

Real CSS evidence, not guesses Works with Cline, Cursor & Claude Code Free code-only engine Live HTML preview included
🔗
We fetch the page's HTML, stylesheets and scripts, extract the real design tokens and compose your DESIGN.md — free & instant.
Try:
⚙ Options — name▼
Working on your design…
⏱ 0:00 📄 0 lines
  • 1 Fetch page & screenshot
  • 2 Extract design tokens
  • 3 AI writes design.md
  • 4 Build HTML preview
Extraction usually takes under a minute. Keep this tab open — your full design report opens automatically when it's done.

Design name

📊 Open full report ⬇ Download design.md ↗ Open preview
Verifying preview against the reference…
The QA agent takes fresh screenshots of the reference (and, when publicly hosted, of the preview), compares them section by section with the code evidence, then rewrites the preview to fix every difference. Typically 1–3 minutes.

How it works

From URL to spec in three steps.

One file your AI agents read across every coding session — no more re-explaining the design each time.

01

Paste a URL or drop a screenshot

We fetch the page, parse CSS variables, Tailwind classes, Google Fonts, keyframes and layout structure — and capture a live screenshot as visual evidence.

02

AI writes your spec

The model reads the structured signals and produces a brand-distinctive DESIGN.md: color system, type scale, spacing, elevation, components, motion and guardrails.

03

Review, verify & download

Your full design report opens automatically. Inspect the live HTML preview, optionally run the Verify & Fix pass, then drop the .md at the root of your repo. Done.

The spec

What's inside every DESIGN.md

A DESIGN.md is a complete design-system specification in plain Markdown: machine-readable YAML tokens up top, detailed human-readable sections below. One file documents the entire visual language of a website.

🎨

Color system

Full palette with usage roles — background, surface, text, accent — plus exact hex values pulled from the live CSS.

🔤

Typography

Font families (incl. Google Fonts), the real type scale, weights, line heights and letter spacing.

📐

Spacing & layout

Spacing scale, container widths, grid patterns and responsive breakpoints detected in the code.

⬜

Radii & shadows

Border-radius scale and elevation system — every shadow token exactly as the site ships it.

🌈

Gradients & effects

Linear/radial/conic gradients, glassmorphism, backdrop filters and blend modes actually in use.

🎬

Motion

Transitions, easings, keyframes and JS-driven animation patterns (scroll reveals, parallax, counters).

🧩

Components

Recipes for buttons, cards, navigation, forms and badges — how each is composed from the tokens.

🛡️

Guardrails

Explicit do's and don'ts so an AI agent never drifts off-brand while generating new UI.

DESIGN.md
---
name: Aurora Landing
colors:
  background: "#0B0D17"
  accent: "#4F46E5"
  text: "#F4F5F8"
fonts:
  display: "Space Grotesk"
  body: "Inter"
radius: { sm: 10px, lg: 20px }
motion: cubic-bezier(.16,1,.3,1)
---
# Design System — Aurora
## Color usage · ## Type scale
## Components · ## Guardrails…

Built for AI workflows

Works with every AI coding agent

DESIGN.md is plain Markdown — the native context format of AI coding tools. Drop it in your repo and any agent can read it, no plugin or integration required.

ClineCursorClaude CodeGitHub CopilotWindsurfAiderBolt.newv0LovableReplit Agent

1 · Add the file to your repo

Place DESIGN.md at the project root (or in docs/) — the same place agents look for README.md and rules files.

2 · Tell your agent to follow it

Add one line to your rules file (.clinerules, .cursorrules, CLAUDE.md…) or paste it into the chat:

Read DESIGN.md and strictly follow its design tokens, components and guardrails for all UI work.

Why teams use it

One spec, endless consistent UI

See all use cases →

🤖 Consistent AI-generated UI

AI agents drift: different shades, random radii, off-brand spacing between sessions. A DESIGN.md pins the design system down once, so every generated page matches — even weeks later, in a fresh chat.

🔍 Instant design audits

Reverse-engineer a competitor or reference site in minutes instead of hours in DevTools. Get its real palette, type scale, spacing rhythm and motion language as a structured, shareable document.

🖼 From screenshot to spec

Have only a dribbble shot, a PDF mockup or an old screenshot? Image mode derives the full design system visually — colors, typography, components and style direction — from a single picture.

🔁 Redesigns & migrations

Rebuilding a legacy site on a new stack? Extract its design system first, hand the DESIGN.md to your agent, and rebuild pixel-consistent components without archaeology in old CSS files.

Questions

Frequently asked

What is a DESIGN.md file?
A DESIGN.md file is a Markdown design-system specification that documents a website's complete visual language: colors, typography, spacing, border radii, shadows, gradients, motion, components, and design guardrails. It uses YAML frontmatter for machine-readable tokens plus detailed Markdown sections, so both humans and AI coding agents can reproduce the design accurately.
How does DesignMD Maker work?
Paste a website URL or upload a screenshot. The analyzer fetches the page's HTML, stylesheets and scripts, extracts structured design signals (colors, fonts, spacing, keyframes, CSS variables and more), captures a live screenshot, then an AI model writes a precise DESIGN.md specification plus a faithful live HTML preview of the page. A code-only mode is also available for zero-cost deterministic extraction.
Which AI coding agents can read DESIGN.md?
Any AI coding tool that reads project files can use a DESIGN.md: Cline, Cursor, Claude Code, GitHub Copilot, Windsurf, Aider and others. Drop the file at the root of your repository (or reference it in your agent rules) and instruct the agent to follow the design system it describes when building UI.
Can I generate a design system from a screenshot instead of a URL?
Yes. Switch to Image mode and upload a PNG, JPG, WEBP or GIF (up to 10 MB). The AI derives the full design system visually — colors, type scale, spacing, components and style direction — directly from the image.
How accurate is the extracted design system?
URL mode combines real code evidence (parsed CSS custom properties, Tailwind classes, Google Fonts, keyframes) with a live screenshot, so the AI grounds its spec in the actual implementation rather than guessing. An optional "Verify & fix" pass re-screenshots the reference and the generated preview and repairs any visual differences.
Can I edit the DESIGN.md before downloading?
Yes. Every generated design is saved to your gallery with a live preview, a full design report page, and download buttons for the .md file (plus animations.js when the source uses JS-driven motion). You can copy the Markdown, tweak it, and re-use it in any project.
How do I use the DESIGN.md file in my project?
Place DESIGN.md at the root of your repository, then tell your AI agent (for example in a Cline rule or Cursor rule) to read it and follow the documented tokens and guardrails when generating UI code. See our step-by-step guide on the "How to use" page.
Is DesignMD Maker free?
The code-only engine is completely free — it extracts tokens deterministically without AI calls. AI-powered generation uses your configured model and shows the exact token cost after every run, typically a few cents per design.
Does DesignMD Maker work with Tailwind CSS sites?
Yes. The analyzer understands Tailwind utility classes — including arbitrary values like bg-[#EBE8E3] — plus CSS custom properties, Google Fonts, keyframes and inline styles. It filters out unused framework CSS so the extracted palette and tokens reflect what the page actually renders, not the whole utility library.
What is the difference between a DESIGN.md and Figma design tokens?
Figma tokens describe a design as it was drawn; a DESIGN.md describes a design as it actually ships in production code. It is extracted from the live site's real CSS and rendering, written in plain Markdown any AI agent or developer can read without special tooling, and includes usage guardrails ("never do X") that raw token JSON cannot express.
What is the difference between the AI engine and the code-only engine?
The code-only engine parses the page's CSS deterministically and outputs the detected tokens — free, instant, zero AI cost. The AI engine additionally reads a live screenshot and the page structure, then writes a richer spec with named color roles, component recipes, motion documentation and a near-pixel-faithful HTML preview.
Is it legal to extract a design system from someone else's website?
Analyzing publicly served CSS for study, inspiration or competitive research is generally fine — the same information is visible in any browser's DevTools. You should not clone a site wholesale or copy protected brand assets (logos, illustrations, copy). Use extracted specs responsibly: learn the system, then build your own work.