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.
Über diesen Skill
Extract a public website’s colors, typography and other design primitives into starter JSON and CSS tokens.
Warum wir es empfehlen
Start a project from observed design tokens or inspect a site’s visual primitives.
Wobei es hilft
- 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.
Vor der Nutzung
- Requires Node.js, the extraction CLI and Playwright Chromium; the target site must be reachable.
Quellen und Referenzen
Die Originalquellen sind unten verlinkt. Praktische Einstiegsideen sind redaktionelle Vorschläge von SkillHey.