extract-design
FeaturedExtract 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.
Install
Quality Score: 88/100
Skill Content
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
extract-design
Extract the full design language from any public website URL with designlang (colors, typography, spacing, radii, shadows, gradients, components, breakpoints, motion, WCAG score). Use when the user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', or when the design-system skill needs raw data from a reference site.
design-extract
Extract a website's design system (colors, typography, spacing, buttons) and populate the brand guide. Trigger with /design-extract or when the user mentions 'extract design,' 'pull brand from website,' 'design tokens from site,' 'scrape brand colors,' or 'extract visual identity.' Requires Node 20+ and installs designlang globally if not present.
design-system
Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.