SWSkillsWay.ai
View Repo ↗
Skillset · / arvindrk / extract-design-system

arvindrkarvindrk/extract-design-system

PurposeA focused agent-skill set that reverse-engineers starter design tokens from any public website. It bundles a CLI-driven workflow that extracts colors, typography, spacing, border radius, and shadows, then normalizes them into W3C-compatible tokens.json and tokens.css for local projects. Designed for Claude, Cursor, and Codex, it gives coding agents a repeatable, safe extraction method with summarization before broader styling changes. Ideal for bootstrapping a project's design system from existing sites.
Skill Count
1
Required CLI
extract-design-systemplaywright
Domains
Design
Forms
Cli ManualWorkflow
Skillset Analysis

Core Idea

Principles & Methodology

The author's design philosophy, what sets this apart from peer projects, and quick notes on the key workflows. Skill names mentioned in the text auto-link to their detail pages.

Core Idea

The extract-design-system skill provides a repeatable, agent-driven workflow to reverse-engineer design tokens (colors, typography, spacing, radius, shadows) from any public website and emit starter tokens.json and tokens.css for a local project.

Design Principles

  • Skills-first: the installable skill wraps a bundled CLI that does the real extraction.
  • Safe by default: asks before modifying existing app code; public sites only.
  • Model-agnostic: works in Claude, Cursor, Codex via skill or MCP server.

Workflow

  1. Confirm target is public/reachable
  2. Run bundled CLI extraction → .extract-design-system/raw.json
  3. Normalize → normalized.json
  4. Generate design-system/tokens.json + tokens.css
  5. Summarize findings; ask before broader changes

Best Practice

Use for project initialization only; review generated tokens as untrusted output before adoption.

Skill Relationships

Usage Relationships Between Skills

Skill → Skill usage relationships, with cross-layer references. Same color blocks indicate the same skill form.

Relationship Count
0
Standalone Skills
1
Most Referencing
No relationships
Most Referenced
No relationships

Note: Each dependency line reads as "the current Skill depends on" the Skill it points to.

SkillsWay.ai · Heads-Up Agent Skills InspectorUnderstand Agent Skills before you install.

Skill Composition

How skills in this set are triggered

Each skill is designed for a specific kind of caller — some only fire when you name them, others load automatically when the model judges them relevant. The split below summarises both modes at a glance.

User-Invoked0

These skills only fire when you call them by name. The agent will not load them on its own — they stay inert until invoked.

No skill in this set is recommended for manual invocation.

Model-Invoked1

These skills are loaded automatically by the agent when it judges the context relevant. You usually don't need to call them yourself.

extract-design-system

Skill List

1 Skills · Filter by name or domain

extract-design-system

Extracts design primitives (colors, fonts, spacing) from a public website via CLI and generates starter token files (JSON/CSS) for your project. Key method: run extract-design-system with Playwright. Value: quick design system bootstrapping without building from scratch.

→
Domain
Design
Form
Cli ManualWorkflow
Location
skills/extract-design-system/SKILL.md

Showing 1 / 1

Installation

One command to install the entire Skillset.

Copy and run in your terminal to add arvindrk/extract-design-system to your Agent environment.

$npx skills add arvindrk/extract-design-system