Features

• Multi-viewport screenshots: Desktop (1920px), Tablet (768px), Mobile (375px)
• HTML/CSS extraction: Clean source files with unused CSS removal
• Hover state capture: Screenshots and CSS for interactive element states (phase 2)
• AI structure analysis: Built-in design analysis via Claude Code (no API key needed)
• Asset extraction: Downloads images, fonts, icons
• Menu verification: Tests responsive navigation functionality

Installation

Option 1: npm (Recommended)

npm install -g design-clone
design-clone init

Option 2: Manual

git clone https://github.com/bienhoang/design-clone.git
cp -r design-clone ~/.claude/skills/design-clone
cd ~/.claude/skills/design-clone
npm install

Verify Installation

design-clone verify

Quick Start

In Claude Code, use:

/design:clone https://example.com

For pixel-perfect clone with full asset extraction:

/design:clone-px https://example.com

Commands

design:clone

Basic design capture:

• Screenshots at 3 viewports (desktop, tablet, mobile)
• HTML extraction (scripts removed, cleaned)
• CSS extraction with unused selector removal

design:clone-px

Full pixel-perfect clone:

• All basic clone features
• Asset extraction (images, fonts, icons)
• AI structure analysis (built-in, no API key needed)
• Menu verification
• Design token extraction

Output Structure

cloned-design/
├── desktop.png              # 1920x1080 screenshot
├── tablet.png               # 768x1024 screenshot
├── mobile.png               # 375x812 screenshot
├── source.html              # Cleaned HTML
├── source.css               # Filtered CSS
├── source-raw.css           # Original CSS (unfiltered)
├── animations.css           # Extracted @keyframes definitions
├── animation-tokens.json    # Animation metadata (keyframes, transitions, timings)
├── hover.css                # Generated :hover CSS rules (with --capture-hover)
├── structure.md             # AI analysis (built-in)
├── tokens.json              # Extracted design tokens
├── hover-states/            # Hover state captures (with --capture-hover)
│   ├── hover-N-normal.png   # Element before hover
│   ├── hover-N-hover.png    # Element during hover
│   └── hover-diff.json      # Captured element summary
└── assets/
    ├── images/
    ├── fonts/
    └── icons/

Requirements

• Node.js 18+
• Playwright + Chromium (auto-installed with npm install)

CLI Commands

design-clone init [--force]       # Install skill to ~/.claude/skills/
design-clone verify               # Check installation status
design-clone update [--force]     # Update to latest version
design-clone uninstall [--yes]    # Remove skill installation
design-clone --version            # Show version
design-clone help                 # Show usage help

Troubleshooting

Chrome not found

# macOS
brew install --cask google-chrome

# Ubuntu
sudo apt install chromium-browser

# Or set path manually
export CHROME_PATH="/path/to/chrome"

Playwright issues

# Install browsers (if not auto-installed)
npx playwright install chromium

# For Docker/CI environments
export PLAYWRIGHT_BROWSERS_PATH=/tmp/pw-browsers

See full troubleshooting guide: docs/troubleshooting.md

Contributing

See CONTRIBUTING.md

Changelog

See CHANGELOG.md

License

MIT - See LICENSE

Credits

Built for use with Claude Code by Anthropic.