SkillUI tackles a specific but often overlooked challenge in front-end and AI workflows: extracting design system tokens, component patterns, and style guides directly from live web sources or codebases into structured skill packages consumable by Claude Code. Instead of relying on manual documentation or textual prompts, SkillUI automates this bridge from visual design to AI-driven code generation.
what SkillUI does and how it works
SkillUI is a CLI tool written in TypeScript that reverse-engineers design systems from any URL, local directory, or git repository. The output is a set of skill packages formatted for Claude Code — an AI programming assistant that can read structured skill files to generate UI code aligned with design tokens and constraints.
It operates in two modes:
Default mode: Pure static analysis of HTML and CSS. This mode scrapes the DOM and stylesheets to identify color tokens, typography scales, spacing grids, and common component patterns.
Ultra mode: Powered by Playwright, it performs visual extraction including scrollable screenshots, interaction state diffs (hover, focus), and animation detection. This is more resource-intensive but yields richer, visually accurate design data.
The tool bundles local copies of Google Fonts found in the source, ensuring font fidelity. It produces several markdown files — CLAUDE.md, SKILL.md, and DESIGN.md — plus a .skill ZIP archive that Claude Code auto-reads to understand the design system context.
Critically, SkillUI requires no AI models or API keys to run. It’s purely based on static analysis and DOM inspection, so you can run it fully offline and trust the extraction is grounded in the actual source, not heuristic guesswork.
Under the hood, the architecture relies on Node.js (version 18+) and the Playwright browser automation library for ultra mode. The CLI interfaces with the filesystem and network to fetch resources and generate the skill package.
technical strengths and tradeoffs
The most distinctive aspect of SkillUI is how it automates design system extraction into structured skill files without invoking AI during extraction. This removes the unpredictability of natural language prompts when describing designs and instead bases the process on precise DOM and CSS analysis.
The ultra mode’s use of Playwright is clever — it simulates user interactions to capture visual states for components, including hover and focus styles, scroll journeys, and animations. This approach mimics manual design audits but is fully automated.
This makes SkillUI more deterministic and repeatable than approaches that rely purely on AI-generated descriptions or human annotation.
The tradeoff is complexity and resource usage. Ultra mode involves headless browser automation, which can be slow and requires heavier dependencies like Chromium. Default mode is faster but less visually rich, relying solely on static HTML/CSS data.
The output files follow a consistent skill schema for Claude Code consumption, which means the tool is highly opinionated about its target AI environment. This focus is great if you use Claude Code but less flexible if you want a generic design token extractor.
The codebase, despite rapid iteration (23 releases in 2 days), is surprisingly clean and modular. It handles edge cases like bundling fonts locally and differentiating component states via DOM fingerprinting.
There’s no direct integration with design system formats like Figma or Storybook, so SkillUI is best suited for web-based sources rather than purely design tool environments.
quick start
To try SkillUI, start by installing the CLI globally with npm:
npm install -g skillui
It requires Node.js 18 or newer.
For the ultra mode, you need to install Playwright and Chromium:
npm install playwright
npx playwright install chromium
Then you can run SkillUI against a URL or local path to generate the skill package. The README provides specific CLI commands to follow.
verdict
SkillUI is a pragmatic tool for developers and teams who want to automate the translation of existing web design systems into Claude Code AI skill packages without relying on AI to interpret the design itself.
Its two-mode approach balances between quick static extraction and deep visual auditing. The ultra mode’s Playwright-driven interaction capture is a neat solution to replicate manual visual testing programmatically.
However, the tool is opinionated towards Claude Code and web-based sources, limiting its use for broader design system workflows or other AI environments.
If you work heavily with Claude Code and want a repeatable, automated way to feed it accurate design tokens and component patterns from real websites or repos, SkillUI is worth exploring. Just be prepared for the resource tradeoffs of ultra mode and the niche focus on Claude’s skill format.
Overall, it solves a real problem for bridging front-end design and AI code generation with clarity and precision.
→ GitHub Repo: amaancoderx/npxskillui ⭐ 479 · TypeScript