Design-system extraction for Claude Code
skillui crawls any website, repo, or codebase. Colors, typography, spacing, animations, and components land in one folder that Claude Code reads automatically. Pure static analysis. No AI. No API keys.
Notion's landing page, one-shotted in minutes from a single prompt.
The feature that makes the difference
A consent overlay corrupts every extraction: it hides the real page, skews the color tokens, and ruins the scroll journey. skillui removes known CMP banners automatically, before a single pixel is captured.
Pure DOM pruning: no click on "Accept", no "Reject", no network call. A persistent MutationObserver clears the banner again the moment the CMP script re-injects it. Your tokens reflect the real page, not the consent layer.
Four ways to extract
URL, local folder, or Git repo: skillui delivers the same Claude-ready skill folder every time.
HTML, CSS, fonts, color tokens, spacing, and typography, from any site, with no browser required.
Playwright captures scroll screenshots, interaction diffs, keyframes & DOM components. Cookie-dismiss included.
Scans .css/.scss/.ts/.tsx for tokens, Tailwind config & CSS variables.
Clones any public Git repository and runs dir mode automatically.
The output
Open it, type claude, let it build. CLAUDE.md and SKILL.md are read automatically, with no manual setup.
In three steps
Pull a design system from any URL.
Open the output folder in Claude Code.
Claude already knows the design system. Just describe it.
One command installs skillui. From then on, Claude Code reads the exact visual language of any page, with consent banners already stripped out.
