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

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