Website Design DNA Auditor

About

Website Design DNA Auditor extracts the complete design system from any live website in a single click — then hands it to you as developer-ready tokens, CSS, Tailwind config, and AI prompts.

Point it at any site, pick a scan depth, and hit Analyse. The extension reads the live DOM and computed styles, clusters the raw data into a structured design system, and opens a 25-section interactive report.

WHAT IT EXTRACTS
• Colour tokens — full palette with semantic roles and WCAG contrast badges
• Typography — font families, weights, sizes, line-heights, and the full type scale
• Spacing & layout — base unit detection, spacing ladder, grid and container widths
• Components — button variants, input types, navigation, and content modules with their properties
• Page patterns — hero, features, pricing, testimonials, CTA, nav, and footer, each scored by confidence
• Motion & craft — motion personality classified from CSS transitions, plus UI craft signals
• Accessibility — contrast tables against light and dark backgrounds

SCAN DEPTHS
• Quick — current page only, fastest
• Sample — up to 5 pages, balanced accuracy
• Deep — up to 12 pages, thorough audits

EXPORTS (one-click download)
• design-tokens.json — W3C Design Tokens
• css-variables.css — drop-in CSS custom properties
• tailwind-theme.js — Tailwind theme.extend config
• DESIGN.md — Google Stitch format
• pattern-library.json — component and pattern catalogue
• prompt-pack.json — six AI prompts plus the full DNA payload
• Standalone HTML report — share with anyone, no extension required

AI PROMPT KIT
Six ready-to-paste prompts (concise, detailed, component, restyle, visual direction, and abstracted) for popular LLMS — each embedding the extracted design DNA.

PRIVACY-FIRST
• No account, no sign-up
• Nothing leaves your browser — all analysis runs locally
• No external servers, no analytics, no tracking
• Reads a page only when you click Analyse, using the activeTab permission

Built with Manifest V3. No external dependencies.