Item logo image for Website Design DNA Auditor

Website Design DNA Auditor

Item media 5 (screenshot) for Website Design DNA Auditor
Item media 1 (screenshot) for Website Design DNA Auditor
Item media 2 (screenshot) for Website Design DNA Auditor
Item media 3 (screenshot) for Website Design DNA Auditor
Item media 4 (screenshot) for Website Design DNA Auditor
Item media 5 (screenshot) for Website Design DNA Auditor
Item media 1 (screenshot) for Website Design DNA Auditor
Item media 1 (screenshot) for Website Design DNA Auditor
Item media 2 (screenshot) for Website Design DNA Auditor
Item media 3 (screenshot) for Website Design DNA Auditor
Item media 4 (screenshot) for Website Design DNA Auditor
Item media 5 (screenshot) for Website Design DNA Auditor

Overview

Extract a website's full design system in one click: colours, typography, spacing, components, patterns, and AI prompts.

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.

Details

  • Version
    1.0.0
  • Updated
    June 16, 2026
  • Offered by
    amodut
  • Size
    70.29KiB
  • Languages
    English
  • Developer
    Email
    amodut@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

Design Snap – Design Tokens, Tailwind & shadcn/ui Themes

5.0

Extract design tokens from any website, generate shadcn/ui & Tailwind themes, and inspect any element's CSS.

Design Token Extractor

5.0

Extract design system tokens (colors, spacing, typography) from any website

DESIGN.md Inspector

5.0

Auto-generate DESIGN.md and SKILL.md from any page's design system and use it with Claude, Codex and Cursor.

Brand Element Extractor

5.0

Extract colors, fonts, logos & brand elements from any website. Generate brand guidelines & AI prompts instantly.

DesignAssets - Extract Any Website's Design

5.0

Extract colors, fonts, images, SVGs, and CSS from any website. Build design systems in seconds.

Design Extractor

0.0

Extract and analyze website design systems using AI

UIDrop — Design System Extractor for AI

5.0

Extract any site's colors, fonts, spacing & components in one click. Send the design system to your AI coding assistant.

VisualDNA – Design System Extractor

0.0

Extract the complete visual design system of any site. Get colors, typography, components, and generate AI-ready prompts instantly.

DESIGN.md Generator

0.0

Extract any website's design system as DESIGN.md or SKILL.md — feed to Claude Code, Cursor, or Codex.

Yoink - Design Token & Style Extractor

5.0

Extract design tokens, colors, fonts, spacing, and styles from any website and export clean YAML for design systems and AI tools.

Design Analyzer - Extract Design Elements

0.0

Extract colors, fonts, spacing, shadows & effects from any website. Export to CSS, JSON, Figma, Sketch. One-click design analysis.

Design System Extractor

0.0

Extract a complete design system from any website — colors, typography, spacing, shadows, and more

Design Snap – Design Tokens, Tailwind & shadcn/ui Themes

5.0

Extract design tokens from any website, generate shadcn/ui & Tailwind themes, and inspect any element's CSS.

Design Token Extractor

5.0

Extract design system tokens (colors, spacing, typography) from any website

DESIGN.md Inspector

5.0

Auto-generate DESIGN.md and SKILL.md from any page's design system and use it with Claude, Codex and Cursor.

Brand Element Extractor

5.0

Extract colors, fonts, logos & brand elements from any website. Generate brand guidelines & AI prompts instantly.

DesignAssets - Extract Any Website's Design

5.0

Extract colors, fonts, images, SVGs, and CSS from any website. Build design systems in seconds.

Design Extractor

0.0

Extract and analyze website design systems using AI

UIDrop — Design System Extractor for AI

5.0

Extract any site's colors, fonts, spacing & components in one click. Send the design system to your AI coding assistant.

VisualDNA – Design System Extractor

0.0

Extract the complete visual design system of any site. Get colors, typography, components, and generate AI-ready prompts instantly.

Google apps