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

About

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

▎ PRIVACY

  • No analytics. No tracking pixels. No telemetry.
  • The probe runs only on the tab you click — never in the background.
  • Page content is read in-process; nothing is uploaded except your
    sign-in email (handled by ExtPay for billing).
  • You can sign out and uninstall at any time; local state is wiped.

Full policy: see Privacy Policy link in the listing.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

▎ FREE & PAID

  • Free: a generous monthly probe quota — enough to evaluate.
  • Paid: unlimited probes, priority support. Billing handled by ExtensionPay.
  • One-time signup with email; no card stored on our servers.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

▎ 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.