D
DesignMD Maker URL → design system spec

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.

🔗
We fetch the page's HTML, stylesheets and scripts, extract the real design tokens and compose your DESIGN.md — free & instant.
⚙ Options — name & notes▼
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.

Recently analyzed

Latest sites the AI looked at

Click a card to open its full design report.

Screenshot of Axisflow AI Operations Template

Axisflow AI Operations Template

axisflow-saas.aura.build
Screenshot of Keyhan Bebek

Keyhan Bebek

omegabilisim.com.tr/bebek

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.