mcpField
E
extract-design-system

extract-design-system

github.com/podoDesign & UI30172 installsUpdated 4d ago
Repository

About extract-design-system

extract-design-system is a skill for agents that derives starter design tokens and assets from a public website. It outputs token JSON and CSS files, and asks before modifying existing app code or styles.

Key features

  1. 01Extracts colors, fonts, spacing, radius, and shadow scales
  2. 02Crawls sites with headless Chromium
  3. 03Writes normalized and raw token JSON
  4. 04Generates W3C-style tokens and CSS variables
  5. 05Requests approval before changing app code

Use cases

  1. 01Initialize a project’s design tokens from a public website
  2. 02Inspect a site’s visual styles as a starting point

Install

Copy the command and run it in a terminal.

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

After installing, type/extract-design-systemin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

extract-design-system

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

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/extract-design-system/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/extract-design-system/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as extract-design-system, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/extract-design-system ] && echo "global" || echo "project"

    Global:

    npx skills add arvindrk/extract-design-system --skill extract-design-system -g -y

    Project:

    npx skills add arvindrk/extract-design-system --skill extract-design-system -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • Requires: Node.js with npx and network access (at use time the skill runs npx playwright install chromium and the extract-design-system npm package)
  • License: MIT

Invoke after install

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

What it does

Reverse-engineers starter design tokens from a public website URL. The skill has the agent run the extract-design-system CLI (a headless Chromium crawl) and then summarise what it found: likely primary, secondary and accent colors, detected fonts, and the spacing, radius and shadow scales. It writes .extract-design-system/raw.json and normalized.json, plus a W3C-style design-system/tokens.json and a design-system/tokens.css of CSS custom properties. It extracts tokens and starter assets, not a component library, and it asks before changing any existing app code or styles. Results are good for initialising a project, not pixel-perfect reproduction.

When NOT to use

  • Figma-source token extraction → use the Figma MCP (figma-official-skills) or figma-variables-tokens-generator
  • A DESIGN.md spec document rather than token files → use extract-design-md
  • Building a token architecture from scratch → use design-tokens-skill

Comments

Markdown supported