Colours, typography, spacing, components, patterns — fully analysed and exported as tokens, CSS, Tailwind, and AI-ready prompts.
Manifest V3 · Zero data collection · No external requests
Click the Design DNA icon in your browser toolbar while on any website you want to analyse.
Quick scan captures the visible viewport. Deep scan traverses multiple page states and interactions.
A 25+ section interactive report opens instantly. Download tokens, CSS, Tailwind config, or drop a prompt into any AI tool.
The engine scores each finding against real evidence — only tokens that appear enough times to be intentional make it into your report.
Full palette with semantic roles — background, surface, text, accent, status. Includes WCAG contrast ratios.
Font families, weights, sizes, line-heights, and letter-spacing — voted from 6 samples per tag for accuracy.
Spacing scale built from real padding and gap values. Grid columns, container widths, and breakpoints detected.
Up to 8 button variants, 5 input types, navigation structure, and content module patterns — all with their visual properties.
Hero, feature grid, testimonial, pricing, CTA — each pattern scored by confidence so you know what the site actually uses.
Motion personality classified from CSS transitions. UI craft signals like border-radius consistency, shadow layers, and micro-interactions.
Each prompt embeds the full extracted DNA. Drop it into ChatGPT, Claude, Gemini, v0, Cursor, or Lovable and start building.
Compact DNA snapshot. Best starting point for chat-based AI tools.
Full token values and component specs. For high-fidelity output.
React + Tailwind–ready. Tells the AI exactly how to name and build components.
Apply extracted DNA to an existing codebase. Perfect for retrofits.
Design-language description for Figma AI, Midjourney, or creative direction.
Distilled aesthetic principles without literal values. Great for novel work.
Every export is generated from the same extracted DNA so values stay perfectly in sync.
Standard token format compatible with Style Dictionary, Token Studio, and Theo.
Drop-in stylesheet. Every token as a :root variable, ready for any project.
theme.extend block with colours, fonts, spacing, and border-radius values.
YAML front matter + markdown. Compatible with design-system documentation tools.
All 6 prompts + full DNA payload in a single JSON file for programmatic use.
Component and pattern catalogue with confidence scores and property snapshots.
Self-contained HTML file. Share with teammates — no server, no dependencies.
Get started
Works on any website. Nothing to configure. No account required.
Chrome 116+ · Manifest V3 · Open source