npxskillui

Reverse-engineer any design system into a Claude-ready skill.Pure static analysis. No AI. No API keys.

---

One-shotted Notion's landing page in minutes with a single line prompt

https://github.com/user-attachments/assets/4d6b63f1-8042-44a2-8f4f-a92fedadcaf9

---

What is SkillUI?

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.

---

Install

npm install -g skillui

Requires Node.js 18+

For ultra mode (full visual extraction with Playwright):

npm install playwright
npx playwright install chromium

---

Quick Start

# 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.

---

Modes

Default mode - pure static analysis

Extracts HTML, CSS, fonts, color tokens, spacing, and typography. Works on any site, no browser required.

skillui --url https://linear.app

Ultra mode - full cinematic extraction

Uses Playwright to capture scroll screenshots, interaction diffs, animation detection, layout analysis, and DOM component fingerprinting.

skillui --url https://linear.app --mode ultra

Dir mode - local project scan

Scans .css, .scss, .ts, .tsx, .js, .jsx for design tokens, Tailwind config, CSS variables, and component patterns.

skillui --dir ./my-app

Repo mode - clone and scan

Clones any public git repository and runs dir mode automatically.

skillui --repo https://github.com/org/repo

---

What You Get

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		✅

---

Output Structure

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)

---

All Flags

skillui --url <url>           Crawl a live website
skillui --dir           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                   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

---

Examples

# 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 Info

Package	npmjs.com/package/skillui
Latest version	1.3.4
First published	April 8, 2026
Last updated	April 10, 2026
License	MIT
Author	Amaan
Homepage	skillui.vercel.app
Issues	GitHub Issues

Version History

View all 25 releases

Version	Released
1.3.4 ⬅ latest	May 8, 2026
1.3.3	May 8, 2026
1.3.2	April 10, 2026
1.3.1	April 10, 2026
1.3.0	April 10, 2026
1.2.9	April 10, 2026
1.2.8	April 10, 2026
1.2.7	April 10, 2026
1.2.6	April 10, 2026
1.2.5	April 10, 2026
1.2.4	April 10, 2026
1.2.3	April 10, 2026
1.2.2	April 10, 2026
1.2.1	April 9, 2026
1.2.0	April 9, 2026
1.1.9	April 9, 2026
1.1.8	April 9, 2026
1.1.7	April 9, 2026
1.1.6	April 9, 2026
1.1.5	April 9, 2026
1.1.4	April 8, 2026
1.1.3	April 8, 2026
1.1.2	April 8, 2026
1.1.1	April 8, 2026