SkillUI
CLI (`npm i -g skillui`) that statically analyzes a website, a repo or a local codebase and extracts its entire design system: colors, typography, spacing, components, screenshots. Everything lands in a folder Claude Code reads as a skill. No API key, no AI in the extraction. Two modes: by default, a static analysis of the HTML and CSS (`skillui --url https://notion.so`, or `--dir` on a local folder, `--repo` on a repository); with `--mode ultra`, it drives the page in Playwright (installed separately, `npm install playwright`) to take scroll screenshots, diff states after interaction and detect animations, which a read of the CSS cannot see. The inverse of a UI generator: instead of creating an interface, SkillUI reverse-engineers the design system of an existing interface to make it readable by the agent.
Strengths
- Extracts a complete design system (colors, typography, spacing, components) from a site or repo
- No API key, no AI: the static mode is reproducible, the ultra mode adds motion and interactions through Playwright
- Produces a skill Claude Code consumes directly, no manual step
Limitations
- Recent indie solo-maintainer project: maturity and maintenance to watch
- Static extraction captures the render, not the intent: an inconsistent system comes out inconsistent
Best for
- A designer or DS manager who wants the agent to code in the product exact charter
- A dev who needs to replicate a reference site's style without rebuilding it by hand
- A team that wants to freeze its tokens into a skill reusable by Claude Code