StyleLift — Design System Extractor

Extract any page's design system — colors, typography, spacing, components — as DESIGN.md + design tokens for AI coding tools.

Every AI-generated site looks the same — same fonts, same purple gradients, same defaults. Your AI coding tool will happily build you a site, but it has no idea what your taste looks like. StyleLift fixes that in one click. Open any website you admire, click the icon, and get its complete design system: ✦ DESIGN.md — Google's open format for describing a visual identity to AI coding agents (Claude Code, Cursor, Lovable, v0, Bolt). Includes a measured "design personality" brief, typography roles, component recipes, and direct rules for AI agents. ✦ tokens.json — W3C DTCG design tokens (works with Figma, Style Dictionary, Tokens Studio) ✦ theme.css — CSS variables + a Tailwind v4 @theme block ✦ tailwind.config.js — for codebases on Tailwind v3 ✦ preview.html — a self-contained visual preview of everything extracted WHAT MAKES IT DIFFERENT • Measured, never invented. Every value traces to the page's real CSS. If a site has no accent color, StyleLift says so — it never invents one. • Computed WCAG contrast table with pass/fail grades in every export. • Component recipes reference tokens (var(--color-primary)), so your AI understands "this button is the brand color," not "this button is blue." • Honest coverage notes: every export states exactly what was sampled. PRIVACY FIRST Everything runs locally in your browser. No accounts, no analytics, no servers — page data never leaves your machine. Minimal permissions: the extension can only read a tab when you click its icon. FAIR USE StyleLift extracts values (colors, sizes, font names) — unprotectable facts. It never downloads font files, logos, images, or verbatim CSS. Use extractions as inspiration for your own work, not to clone someone's brand. Steal the taste, not the site.