extract-design-system
Installation
Summary
Reverse-engineer design tokens from public websites into starter token files for your project.
- Extracts color palettes, typography, spacing, radius, and shadow scales from a target URL using Playwright
- Generates normalized JSON output and CSS token files ready for local project integration
- Offers extraction-only mode to review raw primitives before generating starter assets, or init-only mode to regenerate tokens from existing extraction data
- Includes safety checks: confirms public URL reachability, requires explicit confirmation before modifying existing design systems or app code, and sets clear expectations that results are initialization aids, not pixel-perfect reproductions
SKILL.md
Extract Design System
Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.
Before You Start
Ask for:
- the target public website URL
- whether the user wants extraction only or starter files too
Set expectations:
- this v1 extracts tokens and starter assets, not a full component library
- results are useful for initialization, not pixel-perfect reproduction
- do not overwrite an existing design system or app styling without confirmation
Workflow
Related skills
More in Design & UI
frontend-design
Comprehensive frontend design patterns and visual polish guidance
anthropics/skillsweb-design-guidelines
Vercel's Web Interface Guidelines covering spacing, typography, interaction, and accessibility
vercel-labs/agent-skillsvercel-composition-patterns
React composition patterns for flexible, scalable UI component architecture
vercel-labs/agent-skillsui-ux-pro-max
Advanced UI/UX patterns for complex interfaces and interaction design
nextlevelbuilder/ui-ux-pro-max-skillsleek-design-mobile-apps
Mobile-first design principles for iOS and Android app interfaces
sleekdotdesign/agent-skills