skillui
Pulls color, typography, and spacing tokens from live sites or code to standardize UI design efforts.
Install
mkdir -p .claude/skills/skillui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12011" && unzip -o skill.zip -d .claude/skills/skillui && rm skill.zipInstalls to .claude/skills/skillui
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Extract a complete design system from any website, local directory, or public GitHub repo using the skillui CLI. Generates SKILL.md, DESIGN.md, and token files (colors.json, spacing.json, typography.json) that Claude reads automatically. Use when the user wants to extract a design system or design tokens from an existing site or codebase before building a UI, wants a reference design system to match, or says things like 'extract the design system from', 'get the tokens from', 'pull styles from this site', 'clone the look of', or provides a URL/repo and wants to match its visual language.Key capabilities
- →Extract design systems from live websites
- →Extract design systems from local directories
- →Extract design systems from public GitHub repos
- →Generate `SKILL.md`, `DESIGN.md`, and token files (colors.json, spacing.json, typography.json)
- →Capture screenshots and interactions in ultra mode
How it works
This skill uses the `skillui` CLI to analyze a website, local project, or GitHub repo. It extracts design system information and generates documentation and token files that Claude can read.
Inputs & outputs
When to use skillui
- →Extract design tokens from existing site
- →Match visual language of a project
- →Clone design system styles
About this skill
SkillUI — Design System Extractor
Extracts design systems from live websites, local projects, or public repos into Claude-readable files (SKILL.md, DESIGN.md, token JSON). Use this before building any UI when you want to match an existing site's visual language.
When to Use
- User provides a URL and wants to match or clone its design style
- User wants to extract colors, fonts, spacing from an existing site
- User has a local project or repo and wants its design tokens extracted
- User says "pull the design from", "match this site", "get the tokens from", "extract styles from"
Modes
| Mode | Command | Use When |
|---|---|---|
| URL (static) | npx skillui --url <url> | Fast extraction — HTML/CSS/fonts/colors |
| URL (ultra) | npx skillui --url <url> --mode ultra --screens 10 | Full extraction with screenshots, animations, interactions. Requires Playwright. |
| Local directory | npx skillui --dir ./path/to/project --name "ProjectName" | Scan a local Next.js/React/Tailwind project |
| Public repo | npx skillui --repo https://github.com/user/repo | Clone and analyze any public GitHub repo |
Workflow
Step 1 — Run the extractor
# Basic (recommended first try)
npx skillui --url https://example.com
# With output folder
npx skillui --url https://example.com --out ./design-systems/example
# Ultra mode (full extraction with screenshots)
npx skillui --url https://example.com --mode ultra --screens 10
Step 2 — Open the output in Claude Code
The generated folder contains:
SKILL.md/CLAUDE.md— Claude reads these automatically when you open the folderDESIGN.md— Full design system documentationtokens/colors.json,tokens/spacing.json,tokens/typography.jsonscreens/— Screenshots (ultra mode only)fonts/— Bundled Google Fonts (woff2)
Open the generated folder:
cd <generated-folder-name> && claude
Or reference the DESIGN.md directly in the current session by reading it with the Read tool.
Step 3 — Use the design system
Once the output is generated, read the token files and DESIGN.md into context, then apply them when building UI. Pass the relevant tokens to the frontend-design skill and ui-ux-pro-max design system generator.
Notes
- No API keys or cloud dependencies — runs entirely locally
- For ultra mode, Playwright must be installed:
npm install playwright && npx playwright install chromium - Output folder name is auto-derived from the site/repo name
- The
.skillZIP archive in the output can be shared or archived
When not to use it
- →When Playwright is not installed for ultra mode
- →When the user does not want to match an existing site's visual language
- →When the user does not want to extract design tokens
Limitations
- →For ultra mode, Playwright must be installed
- →Output folder name is auto-derived from the site/repo name
- →No API keys or cloud dependencies
How it compares
This skill automates the extraction of a complete design system into Claude-readable files, providing a structured way to reuse existing styles, unlike manually identifying and documenting design tokens.
Compared to similar skills
skillui side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| skillui (this skill) | 0 | 3mo | Review | Beginner |
| ui-styling | 12 | 9mo | Review | Beginner |
| web-design-reviewer | 7 | 7mo | No flags | Intermediate |
| design-lab | 7 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
frontend-design-pro
claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
tailwindcss-development
spatie
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
frontend-enhancer
ailabs-393
This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.