skills.rest
Roentek
RoentekOFFICIAL
Explore all skills by this author →
Website𝕏@roentekdesignsGitHub

skillui

Extract design tokens and design systems from websites, directories, and GitHub repos.

4|4|Updated Apr 6, 2026
Search Tags:#typography#design system#ui tokens#github repo#website extraction#design matching
One-click install
npx skills add https://github.com/Roentek/Claude_Code_Boilerplate_Framework --skill skillui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skillui
Source: https://github.com/Roentek/Claude_Code_Boilerplate_Framework/tree/main/.claude/skills/skillui
Command: npx skills add https://github.com/Roentek/Claude_Code_Boilerplate_Framework --skill skillui

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about skillui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from an existing website?▼

Extract design tokens by providing a live website URL, local directory, or public GitHub repo. The Skill processes the source to generate token JSON files for colors, spacing, and typography, alongside Claude-readable design system documentation.

Can I extract a design system from a public GitHub repository?▼

Yes, you can extract a design system directly from a public GitHub repository. The Skill parses the source code to generate token JSON files for colors, spacing, and typography, plus Claude-readable design documentation for immediate reuse.

What formats are generated when extracting UI tokens?▼

The Skill generates token JSON files for colors, spacing, and typography, alongside SKILL.md and DESIGN.md markdown files. These structured outputs provide Claude-readable design system data for immediate integration into new UI projects.

Does extracting styles from a site require Playwright?▼

Playwright is not required for basic extraction, but it is used optionally for ultra-mode. Enabling ultra-mode performs screenshot capture to achieve deeper visual fidelity and better match the real target UI.

How do I match a competitor's visual style for a landing page?▼

To match a competitor's visual style, extract their design system by providing their live website URL. The Skill generates matching UI tokens for colors, spacing, and typography, enabling you to build a landing page with accurate visual parity.

Related Skills

Explore More Design & Creative Skills→
pinion05pinion05
3

skill-installer

Discover and install Codex skills from curated sources or GitHub repositories.

Community
Intermediate
lucasromanhlucasromanh

design-md

Extract design tokens from Stitch projects and generate a DESIGN.md file.

Community
Advanced
Italo520Italo520

identidade-visual

Standardize color, typography, spacing, and component styling for Next.js Tailwind frontends.

Community
Basic
maxnormmaxnorm
26

magento-css-specialist

Develop modular LESS and CSS styles for Magento 2 themes.

Community
Intermediate