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: Gemini Vision analyzes page layout (optional)
• 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
pip install -r requirements.txt

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 (requires GEMINI_API_KEY)
• 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 (if GEMINI_API_KEY set)
├── 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/

Environment Variables

# Optional: enables AI structure analysis
GEMINI_API_KEY=your-api-key

# Add to ~/.claude/.env for persistent config

Get your API key at: https://aistudio.google.com/apikey

Requirements

• Node.js 18+
• Python 3.9+ (for AI analysis)
• Playwright (auto-installed with browsers)

CLI Commands

design-clone init [--force]   # Install skill to ~/.claude/skills/
design-clone verify           # Check installation status
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"

Python dependencies fail

pip install google-genai
# Or with Python 3
pip3 install -r requirements.txt

Playwright issues

# Install Playwright if not present
npm install playwright

# Install browsers
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.