The Problem

Design handoff to AI coding tools is lossy. A developer who wants Claude Code to build UI that matches an existing site has to manually paste colors, fonts, spacing, and component patterns into context, or accept generic output that ignores the target's visual language. That workflow breaks down at any real scale—a marketing site, a design-heavy app, a repo with hundreds of components.

What This Does

npxskillui is a TypeScript CLI that reverse-engineers a design system from a live URL, a git repo, or a local codebase and packages it into a folder Claude Code reads automatically. No AI and no API keys are involved; extraction is pure static analysis, with an optional Playwright-backed "ultra" mode for visual capture.

The output is a self-contained bundle: SKILL.md, CLAUDE.md, DESIGN.md, a references/ directory with animation, layout, and component specs, and a .skill ZIP. The user opens that folder, runs claude, and asks for UI—Claude already has the design tokens in context.

How It Is Wired

Execution starts at src/cli.ts, the single entry point. It routes to one of four mode handlers in src/modes/: url.ts (default static crawl), ultra.ts (Playwright), dir.ts (local scan), and repo.ts (clone + dir scan). Each mode calls extractors in src/extractors/, which split by concern: tokens/ handles color and typography (CSS variables, Tailwind config, computed values, HTTP-fetched CSS), ultra/ handles animations, DOM component fingerprinting, interactions, layout, and page screenshots. src/font-resolver.ts downloads Google Fonts locally; src/screenshot.ts drives the browser in ultra mode; src/playwright-loader.ts loads the browser.

Extraction results flow to src/writers/, where skill.ts assembles the master SKILL.md and CLAUDE.md, and the per-domain writers (design-md.ts, animations-md.ts, layout-md.ts, components-md.ts, interactions-md.ts, tokens-json.ts) emit the reference docs. The blast radius is concentrated in src/modes/url.ts and src/writers/skill.ts: everything routes through them, and changing the output contract means touching both. The module graph shows no hub-and-cycle problem—the flow is linear from CLI → mode → extractor → writer.

Effects on the outside world: network fetches for CSS and fonts, a cloned git repo in repo mode, filesystem writes to the output directory, and (ultra mode only) a Chromium browser session.

How To Use It

Setup: Requires Node.js 18+. Install globally:

npm install -g skillui

For ultra mode, install Playwright and its Chromium browser:

npm install playwright
npx playwright install chromium

Running it: The CLI entry point is src/cli.ts, exposed as the skillui binary:

skillui --url https://notion.so
skillui --url https://linear.app --mode ultra
skillui --dir ./my-app
skillui --repo https://github.com/org/repo

Then cd notion-design && claude and ask for UI. No environment variables are documented in the repo.

Real-World Use

A team rebuilding a landing page to match an existing marketing site runs skillui --url https://notion.so --mode ultra, opens the output folder in Claude Code, and prompts: "Build me a landing page that matches this design system." Claude reads CLAUDE.md and SKILL.md and produces an HTML file using the extracted color tokens, typography scale, and spacing grid rather than guessing.

Code Health & Issues

From static analysis, with real counts:

  • Med – No test files detected – untested code paths across all 38 files.
  • Med – No CI/CD pipeline detected – no automated build/test gate; no .github/ config.
  • Med – No LICENSE file in this fork – unclear usage/redistribution rights, despite the upstream README showing an MIT badge.

The repo is a fork of amaancoderx/npxskillui (1831 stars upstream), so the missing LICENSE may be a fork artifact rather than an intentional omission—verify before distributing.

The Bottom Line

A practical, well-scoped tool that solves a real handoff problem, with a clean linear architecture that is easy to modify. The lack of tests and CI is the main risk for anyone planning to change the extraction or writer logic. Suitable for developers who use Claude Code and want design-accurate UI output without manual token copying.