Reverse-engineer any design system into a Claude-ready skill.
Pure static analysis. No AI. No API keys.
DEMO.VIDEO.6.mp4
SkillUI is a CLI that crawls any website, git repo, or local codebase and extracts its complete design system - colors, typography, spacing, animations, components, screenshots - packaged into a folder Claude Code reads automatically.
Open the output folder, type claude, and ask Claude to build your UI. It already knows the exact design system.
npm install -g npxskilluiRequires Node.js 18+
For ultra mode (full visual extraction with Playwright):
npm install playwright
npx playwright install chromium# 1. Extract a design system from any URL
skillui --url https://notion.so
# 2. Open the output folder in Claude Code
cd notion-design && claude
# 3. Ask Claude to build your UI
"Build me a landing page that matches this design system"Claude automatically reads CLAUDE.md and SKILL.md - no manual setup needed. It uses the extracted colors, typography, spacing, components, animations, and screenshots to generate an HTML file matching the exact visual language of the site.
Extracts HTML, CSS, fonts, color tokens, spacing, and typography. Works on any site, no browser required.
skillui --url https://linear.appUses Playwright to capture scroll screenshots, interaction diffs, animation detection, layout analysis, and DOM component fingerprinting.
Cookie/consent banners (Cookiebot, OneTrust, Osano, TrustArc, …) are automatically dismissed before capture, so screenshots and extracted tokens reflect the real page — not a consent overlay.
skillui --url https://linear.app --mode ultraScans .css, .scss, .ts, .tsx, .js, .jsx for design tokens, Tailwind config, CSS variables, and component patterns.
skillui --dir ./my-appClones any public git repository and runs dir mode automatically.
skillui --repo https://github.com/org/repo| Feature | Default | Ultra |
|---|---|---|
| Color tokens (CSS vars + JSON) | ✅ | ✅ |
| Typography scale | ✅ | ✅ |
| Spacing grid | ✅ | ✅ |
| Google Fonts bundled locally | ✅ | ✅ |
CLAUDE.md + SKILL.md auto-generated |
✅ | ✅ |
.skill ZIP packaged |
✅ | ✅ |
| 7 scroll journey screenshots | ✅ | |
| Hover / focus interaction diffs | ✅ | |
| CSS keyframes + animation detection | ✅ | |
| Flex/grid layout extraction | ✅ | |
| DOM component fingerprinting | ✅ | |
| Cookie / consent overlay auto-dismiss | ✅ | ✅ |
notion-design/
├── notion-design.skill # Packaged .skill ZIP (contains everything)
├── SKILL.md # Master skill file (auto-loaded by Claude)
├── CLAUDE.md # Claude Code project context
├── DESIGN.md # Full design system tokens
├── references/
│ ├── ANIMATIONS.md # Motion specs and keyframes
│ ├── LAYOUT.md # Layout containers and grid
│ ├── COMPONENTS.md # DOM component patterns
│ ├── INTERACTIONS.md # Hover/focus state diffs
│ └── VISUAL_GUIDE.md # All screenshots embedded in sequence
├── screens/
│ ├── scroll/ # 7 scroll journey screenshots
│ ├── pages/ # Full-page screenshots (ultra)
│ └── sections/ # Section clip screenshots (ultra)
├── tokens/
│ ├── colors.json
│ ├── spacing.json
│ └── typography.json
└── fonts/ # Bundled Google Fonts (woff2)
skillui --url <url> Crawl a live website
skillui --dir <path> Scan a local project directory
skillui --repo <url> Clone and scan a git repository
--mode ultra Enable cinematic extraction (requires Playwright)
--screens <n> Pages to crawl in ultra mode (default: 5, max: 20)
--out <path> Output directory (default: ./)
--name <string> Override the project name
--format design-md|skill|both Output format (default: both)
--no-skill Output DESIGN.md only, skip .skill packaging
# Full ultra extraction - Nothing.tech
skillui --url https://nothing.tech --mode ultra --screens 10
# Scan a local Next.js app
skillui --dir ./my-nextjs-app --name "MyApp"
# Clone and analyze a public repo
skillui --repo https://github.com/vercel/next.js --name "Next.js"
# Output only DESIGN.md, no .skill packaging
skillui --url https://stripe.com --format design-md
# Save to a specific directory
skillui --url https://linear.app --out ./design-systems| Package | npmjs.com/package/npxskillui |
| Latest version | 1.0.0 |
| Based on | skillui 1.3.4 (upstream) |
| License | MIT |
| Original author | Amaan Khan |
| Fork maintainer | wingerter |
| Homepage | npxskillui.vercel.app |
| Issues | GitHub Issues |
| Version | Notes |
|---|---|
1.0.0 ⬅ latest |
Initial fork release. Adds automatic cookie/consent-banner dismissal (Cookiebot, OneTrust, Osano, TrustArc) before capture. Based on upstream skillui 1.3.4. |
Upstream skillui release history: amaancoderx/npxskillui.
SkillUI uses pure static analysis. No AI, no API keys, no cloud - everything runs locally.
- URL mode - fetches HTML, crawls all linked CSS files, extracts computed styles via Playwright DOM inspection
- Dir mode - scans
.css,.scss,.ts,.tsx,.js,.jsxfor design tokens, Tailwind config, CSS variables, and component patterns - Repo mode - clones the repo to a temp directory and runs dir mode
- Ultra mode - runs Playwright to capture scroll screenshots, detect animation libraries from
window.*globals, extract@keyframesfromdocument.styleSheets, capture hover/focus state diffs, fingerprint DOM components
Whenever a page is loaded in a browser (URL and ultra modes), a page-init hook removes known cookie/consent (CMP) banner nodes as they appear — via a MutationObserver that re-removes on re-injection — so the captured page is the real design, not a consent overlay. Pure client-side DOM pruning: no clicks, no network, no page-data reads.
- Node.js 18+
- For
--mode ultra: Playwright (npm install playwright && npx playwright install chromium)
MIT — see LICENSE.
npxskillui is a fork of skillui, originally
created by Amaan Khan (@amaancoderx) and extended with
automatic cookie/consent-banner dismissal. Original work © Amaan Khan; fork modifications
© wingerter / MindBlow Media. Both under the MIT License.