Get the design system from any website

Paste a web address. We open it in a real browser and measure what's actually on the page: colours, fonts, the type scale, spacing, corners, shadows and buttons. Then you get it all as a DESIGN.md your AI agent can follow, or as CSS, Tailwind or design tokens.

Or try one:

What you get

We load the page in a real browser at desktop size, scroll to the bottom and back so everything renders, then measure the styles the browser actually applies. Because it reads the rendered page rather than the source code, it works on any site, whatever it’s built with.

Colours, by role
Background, surface, text, muted, primary, accent and border, worked out from where each colour is used. Plus the full palette with how much of each, and contrast checks.
Type scale
The typefaces and the sizes, weights, line heights and letter spacing for display, headings, body, small text and labels.
Spacing grid
The spacing scale the page actually uses, and whether it sticks to a 4px or 8px grid.
Corners & shadows
The corner radii and shadow levels, merged where they're a pixel apart.
Components
The primary and secondary buttons, cards, inputs and links, measured and rebuilt so you can see them.
Consistency notes
Shades of grey that are nearly the same, stray font sizes, off-grid spacing and hard-to-read text, pinned on a screenshot.

Four ways to export it

DESIGN.md is a markdown file that tells AI coding agents like Claude Code and Cursor how your interface should look: the tokens up top, the rules for using them below. Drop it in your project root and point your agent at it. What is DESIGN.md? explains the format.

Tailwind v4 gives you an @theme block of colours, fonts, text sizes, spacing, radii and shadows. CSS variables are the same tokens as plain custom properties for any stack. Design tokens (JSON) follow the W3C Design Tokens format, for Style Dictionary, Figma plugins and other tools.

Ways people use it

  • Brief an AI agent on an existing brand. Extract your own site, then give the DESIGN.md to the agent building your next page, so it matches instead of reaching for the defaults.
  • Audit a site before a redesign. See how many greys, font sizes and button styles have crept in, and start the new system from what’s actually used.
  • Learn from sites you admire. See exactly how a polished site sets its type and spacing. Use it as a reference, not a copy: take the lessons, keep your own brand.
  • Hand over a client site. Give the next developer, or the next agent, a written record of the design system.

FAQ

How accurate is it?

The values come from the browser, so the colours, sizes and spacing are what’s really on the page. The roles (which colour is “primary”, which size is “body”) are worked out from how often and where each value is used, so check them against your own source files before you treat them as final. Sites that hide most of their content behind animations or a login give less to measure.

Does it work with any website?

Any public website. It doesn’t matter whether it’s built with Tailwind, WordPress, Webflow, Framer or hand-written CSS, because it measures the result. It can’t get past logins, and some sites block automated browsers.

What are the consistency notes?

They point out what makes a design system harder to keep consistent: lots of near-identical greys, too many font sizes, spacing off the grid, many button styles and text below WCAG AA contrast. Each one is pinned on the screenshot, worst first. It’s a quick health check, not a judgement on how the site looks.

Who writes the DESIGN.md rules?

The tokens are measured. The overview and the usage rules (what each colour is for, how the type pairs, what to avoid) are written by Claude, Anthropic’s AI model, from the tokens and a screenshot of the page. They’re a strong first draft; edit them to add what only you know about the brand.

Can I use another site’s design system?

Use it to learn and as a reference. Colours and spacing values aren’t ownable on their own, but a site’s overall look, its logo and its brand are. Build something that’s yours.

Do you store the results?

We keep each result, with its screenshot, so you can share the link. Results aren’t listed anywhere public; only people with the link can see them. If you’d like one removed, get in touch.

More free tools · Website audit · Theme generator · Design inspiration

Ship it, then check it. Pin feedback on the live site and let your agent fix it.

No credit card needed.