SkillUI Web Clone

SkillUI

Clone Any Website's Design System in One Command

"Good news for lazy designers. Perfect designs, zero effort."

1. What is SkillUI?

SkillUI is a command-line tool that clones any website's entire design system instantly. Point it at any URL, GitHub repo, or local codebase – and it automatically grabs everything: colors, fonts, spacing, animations, and component patterns. No manual copy-pasting. No reverse-engineering by hand. The output is a ready-to-use design file that plugs directly into Claude Code (and other AI coding agents). Your AI now understands the full visual language of any site – so every component it builds matches perfectly.

GitHub: https://github.com/amaancoderx/npxskillui

1. What Gets Extracted Automatically

One command extracts everything you need

■ Colors Full palette – primary, secondary, neutrals, semantic tokens ✍■

Fonts & Typography

Font families, sizes, weights, line heights ■

Spacing & Layout

Padding, margin, grid, breakpoints ■ Animations Transitions, keyframes, motion values ■ Components Button styles, card patterns, form elements

1. Prerequisites

✔ Node.js (v18+) Needed to run npx – download from nodejs.org ✔

Claude Code

Installed and authenticated ✔

Git (optional)

Only needed if crawling a GitHub repo

1. Install Claude Code

If you haven't installed Claude Code yet, run this once

macOS / Linux / WSL

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell

irm https://claude.ai/install.ps1 | iex

Then run claude in your terminal and log in with your Anthropic account. That's it – one-time setup.

1. Install SkillUI – One Command

Open your terminal, navigate to your project folder, and run

cd /path/to/your/project
npx skills add amaancoderx/npxskillui

The CLI will ask you three quick things

• Target agent – select Claude Code
• Scope – Project (this folder only) or Global (all projects)
• Install method – choose Symlink (recommended)

Want it available everywhere? Install globally

npx skills add amaancoderx/npxskillui -g

1. Clone a Design System – Done

Open Claude Code in your project, then just tell it what to clone. Plain English works:

Clone any website

Use SkillUI to crawl https://airbnb.com and extract its full design system

Clone a GitHub repo's design

Use SkillUI to extract the design system from https://github.com/vercel/next.js

Analyze your own codebase

Use SkillUI to analyze the design system in my current project

Claude Code will crawl the target, extract every design token, and load it as live context. Every

component it builds from that point forward will automatically match the cloned design.

1. Verify the Skill is Active

Start Claude Code and check your installed skills

claude
/skills

You should see npxskillui listed. If it's there, you're ready to clone any design instantly.

1. Handy CLI Commands

Command Description

npx skills list

See all skills installed in this project

npx skills ls -g

See globally installed skills

npx skills update

Update SkillUI to the latest version

npx skills find <query>

Discover other skills in the registry

npx skills init my-skill

Build your own custom skill