design analyzer Your essential tool for design system deconstruction
Deep-extract CSS variables, Tailwind tokens, application routing paths, and dependency packages directly from live browser bundles. Clean evidence, parsed in real-time, refined by Gemini AI.
Reverse Engineering Kit
Dissect, inspect, and analyze any modern web framework design system instantly.
Token Extractor
Dissects computed styles to discover CSS custom properties, variables, and font-family stacks. Generates interactive color swatches automatically.
Tailwind reverse-engineering
Scans document node classes to reverse-engineer custom theme configuration settings, arbitrary values, and framework versions.
Stack Auditor
Identifies JS runtime globals, library tags, and script URLs to audit frameworks (Vue, React, Svelte, Alpine) and bundler configs (Vite, Webpack).
AI Architectural Reports
Feeds structural extraction logs to Gemini 2.5 API to write detailed architectural markdown reports outlining brand DNA, typography, color scheme, and blueprint.
How Deconstruction Works
Edge Crawl
Spins up headless Chromium instances globally via Cloudflare Puppeteer to render the website layout and capture viewport images.
Code Dissect
Injects DOM analyzer scripts to map calculated colors, CSS properties, fonts, scripts, and navigation routes.
AI Synthesis
Synthesizes all parsed data nodes using Gemini AI into an academic markdown design report, outlining brand DNA, typography, color scheme, and blueprint.
Shared Deconstructions Ledger
No Deconstructed Sites
Analyze a website to deconstruct its bundles and generate design reports. Reports are stored in a shared global repository.
Start First Analysis