extract-design

Featured

Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dembrandt. Runs a headless browser against the URL and returns real computed values from the DOM. Use when you need a site's actual design tokens, want to reverse-engineer a visual design, or need to seed a design system from an existing product.

Web & Frontend 61 stars 10 forks Updated today MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
60
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Extract Design — Dembrandt Dembrandt runs a headless Chromium browser against any URL, walks up to thousands of DOM elements, reads computed CSS, and returns a structured design system: colors with confidence scoring, typography styles, spacing scale, border radius, borders, shadows, and interactive component styles. ## How to Run ```bash # Zero-install — npx fetches the package on first run (lowest friction) npx -y dembrandt https://dembrandt.com # Or install once (global), then call `dembrandt` directly npm i -g dembrandt # Basic extraction — outputs to terminal dembrandt https://dembrandt.com # JSON output — pipe into files or other tools dembrandt https://dembrandt.com --json-only > dembrandt-tokens.json # W3C DTCG format (design-tokens.org standard) dembrandt https://dembrandt.com --dtcg --save-output # Generate DESIGN.md (human + AI readable brand doc) dembrandt https://dembrandt.com --design-md # Multi-page crawl (follows internal links) dembrandt https://dembrandt.com --crawl 5 # Dark mode colors dembrandt https://dembrandt.com --dark-mode # Mobile viewport dembrandt https://dembrandt.com --mobile # Everything saved to output/ dembrandt https://dembrandt.com --save-output # Tailwind v4 @theme CSS — observed values only [dembrandt 0.28+] dembrandt https://dembrandt.com --tailwind src/app.css # Self-contained HTML report — open offline or attach as a CI artifact [dembrandt 0.19+] dembrandt https://dembrandt.com --html report.html # Drift gate — compar...

Details

Author
dembrandt
Repository
dembrandt/dembrandt-skills
Created
5 months ago
Last Updated
today
Language
JavaScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category