Media
5 items
Description
Decode any site's real design system locally — colors, fonts, tokens, an element inspector — and hand it to your AI coding agent. Ask your AI to "make it look like Stripe" and it guesses: a purple-ish gradient, Inter, three identical cards. It has never measured the thing it's imitating. This extension measures it. One click on any site and Mozaika reads the REAL design system from the live DOM — computed styles, the fonts actually loaded, the site's own CSS design tokens. Not a screenshot. Not a vibe. The numbers. Real results, from real sites: • stripe.com → primary #533AFD, sohne-var, radius 4px — decoded in 41 ms • linear.app → 128 design tokens harvested straight from :root, with the names the design team wrote WHAT YOU GET IN ONE CLICK • Color roles — background, text, primary, accent, link, button (from real elements) • Typography — loaded webfonts + the measured type scale (h1–h6, weights, line-heights) • Design tokens — the site's own :root custom properties, name + value • Radii, shadows, spacing rhythm — measured, not guessed DECODE LENS (new) Turn it on and hover anything on the page: an on-page inspector shows each element's DNA — font, size, weight, exact colors, radius, padding. Click, and a complete component spec + a ready "build this exact component" prompt lands in your clipboard. It feels like X-ray vision for interfaces. PASTE-READY FOR YOUR AGENT Copy the decode in 5 formats: Agent Prompt · DESIGN.md · Tailwind v4 @theme · CSS variables · W3C design tokens JSON. Paste into Claude Code, Cursor, Copilot — any AI coding tool. Your agent stops guessing and builds to spec. PRIVATE BY DESIGN Decoding runs 100% locally, on your machine, only when you click. It works on any site — localhost and logged-in pages included. Optional enrichment (brand personality, framework detection) sends only the URL to mozaika.design and can be switched off in Options; with it off, zero bytes leave your device. Unlimited. Free. No account needed. Want the same decode for EVERY screen — searchable sections, full page teardowns, an MCP server inside your agent? That's Mozaika: https://mozaika.design