SkillUI — Design System Extractor

Extracts design systems from live websites, local projects, or public repos into Claude-readable files (SKILL.md, DESIGN.md, token JSON). Use this before building any UI when you want to match an existing site's visual language.

When to Use

• User provides a URL and wants to match or clone its design style
• User wants to extract colors, fonts, spacing from an existing site
• User has a local project or repo and wants its design tokens extracted
• User says "pull the design from", "match this site", "get the tokens from", "extract styles from"

Modes

Workflow

Step 1 — Run the extractor

# Basic (recommended first try)
npx skillui --url https://example.com

# With output folder
npx skillui --url https://example.com --out ./design-systems/example

# Ultra mode (full extraction with screenshots)
npx skillui --url https://example.com --mode ultra --screens 10

Step 2 — Open the output in Claude Code

The generated folder contains:

• SKILL.md / CLAUDE.md — Claude reads these automatically when you open the folder
• DESIGN.md — Full design system documentation
• tokens/colors.json, tokens/spacing.json, tokens/typography.json
• screens/ — Screenshots (ultra mode only)
• fonts/ — Bundled Google Fonts (woff2)

Open the generated folder:

cd <generated-folder-name> && claude

Or reference the DESIGN.md directly in the current session by reading it with the Read tool.

Step 3 — Use the design system

Once the output is generated, read the token files and DESIGN.md into context, then apply them when building UI. Pass the relevant tokens to the frontend-design skill and ui-ux-pro-max design system generator.

Notes

• No API keys or cloud dependencies — runs entirely locally
• For ultra mode, Playwright must be installed: npm install playwright && npx playwright install chromium
• Output folder name is auto-derived from the site/repo name
• The .skill ZIP archive in the output can be shared or archived