看到一个好看的网站想照着做，光提取配色、字体、间距就得翻半天 CSS。

SkillUI 给它一个网址，能把整套设计系统自动扒下来。

配色、字体、间距、动画、组件截图，打包成 Claude Code 能直接读的 Skill。

GitHub：http://github.com/amaancoderx/npxskillui…

打开输出文件夹启动 Claude，说照这个风格做就行，设计细节已经全在里面了。

还支持 Ultra 模式，用 Playwright 做完整视觉提取，滚动截图、交互状态、动画检测都能抓到。

想快速复刻某个网站的视觉风格，这个工具挺省事。

amaancoderx/npxskillui

Source: https://github.com/amaancoderx/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         # 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 <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

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

Version History

How It Works

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, .jsx for 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 @keyframes from document.styleSheets, capture hover/focus state diffs, fingerprint DOM components

Requirements

• Node.js 18+
• For --mode ultra: Playwright (npm install playwright && npx playwright install chromium)

Links

• npm package
• Landing page
• Source code
• Issues

License

MIT - built by Amaan