DESIGN.md Generator

**Stop guessing colors and fonts. Extract them in 1 click.** DESIGN.md Generator turns any website into a clean, agent-ready design system document. Click the extension icon on any page — you'll get a full `DESIGN.md` or `SKILL.md` in seconds. Paste it into Claude Code, Cursor, or Codex, and your UI instantly matches the source site's visual language. ### What it extracts - **Colors** — primary, background, foreground, accent, muted (deduplicated from computed styles) - **Typography** — heading/body font families, size scales, line heights, weights - **Spacing** — the spacing rhythm actually used on the page (not a generic scale) - **Components** — buttons, cards, inputs with real radius/padding/border tokens - **Shadows** — elevation levels with real CSS values - **Font faces** — @font-face declarations with sources - **CSS custom properties** — `--var` tokens declared on the page ### Built for AI coding agents Every output is formatted for LLMs. The DESIGN.md is structured so Claude Code, Cursor, Codex, Aider, Continue, and any other coding agent can consume it directly. The SKILL.md variant ships with YAML frontmatter ready to drop into `.claude/skills/`. ### Privacy first - No login - No account - No analytics - No data collection - Runs entirely in your browser — reads the current tab's computed styles locally, formats them to Markdown, and hands the result back to you ### Perfect for - Designers reverse-engineering a reference site - Engineers cloning a visual language for a prototype - Agent users who want their AI to match a specific brand - Anyone tired of manually noting down hex codes ### How to use 1. Open any website 2. Click the `{ }` icon in your toolbar 3. Click **Extract this site's design** 4. Copy the DESIGN.md or SKILL.md tab 5. Paste into your AI coding agent ### Open & transparent No server. No tracking pixel. No third-party script. Source lives alongside the web version at https://designmd-generator-production.up.railway.app Made by a solo developer. Feedback welcome.