npxskillui

SkillUI is a command-line tool that looks at any website, local code project, or public code repository and extracts its complete visual design language, colors, fonts, spacing rules, animations, and component patterns, then packages everything into a folder that Claude Code, an AI coding assistant, can read automatically. The goal is to let you tell Claude to build a UI that precisely matches a real-world design system without you having to describe every visual detail manually.

The tool has two main modes. The default mode does pure static analysis: it fetches the site's HTML and CSS files and pulls out color tokens, typography scales, and spacing grids without needing a browser or any AI service. An optional "ultra mode" uses Playwright, a browser automation tool, to go deeper. It takes screenshots at different scroll positions, captures how elements change on hover and focus, detects animations, and maps out layout structure. Both modes produce the same organized output folder: a master skill file Claude reads automatically, design token files in JSON format, bundled fonts, and reference documents covering components, animations, and layout.

Beyond crawling live websites, SkillUI can also scan a local project directory for design tokens in its CSS and JavaScript files, or clone and scan a public git repository the same way.

Once the extraction is done, you open the output folder, type "claude", and ask it to build your interface. Because Claude already has the full design specification loaded, it can replicate the visual style of sites like Notion or Linear without you explaining the pixel-level details. SkillUI requires Node.js 18 or newer and is free under the MIT license.