Install and use Extract Design System
Install the Skill
Run the upstream command in your project, then follow the author’s setup guide and any requirements below.
npx skills add arvindrk/extract-design-systemGive your agent a task
Provide the relevant files, context and constraints. For example:
Extract colors, typography and other available design tokens from this public URL into starter JSON and CSS.
About this Skill
Extract a public website’s colors, typography and other design primitives into starter JSON and CSS tokens.
Why we picked it
Start a project from observed design tokens or inspect a site’s visual primitives.
What it helps with
- Start a project from observed design tokens or inspect a site’s visual primitives.
Usage and limitations
The extraction is a starting point, not a complete component library or a pixel-perfect reproduction.
Alternatives and related workflows
Create DESIGN.md: documented design guidance
For starter JSON and CSS tokens from a public site use Extract Design System. For an evidence-based DESIGN.md from a project or rendered website, consider Create DESIGN.md; the outputs differ.
Before you use it
- Requires Node.js, the extraction CLI and Playwright Chromium; the target site must be reachable.
Sources & references
Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.