Case Study
Design System Extractor
A website's design system, extracted as measured data
A product that treats a website's design system as data. Paste a URL and a headless crawler visits its key pages, captures every component in every state it can reach, clusters raw values into tokens, runs five measured checks per component and reports where the system is drifting. It's free to try, with paid plans through Stripe, and everything exports to Tailwind, W3C tokens and an MCP server.
Overview
Reading stylesheets isn't enough, so this watches the page. A Playwright crawler picks the pages that matter, walks the real Tab order for focus, holds the mouse down for active states and reads motion from the running page, including GSAP. Values cluster into tokens in OKLCH, and components are grouped by structure, not selectors. Every preview is rebuilt as sanitized HTML and CSS, then pixel-diffed against the real page before it's shown live. Real sites fought back. stripe.com first took 773 seconds against a six-minute limit, and live preview rates started near 30%. Four measured rounds of cause-by-cause fixes brought them to between 72% and 83%. The model only names and narrates. Every call has a deterministic fallback, and every number in a narrative is checked against the facts. Free runs sit behind a daily budget that fails closed, per-visitor caps and a worst-case reservation. Paid plans through Stripe lift those limits, and a typical run costs under a cent in model spend. Claude Code on Opus built it from a kit I planned, across nineteen gated phases and 112 logged decisions, with a second Claude Code session reviewing each round before I tested it.
Key Features
- 01Previews checked by pixels: each component is rebuilt as sanitized HTML and CSS and pixel-diffed against the real page. Within 2.5% it renders live; otherwise the crop shows with the measured reason
- 02Every state, replayed without scripts: hover, focus through a real Tab walk, active, open and disabled are captured with their timing and replayed inside a scriptless sandbox
- 03Motion read from the running page: Web Animations, CSS and an inline-style sampler that catches GSAP, classified into entrances, scroll reveals and loops, with every easing drawn on its real curve
- 04Components, not selectors: clustered by structure and merged across pages into named variants, keeping the site's own variable names, with a source crop that scrolls to every element
- 05Measured checks and a safe drift fix: five checks per component, counted as measured, never claimed. The drift report proposes a smaller token set that keeps every passing contrast pair passing
- 06Built for AI reuse: exports to CSS, JSON, Tailwind and W3C tokens, a prompt for any model, an MCP server with seven tools, and a CLI that can reach logged-in pages
- 07Free and paid tiers: free runs are protected by a daily budget that fails closed, per-visitor caps and a worst-case reservation. Paid plans bill through Stripe and lift the caps
- 08Built by an AI agent under a written spec: nineteen gated phases, 112 logged decisions, and a release gate of 801 tests, 134 visual goldens, zero axe violations and Lighthouse budgets