npxskillui
amaancoderx · amaancoderx/npxskillui
A CLI tool that extracts design systems from URLs or codebases into format Claude Code can automatically read and use.
Preview
What you can do with it
- Replicate the look and feel of a landing page by pointing the tool at a URL.
- Sync Claude's UI generation with an existing private design system in a local repo.
- Extract typography and color tokens from a site to use as a baseline for a new project.
Safety check
Usable, but read the notes first.
- ●No clear license: check with the author before using it in a commercial product.
Automated scan of the repo files. Always review code you run.
From the README
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 |