mcpField
S
skillui

skillui

github.com/roentekDesign & UI881 installsUpdated 9w ago
Repository

About skillui

SkillUI extracts design systems from websites, local projects, or public repositories into files that Claude can read. It is intended for developers building interfaces to match an existing visual style, with both static and screenshot-based extraction modes.

Key features

  1. 01Extract from URLs, local directories, and public repos
  2. 02Static and ultra extraction modes
  3. 03Export design documentation and token JSON
  4. 04Capture screenshots in ultra mode
  5. 05Bundle Google Fonts

Use cases

  1. 01Match a reference website when building a UI
  2. 02Extract colors, fonts, and spacing from a site
  3. 03Document design tokens from a local project
  4. 04Review a public repository's design system

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/roentek/claude_code_boilerplate_framework --skill skillui

After installing, type/skilluiin Claude Code to confirm it loaded.

Bundled files.skill_id

Details

From the project README

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

ModeCommandUse When
URL (static)npx skillui --url <url>Fast extraction — HTML/CSS/fonts/colors
URL (ultra)npx skillui --url <url> --mode ultra --screens 10Full extraction with screenshots, animations, interactions. Requires Playwright.
Local directorynpx skillui --dir ./path/to/project --name "ProjectName"Scan a local Next.js/React/Tailwind project
Public reponpx skillui --repo https://github.com/user/repoClone 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 folder
  • DESIGN.md — Full design system documentation
  • tokens/colors.json, tokens/spacing.json, tokens/typography.json
  • screens/ — 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 .skill ZIP archive in the output can be shared or archived

Comments

Markdown supported