design-system
Installation
SKILL.md
This skill extracts a complete design system from a live website using browser automation. It navigates the rendered DOM, captures every visual design decision, and outputs ready-to-use design tokens that plug directly into the frontend-design skill.
The user provides: the URL of the website to extract from, and optionally the output directory (default: design-system/).
Why Extract a Design System
Manually inspecting DevTools to extract colors, fonts, spacing, and other design tokens is slow and error-prone. When rebuilding a site or building a demo that must match a client's existing brand, you need every visual decision captured accurately:
- Colors — not just the primary brand color, but every neutral, accent, and semantic color in use
- Typography — exact font families, sizes for each heading level, weights, line heights
- Spacing — the rhythm of padding and gaps that makes a design feel cohesive
- Components — button styles, card radii, shadow depths that define the UI language
This skill automates the full extraction in minutes instead of hours.