Learn more

How Style Extractor works

A web app, no install. Markdown output built for AI coding agents — with a gallery of ready-made examples so you can see the format before you extract.

What is a DESIGN.md?

A structured markdown file with a site’s extracted design: color palette, typography scale, spacing tokens, CSS variables, and short theme notes. Drop it in your project — often the root or a /docs folder — so your agent can use it as a style reference when generating UI.

How it works

  1. Paste a URL

    Enter any public website URL. Works with static sites, SPAs, and server-rendered pages over standard HTTP/HTTPS.

  2. We extract the design

    Colors, typography, spacing, CSS custom properties, and design themes are analyzed from the live page.

  3. Copy your DESIGN.md

    Structured markdown you can paste into your repo and reference in your prompts.

What you get

  • Color palette — primary, secondary, accent, background; named tokens with context.
  • Typography — families, weights, sizes, line heights (headings, body, nav, and more).
  • Spacing & shapes — radius, padding patterns, layout-related values.
  • CSS variables— mappings to the site’s custom properties where they exist.
  • Theme & tags — a readable style summary plus labels like minimal, dark, or high-contrast.

Output formats

Compact — essential tokens only, tuned for smaller agent context windows.

Extended — everything in Compact plus usage notes, rationale, and richer token detail.

Built for AI coding agents

DESIGN.md isn’t a screenshot or a Figma link. It’s a spec agents can read and act on: drop it in the repo, point your workflow at it, and get UI that lines up with the reference. Works with Claude Code, Cursor, GitHub Copilot, and any assistant that reads markdown in your project.