skillui
Installation
SKILL.md
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
| Mode | Command | Use When |
|---|---|---|
| URL (static) | npx skillui --url <url> |
Fast extraction — HTML/CSS/fonts/colors |
| URL (ultra) | npx skillui --url <url> --mode ultra --screens 10 |
Full extraction with screenshots, animations, interactions. Requires Playwright. |
| Local directory | npx skillui --dir ./path/to/project --name "ProjectName" |
Scan a local Next.js/React/Tailwind project |
| Public repo | npx skillui --repo https://github.com/user/repo |
Clone and analyze any public GitHub repo |