Skills
.Work. You
Rest

skillui

Official

Extract design systems and UI tokens in minutes.

Design & Creative#typography#design system#ui tokens#github repo#website extraction#design matching
AuthorRoentek
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It solves the problem of rebuilding UI with the wrong look and feel by turning an existing website, local project, or public repo into Claude-readable design system files and design tokens.

Core Features & Use Cases

  • Design system extraction from sources: Pulls visual language into structured outputs from a live URL, a local directory, or a public GitHub repo.
  • Token generation Claude can read: Produces token files for colors, spacing, and typography so you can build UI that matches the source.
  • Ultra mode for deeper fidelity: Optionally performs full extraction with screenshots (when enabled) to better capture the real UI.
  • Use Case: Use it to match a competitor’s visual style for a landing page, or to accelerate design system creation by extracting tokens from an existing Next.js/Tailwind codebase.

Quick Start

Run skillui with the site URL you want to match, then open the generated folder in Claude Code to start using the extracted DESIGN and token files.

Dependency Matrix

Required Modules

None required

Components

Standard package

đź’» Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: skillui
Download link: https://github.com/Roentek/Claude_Code_Boilerplate_Framework/archive/main.zip#skillui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.