On this page8
Tools that extract a design system from a URL
The best tools to extract a design system from a website in 2026 are Sitepeel for a measured DESIGN.md from any link, Dembrandt for open-source tokens in every format, Pocket UI for free CSS and Tailwind tokens, and Design Extractor for a strict DESIGN.md with an MCP server. All read colors, type, spacing and corners.
| Tool | Best for | Price | Works in |
|---|---|---|---|
| Sitepeel | A measured DESIGN.md, plus 168 brands | A few free runs, then sign in free | Any browser; Chrome extension |
| Dembrandt | Open source, every export format | Free, open source | Command line, MCP, GitHub Action |
| Pocket UI | Free tokens as CSS or Tailwind | Free | Web |
| Design Extractor | Strict DESIGN.md, MCP server | Credits from $5; 6 per page | Web, Chrome, MCP |
| context.dev | Free DESIGN.md, styleguide API | Free; API from $20 a month | Web, API, MCP |
| Project Wallace | Tokens from a site’s CSS | Free | Web, command line |
| Google Stitch | A DESIGN.md from a prompt or URL | Free, daily credits | Web, MCP, SDK |
| getdesign.md | Ready-made brand files | Free catalog; $34 for your site | Web, npx |
| CSS Peeper | Colors, type and assets in Chrome | Free; Pro from $2.49 a month | Chrome |
Which extractors write a DESIGN.md or tokens?
| Feature | Sitepeel | Dembrandt | Pocket UI | Design Extractor | context.dev |
|---|---|---|---|---|---|
| From a link, nothing to install | Yes | No | Yes | Yes | Yes |
| Colors, type, spacing and corners | Yes | Yes | Partly, fonts and weights | Yes | Yes |
| Component styles (buttons, inputs) | Yes | Yes | No | Yes | Yes |
| Writes a DESIGN.md | Yes | Yes | No | Yes | Yes |
| Tokens as JSON, CSS or Tailwind | Partly, inside the DESIGN.md | Yes | Yes | Partly | Partly |
| MCP server, API or CLI for agents | No | Yes | No | Yes | Yes |
| Pages behind a login | Yes, in the extension | Yes | No | No | No |
| Free | Yes, with a free sign-in | Yes | Yes | No, credits | Yes |
1. Sitepeel
Paste a link and get a DESIGN.md in Google’s format with the colors, type scale, spacing, corners and components the page really renders, and a visual style guide. 168 brand files are free to browse, and the Chrome extension reads pages behind a login.
- Pick it for a file your AI coding agent can follow
- No MCP server or API yet
2. Dembrandt
A free, MIT-licensed command-line tool that extracts a site’s tokens and writes W3C tokens, Tailwind, shadcn themes, a DESIGN.md or a brand guide PDF. It runs as an MCP server and can fail a build when a site’s tokens drift.
- Pick it if you live in the terminal or CI
- Needs Node.js and the command line
3. Pocket UI
A free web tool with no sign-up: paste a link to get the colors, fonts, spacing scale, radii and shadows, exported as CSS variables, a Tailwind config or JSON. Its Chrome extension is still on a waitlist.
- Pick it for quick tokens with nothing to install
- No component styles and no DESIGN.md
4. Design Extractor
Turns a public link into a Google-spec DESIGN.md with component recipes checked against the live site, and has an MCP server and a Claude Code plugin. Every extraction spends prepaid credits.
- Pick it for an MCP server your agent can call
- Public pages only; no free extractions
Which one should you pick?
Questions
How do I extract a design system from a website?
Paste the site’s link into an extractor like Sitepeel’s DESIGN.md generator or Pocket UI. You get its colors, fonts, spacing and corners as a DESIGN.md or as design tokens.
What is the best free design system extractor?
Sitepeel (a few free runs, then a free sign-in), Pocket UI, context.dev and Project Wallace are free from a link. Dembrandt is free and open source if you use the command line.
Can I get design tokens from a website?
Yes. Pocket UI, Dembrandt and Project Wallace export tokens as CSS variables, Tailwind or JSON. Sitepeel puts them in a DESIGN.md that AI coding agents read.
Is an extracted design system the brand’s official one?
No. These tools measure what a public page renders. Use the result to learn and prototype, not to copy a brand’s logo, name or content.
What’s the difference between design tokens and a DESIGN.md?
Tokens are the raw values: colors, sizes, spacing. A DESIGN.md wraps them with rules on how to use them, so an AI agent can build in that style.
