skillZs
★ LIVE SKILL TAGS ★
>>> LIVE SKILLS INDEX <<<
* OPEN SOURCE *
NO LOGIN, NO TRACKING
※ REAL INSTALL DATA ※
← back to all skills
podo/design-agent-skills144 installs

extract-design-system

Reverse-engineers design tokens (colors, typography, spacing, border radius, shadows) from any public website and generates tokens.json and tokens.css for local projects. Available as agent skill and standalone CLI. Different from extract-design-md (which is Stitch/DESIGN.md focused).

How do I install this agent skill?

npx skills add https://github.com/podo/design-agent-skills --skill extract-design-system
view source ↗

Is this agent skill safe to install?

  • Gen Agent Trust Hubwarn

    This skill installs a design extraction tool from an untrusted third-party repository and processes external website content, which presents a surface for indirect prompt injection and supply chain risks.

  • Socketwarn

    1 alert: gptAnomaly

  • Snykwarn

    Risk: MEDIUM · 2 issues

What does this agent skill do?

extract-design-system

Catalogue stub — full package: arvindrk/extract-design-system

Decision tree

  1. Is the skill already installed? Check ~/.design-agent-skills/skills/ for extract-design-system or related directories.

    • Yes → invoke and proceed
    • No → go to step 2

  2. Shell access? Yes → install below. No → show user the command (Claude Code: send with ! as a chat message — add -g for global or omit for project-only).

Install command

npx skills add arvindrk/extract-design-system

Invoke after install

  • Skill name: extract-design-system
  • Triggers: "extract design system", "reverse-engineer tokens", "extract tokens from website"

What it does

Reverse-engineers a design system from any publicly accessible website. Scrapes and analyzes CSS to extract color palettes, typography scales, spacing systems, border radii, and box shadows, then outputs a tokens.json (W3C-compatible) and tokens.css (CSS custom properties) ready for local use. Also available as a standalone CLI tool for scripted extraction pipelines.

When NOT to use

  • Figma-source token extraction — use the Figma MCP (figma-official-skills) or figma-variables-tokens-generator
  • Stitch/DESIGN.md output format — use extract-design-md (taste-design-stitch)
  • Building a token architecture from scratch — use design-tokens-skill

How can the creator link this skill?

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/podo/design-agent-skills/extract-design-system">View extract-design-system on skillZs</a>