Design.md

Design.md is a web-based UI reverse-engineering tool that converts any public website URL into a ZIP of machine-readable design files tailored for AI coding agents.

What is Design.md?

Design.md (designmd.fun) is a free-to-use web tool that analyzes a rendered page and outputs a structured design system bundle for AI coding tools. Enter a public domain like stripe.com, the engine extracts color tokens (OKLCH/HEX), Satoshi typography scales, CSS variables, spacing rhythm, shadows, and layout grids, then writes ten cross-referenced files—design.md, colors.json, typography.json, spacing.json, shadows.json, components.md, animations.md, prompts.md, figma-tokens.json, and tailwind.config.ts—ready for one-click download as a ZIP.

Key Features

• One-click extraction — Paste any public URL; the headless engine reads the rendered DOM and computes exact styles, including color roles, fonts, spacing, breakpoints, motion, and accessibility attributes.
• Ten output files per URL — The export bundle includes design.md, tokens.json, tailwind.config.ts (Tailwind v4), variables.css, colors.json, typography.json, components.md, animations.md, figma-tokens.json, and prompt.md.
• AI agent prompts built in — Pre-written system prompts for Claude Code, Cursor (.cursorrules), Windsurf (Cascade), Lovable, v0 by Vercel, Bolt.new, ChatGPT, and GitHub Copilot are included in each export.
• Tailwind v4 native config — The generated tailwind.config.ts uses @theme variables such as --color-primary, --font-sans, and --radius-lg for zero-build-step consumption.
• No signup for basic use — Generations are free up to 5 per month without creating an account; Pro and Team tiers add higher limits and private projects.
• Pre-analyzed design library — 29 production design systems are browsable and downloadable, including Stripe, Linear, Vercel, Notion, Framer, Raycast, Supabase, and more.
• Component and inspiration libraries — Searchable UI patterns (buttons, navbars, cards, forms, pricing, etc.) and thousands of screenshots can be turned into design.md tokens.

Who is it for?

• Developers using AI coding tools — Drop the exported design.md into Claude Code, Cursor, or Windsurf so the AI generates UI that matches an existing brand instead of inventing colors.
• Design engineers and frontend developers — Reverse-engineer competitor sites or their own product to extract reusable tokens and speed up design handoff.
• Agency teams — Use the tailwind.config.ts and prompt files to deliver client-matched prototypes faster; one testimonial notes it "removed a whole day of token guessing."
• Indie makers and solo builders — Generate a consistent design system for a side project without designing from scratch.

What can you do with Design.md?

• Replicate a reference design — Paste stripe.com and get a full design system doc to feed Claude Code, so the first render matches Stripe's visual language.
• Standardize an existing product — Extract your own website's tokens and share them with your team so every AI-generated component stays on brand.
• Learn from production systems — Browse the 29 pre-analyzed design systems (Linear, Vercel, Notion, etc.) and download their design.md files for study or reuse.

How does Design.md work?

The workflow is outlined in four steps on the site. First, paste a public URL—the tool renders it exactly as a visitor sees it. Second, AI analysis collapses colors into roles, type into a scale, and spacing into a rhythm. Third, ten file formats are generated at once, cross-referenced and consistent. Fourth, you download a ZIP to drop into your repo or paste directly into your AI agent.