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.
このスキルについて
Extract a public website’s colors, typography and other design primitives into starter JSON and CSS tokens.
おすすめする理由
Start a project from observed design tokens or inspect a site’s visual primitives.
役立つこと
- 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.
使う前に
- Requires Node.js, the extraction CLI and Playwright Chromium; the target site must be reachable.
資料・参照元
元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。