If you want an AI assistant to match a live site's design, there are now several tools that read it for you. Most of the search results for “MCP server to extract design tokens” are free open-source projects, and two of them are good. This page compares them with Enrichr and says where each one is the right choice, including where it is not Enrichr.
The short version
When extract-design-system is enough
It does one job: load a public page and write colours, typography, spacing, radii and shadows to design-system/tokens.json and tokens.css. It installs as an agent skill, a CLI or an MCP server, is MIT-licensed, and runs on your machine. Its own page is candid that this gives you starter tokens, not a pixel-perfect copy, and that dynamic or script-heavy sites may come back incomplete. If you are bootstrapping a design system from a reference and the reference is a conventional marketing site, this is the lightest way to do it.
When designlang is the better pick
designlang goes much wider and is also free and MIT-licensed. Per its page it extracts colours, typography, spacing, shadows, radii, CSS variables, breakpoints, hover and focus states and WCAG contrast, and writes more than 17 files, including a Tailwind config, a shadcn/ui theme, Figma variables and W3C tokens. It has a CLI, an MCP server, and extensions for several editors. It can also score how closely a clone matches the original. If the output you want is a Tailwind config or Figma variables, or you want everything running locally without credits, designlang is the stronger choice, and Enrichr will not replace it.
Where Enrichr goes further
The difference is motion that is not CSS, and 3D.
- GSAP and ScrollTrigger.
document.getAnimations()lists CSS animations, CSS transitions and Web Animations API animations. A GSAP tween changes styles from JavaScript on each frame, so it does not appear there. Enrichr hooks the GSAP timeline and records each tween with its duration, easing and ScrollTrigger settings. Most award-style sites animate this way. See how to tell which animation library a site uses. - WebGL and Three.js. Enrichr captures compiled shaders, uniforms, draw calls and the runtime scene graph, which is how you recreate a shader effect from a website.
- Source maps. When a site ships them, Enrichr can recover the original source.
- A brief, not just tokens.
rebuild_briefreturns one document written for an LLM to build from: tokens, components, exact timings, shaders, scene, fonts and assets, plus a capture zip that opens offline. - Nothing to install. It runs as a hosted MCP server, so there is no Playwright or Chromium to set up.
The trade-off is cost: Enrichr is credit-based (30 free credits a month, then paid plans), where the other two are free. See pricing and the tool reference.
What about MiroMiro?
MiroMiro is a browser extension for inspecting a page and extracting its colours, fonts, shadows and assets, and it has an MCP server, miromiro-mcp, with a token-extraction tool. We have not benchmarked it, so it is not in the table above. Look at its own site for what it covers and what it costs: published pricing differs between sources.
Using more than one
They do not exclude each other. A practical setup is a free tool for quick tokens and config files, and Enrichr for the specific reference sites where the motion or the 3D is the point. For the wider picture of what to install, see 7 MCP servers that stop AI guessing your design, and for the data behind what real sites use, what 107 top websites use, measured.
FAQ
Is Enrichr better than designlang?
Not for everything. designlang is free, open source and exports to Tailwind, shadcn and Figma variables, which Enrichr does not. Enrichr is the one to reach for when the site's motion comes from GSAP or ScrollTrigger, or when it uses WebGL and Three.js, because it records tweens, shaders and the scene graph.
Do designlang and extract-design-system run locally?
Per their own pages, yes. Both are Node tools that drive a Playwright Chromium on your machine and are MIT-licensed. Enrichr runs in the cloud, so there is nothing to install, but it uses credits after the free 30 a month.
Which one captures animation?
designlang describes reading document.getAnimations() to capture CSS and Web Animations durations and scroll-linked recipes. Enrichr reads those too, and also records GSAP tweens and ScrollTrigger settings, which are driven from JavaScript and do not appear in getAnimations().
What about MiroMiro?
MiroMiro is a browser extension for inspecting and extracting a page's colours, fonts, shadows and assets, with an MCP server (miromiro-mcp) that exposes a token-extraction tool. We have not benchmarked it, so it is not in the table. Check its own site for coverage, and for prices, which published sources report differently.
Can I use more than one?
Yes, and it is a sensible setup: a free tool for quick tokens and config files, Enrichr when you need the motion or 3D of a specific reference site.