Deep design system extraction from any live URL.

npx designsnap https://example.com --all

Point it at any website. Get back a structured DESIGN.md with colors, typography, spacing, shadows, component patterns, motion system, accessibility audit, interactive states, responsive breakpoints, and a design consistency score. Export to Tailwind, CSS variables, Style Dictionary, or Figma Tokens in one command.

This project is for educational and experimental purposes only. It reads publicly visible computed CSS values from rendered web pages. No ownership of any visual identity is claimed. See Disclaimer.

1. Load — Puppeteer opens the page in a headless browser
2. Wait — Dynamic content and fonts render
3. Scan — Every visible DOM element's computed styles are extracted
4. Parse — CSS custom properties, @font-face, @keyframes, and @media rules from stylesheets
5. Simulate — Hover and focus states triggered on interactive elements
6. Cluster — Similar colors grouped by Euclidean distance, spacing aligned to grid
7. Score — Design consistency rated across 6 dimensions
8. Output — Structured DESIGN.md + optional exports in 4 formats

npm install -g designsnap

Or run directly:

npx designsnap https://example.com

# Basic extraction
designsnap https://example.com

# Everything: preview, all export formats, dark mode, responsive
designsnap https://example.com --all --preview --dark --responsive

# Just Tailwind config
designsnap https://example.com --tailwind

# CSS variables file
designsnap https://example.com --css

# Style Dictionary tokens
designsnap https://example.com --tokens

# Figma Tokens (Tokens Studio compatible)
designsnap https://example.com --figma

# Skip hover/focus state extraction (faster)
designsnap https://example.com --no-states

# Custom output path and wait time
designsnap https://example.com -o ./docs/design.md --wait 5000

Every extraction includes a design consistency score (0-100) across six dimensions:

• Color — fewer distinct colors = more disciplined palette
• Typography — fewer font families = more cohesive type system
• Spacing — adherence to a base grid (4px, 8px, etc.)
• Border Radius — fewer distinct values = more systematic
• Shadows — fewer shadow levels = more structured elevation
• Accessibility — contrast issues found

Beyond consistency, designsnap checks 20 criteria that define a complete design system: color roles, font pairs, type scale, heading hierarchy, spacing grid, component variants, motion tokens, dark mode, responsive breakpoints, focus styles, CSS variables, and icon system. You get a percentage score and a checklist of what's present and what's missing.

Automatically identifies CSS frameworks and design system libraries by scanning CSS custom property naming patterns, class naming conventions, and meta tags. Detects Tailwind CSS, Bootstrap, Material UI, Chakra UI, Ant Design, Radix UI, shadcn/ui, Foundation, and Bulma with confidence scores.

Compare two design system extractions side by side. Useful for competitive analysis, redesign tracking, or detecting design drift between environments.

import { snapDiff } from "designsnap";

const result = await snapDiff("https://site-a.com", "https://site-b.com");

result.diffMarkdown    // structured diff as markdown
result.diffResult      // colors added/removed, score deltas, font changes
result.a               // full extraction of site A
result.b               // full extraction of site B

import { snap } from "designsnap";

const result = await snap("https://example.com", {
  wait: 3000,
  extractDark: true,
  multiViewport: true,
  extractStates: true,
  onProgress: (msg) => console.log(msg),
});

result.markdown         // DESIGN.md content
result.preview          // preview.html content
result.data             // structured JSON
result.exports.tailwind // Tailwind config string
result.exports.css      // CSS variables string
result.exports.styleDictionary  // Style Dictionary JSON string
result.exports.figmaTokens      // Figma Tokens JSON string

Individual export functions are also available:

import { toTailwindConfig, toCSSVariables, toStyleDictionary, toFigmaTokens } from "designsnap";

• Extracts what's visible at page load. Complex SPA routes need individual runs
• Pages behind authentication can't be crawled without session cookies
• Interactive state simulation covers the first 8 interactive elements found
• Component detection uses heuristics, not DOM framework analysis
• Responsive extraction adds ~3 seconds per additional viewport

This tool is provided strictly for educational and experimental purposes. It reads publicly visible computed CSS values from rendered web pages, equivalent to what any browser's developer tools expose.

• No proprietary code, assets, or non-public information is accessed
• Extracted design tokens represent publicly visible styling
• No ownership of any visual identity, brand, or design system is claimed
• Users are responsible for ensuring compliance with applicable terms of service
• This tool does not bypass any access controls, authentication, or rate limiting
• Output should not be used to create confusingly similar products or infringe on trademarks

The author provides this tool as-is with no warranty. Use responsibly.

MIT