DESIGN.md Extractor — Design Tokens for Claude Code, Cursor & Codex

Stop reverse-engineering competitor sites by hand. DESIGN.md Extractor reads the live computed styles on any page you open and forges them into a single, token-driven Markdown file your AI coding agent — Claude Code, Cursor, Codex, Stitch, Aider — can drop straight into a project. No screenshots. No "make it look like figma.com" prompts. No vibes. Real numbers. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ WHAT IT DOES A five-stage probe runs against the active tab: 1. SiteProfiler — samples visible elements, weights by frequency 2. TypographyForge — extracts font stack, scale, weights, tracking 3. ColorForge — palette, surface/ink roles, accents, contrast 4. SpacingForge — base unit, scale, gutter rhythm 5. ShapeForge — radii, hairlines, shadow recipes The result is written into one of two channels: • DESIGN.md — a design-system blueprint you commit to your repo • SKILL.md — an agent-ready skill file with frontmatter + managed-block markers (drops into .claude/skills/, .agents/skills/, or .cursor/skills/ unchanged) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ WHY IT EXISTS Every "make a landing page like Linear" prompt loses 90% of the visual signal because the LLM never saw the actual pixels. Screenshots help, but agents that work in code want code-shaped input: hex codes, rem values, cubic-beziers, named tokens. DESIGN.md Extractor gives them exactly that — in the file format they already understand. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ THE WORKFLOW 1. Open any page you want to learn from. 2. Click the extension icon. The probe runs automatically. 3. Pick CHANNEL: DESIGN.md or SKILL.md. 4. COPY to clipboard, EXPORT as a file, or QUICK INSTALL straight into a project root — the extension picks the right folder for Claude Code, Codex, or Cursor. 5. Open the SPEC SHEET to see exactly which selectors fed each token, so you can audit, tweak, or argue with the output. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ DESIGNED FOR ✓ Frontend engineers shipping AI-assisted features ✓ Designers handing tokens to coding agents ✓ Indie hackers cloning visual references at speed ✓ Anyone tired of pasting "use these colors: #..." into chat ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ OUTPUT IS BYTE-COMPATIBLE Output matches the upstream open-source schema (design-md-chrome) so any tool that reads a DESIGN.md from one extractor reads ours. We added: • SKILL.md channel with proper frontmatter and managed blocks • Quick-install routing for the three big agent toolchains • A SPEC SHEET that explains the forge — no black-box magic ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ NOT WHAT YOU'RE LOOKING FOR? • This is **not** an inspector — use DevTools for one-off measurements. • This is **not** a Figma plugin — it reads live web pages. • This is **not** a screenshot tool — output is structured text, not images.