v1.3.2  ·  pure static analysis  ·  no API keys

Reverse-engineer any
design system.

Point skillui at any URL, repo, or folder. Get exact colors, fonts, spacing, components, animations, and scroll journeys packaged as a .skill file. Then open Claude Code and build the UI.

$npm install -g skillui
$skillui --url https://yoursite.com --mode ultra

No API keys. No AI. No cloud. Pure static analysis.

See it in action

Watch skillui extract a full design system from a live website and then have Claude Code generate a matching UI from it in seconds.

skillui --url https://notion.com --mode ultra

Ultra mode: colors · fonts · scroll journey · keyframes · components · layout · interactions

How it works

01

Run skillui on any source

bash
# Website
skillui --url https://linear.app --mode ultra
# Local project
skillui --dir ./my-app
# Git repo
skillui --repo https://github.com/org/repo

Crawls the site, extracts every design token, takes scroll screenshots, and packages everything into a project folder.

02

You get a complete design folder

notion-design/
notion-design/Your project output folder
├SKILL.mdMaster reference — all files embedded inline
├CLAUDE.mdAuto-read by Claude Code on folder open
├DESIGN.mdColors, typography, spacing
├notion-design.skillZIP package auto-installed to /skills
├references/
│ ├ANIMATIONS.mdCSS keyframes, scroll triggers, motion libs
│ ├LAYOUT.mdFlex/grid containers, page structure
│ ├COMPONENTS.mdDOM patterns, HTML fingerprints
│ ├INTERACTIONS.mdHover/focus state diffs
│ ├VISUAL_GUIDE.mdAll screenshots in sequence
├screens/
│ ├scroll/7 cinematic scroll journey screenshots
│ ├pages/Full-page screenshots per URL
│ ├sections/Clipped section screenshots
│ ├states/Hover/focus state screenshots
├tokens/
│ ├colors.jsonAll extracted colors
│ ├spacing.jsonSpacing scale
│ ├typography.jsonFont families, sizes, weights
├fonts/Google Fonts bundled as woff2
├screenshots/Homepage screenshot
03

Open Claude Code and build the UI

terminal
# Open Claude Code inside the output folder
cd notion-design && claude
# Then ask:
"Build me a UI that matches this design system"
# Claude reads CLAUDE.md + SKILL.md automatically
# and generates your UI as an HTML file

Claude reads CLAUDE.md and SKILL.md automatically when you open the folder. It generates a matching HTML file with exact colors, fonts, spacing, and animations.

Extraction modes

Default mode

fast

No Playwright required. Fetches HTML and CSS via HTTP and extracts all design tokens statically.

  • ✓ CSS colors and fonts
  • ✓ Spacing and grid tokens
  • ✓ Component patterns
  • ✓ JSON token files
  • ✓ No browser needed
$skillui --url https://yoursite.com

Ultra mode

cinematic

Requires Playwright. Launches a real browser and captures everything including scroll journey, interactions, and animations.

  • ✓ Everything in default mode
  • ✓ Full-page and section screenshots
  • ✓ 7 scroll journey frames
  • ✓ CSS keyframe extraction
  • ✓ Animation lib detection (GSAP, Lottie...)
  • ✓ Hover and focus state diffs
  • ✓ DOM component fingerprinting
  • ✓ Flex and grid layout extraction
  • ✓ Video background capture
$skillui --url https://yoursite.com --mode ultra

Command reference

flagdescription
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 ultraEnable cinematic extraction mode
--screens <n>Pages to crawl in ultra mode (default: 5, max: 20)
--out <path>Output directory (default: ./)
--name <string>Override the project name
--format <format>Output format: design-md, skill, or both
--no-skillOutput DESIGN.md only, skip .skill packaging

What you get

Design tokens

Every color, font, spacing value, border radius, and breakpoint extracted as CSS variables and JSON.

Motion specs

Full CSS keyframes, GSAP/Lottie/Three.js detection, scroll triggers, transition timings.

Scroll journey

7 screenshots at each scroll depth showing exactly how the page animates as you scroll.

Component map

DOM patterns, class fingerprints, hover states, focus rings and interaction diffs.

Layout system

Every flex/grid container with alignment, gap, padding, and responsive breakpoints.

Font bundles

Google Fonts downloaded locally into the .skill ZIP so Claude has them offline.

CLAUDE.md included

Output folder includes CLAUDE.md so Claude Code picks up the design system automatically when you cd in.

Full SKILL.md

All reference files embedded inline so Claude has full context the moment you open the folder.

Zero config

No API keys, no AI, no cloud. Pure static analysis that works on any site or codebase.

Get started

Clone any design system in one command.

Install once, use on any website, repo, or local project. Claude gets the full design context automatically.

$npm install -g skillui
View on GitHub