Website Design DNA Auditor

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.