Deep extraction.
Any URL. Full system. Colors, type, spacing, motion, a11y, interactive states, exports.

How it works

Eight steps. No AI inference. No screenshot parsing. Reading what the browser actually rendered.

Consistency Score

Every extraction rates the design system's consistency across six dimensions. 0-100 per axis, averaged into an overall score. Helps you understand how systematic a design actually is before working with it.

Color Analysis

Clustering groups similar hex values by Euclidean distance in RGB space. Role inference assigns semantic labels based on lightness, saturation, and usage context. Harmony detection identifies the palette type (monochromatic, complementary, analogous, triadic). Pairing validation tests every fg/bg combination for WCAG AA/AAA compliance.

Grid System Detection

Spacing values from every padding, margin, and gap are tested against candidate base units (4px, 5px, 6px, 8px, 10px). The base with the highest adherence rate wins. Green bars = on grid. Red = off grid.

Interactive States

The cursor is programmatically moved over interactive elements. Style changes between default and hover states are captured as structured diffs. Hover the buttons below to see what designsnap records.

Motion & Animation

Transition durations, easing functions, animated properties, and @keyframes are extracted from stylesheets and computed styles. Builds a complete motion vocabulary for the design system.

Accessibility Audit

Contrast ratios tested against WCAG 2.1 for every text element. Heading order validated. Landmark elements counted. Form labels checked. ARIA attributes inventoried. Focus styles detected.

Export Formats

One extraction, five output formats. Use --all to generate everything at once.

Install

npm install -g designsnap

Programmatic API

import { snap } from "designsnap"

const result = await snap("https://example.com", {
  wait: 3000,
  extractDark: true,
  multiViewport: true,
  extractStates: true,
})

result.markdown                  // DESIGN.md (14 sections)
result.data.consistencyScore     // { overall: 82, color: 90, ... }
result.data.colorHarmony         // { type: "analogous", ... }
result.data.gridSystem           // { base: 8, adherence: 78 }
result.data.scaleRatio           // { name: "Major Third", ratio: 1.25 }
result.data.accessibility        // { contrastIssues: [...], ... }
result.data.motionSystem         // { durations: {}, easings: {} }
result.data.interactiveStates    // { hover: [...], focus: [...] }
result.exports.tailwind          // Tailwind config string
result.exports.css               // CSS variables string
result.exports.styleDictionary   // Style Dictionary JSON
result.exports.figmaTokens       // Figma Tokens JSON

Framework Detection

designsnap scans CSS custom property naming patterns, class conventions, and meta tags to identify what framework or design system library a site is built with. Detects Tailwind, Bootstrap, Material UI, Chakra UI, Ant Design, Radix, shadcn/ui, Foundation, and Bulma with confidence scores.

System Completeness

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 and a checklist.

Diff Mode

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

import { snapDiff } from "designsnap"

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

result.diffMarkdown              // structured diff as markdown
result.diffResult.summary        // { colorsAdded: 3, colorsRemoved: 1, ... }
result.diffResult.scores.overall // { a: 82, b: 75, delta: -7 }
result.diffResult.colors.added   // [{ hex: "#ff0000", role: "error" }]
result.diffResult.gridSystem     // { a: "8px (78%)", b: "4px (85%)" }

The diff covers colors, fonts, spacing, radii, shadows, components, breakpoints, grid system, consistency scores, and accessibility changes.

Disclaimer