design-clone

Category: Content & Multimedia | Uploader: bienhoang | Downloads: 0 | Version: v1.0（Latest）

Clone website designs via multi-viewport screenshots, HTML/CSS extraction, and built-in AI analysis. Generates production HTML/CSS with Font Awesome icons, direct Unsplash images, and Japanese design principles. Commands - design:clone (basic), design:clone-site (multi-page), design:clone-px (pixel-perfect).

Changelog: Source: GitHub https://github.com/bienhoang/design-clone

Directory Structure

Current level: Root

📁 assets/
- 📁 images/
  - 📄 favicon.svg 914 B
  - 📄 logo-icon.svg 982 B
  - 📄 logo-light.svg 2.4 KB
  - 📄 logo-preview.html 7.0 KB
  - 📄 logo-wordmark.svg 1.2 KB
  - 📄 logo.svg 2.5 KB
📁 bin/
- 📁 commands/
  - 📄 clone-site.js 3.9 KB
  - 📄 help.js 1.5 KB
  - 📄 init.js 4.7 KB
  - 📄 uninstall.js 3.0 KB
  - 📄 update.js 1.9 KB
  - 📄 verify.js 2.7 KB
- 📁 utils/
  - 📄 copy.js 1.5 KB
  - 📄 paths.js 718 B
  - 📄 validate.js 3.2 KB
  - 📄 version.js 562 B
- 📄 cli.js 1.6 KB
📁 commands/
- 📁 design/
  - 📄 clone-px.md 3.1 KB
  - 📄 clone-site.md 3.6 KB
  - 📄 clone.md 2.8 KB
📁 docs/
- 📄 basic-clone.md 2.4 KB
- 📄 cli-reference.md 3.4 KB
- 📄 code-standards.md 17.4 KB
- 📄 codebase-summary.md 7.5 KB
- 📄 index.md 2.0 KB
- 📄 pixel-perfect.md 3.5 KB
- 📄 project-overview-pdr.md 20.9 KB
- 📄 system-architecture.md 16.9 KB
- 📄 troubleshooting.md 3.3 KB
📁 landing-page/
- 📁 assets/
  - 📁 images/
    
    📄 favicon.svg 914 B
    
    📄 logo-icon.svg 982 B
    
    📄 logo-light.svg 2.4 KB
    
    📄 logo-wordmark.svg 1.2 KB
    
    📄 logo.svg 2.5 KB
- 📄 index.html 61.7 KB
📁 scripts/
- 📄 install-dev.sh 4.9 KB
📁 src/
- 📁 ai/
  - 📁 prompts/
    
    📁 design-tokens/
    
    📄 basic.md 1.8 KB
    
    📄 section-with-css.md 1.2 KB
    
    📄 section.md 1.4 KB
    
    📄 with-css.md 2.6 KB
    
    📁 structure-analysis/
    
    📄 basic.md 1.8 KB
    
    📄 with-context.md 1.9 KB
    
    📄 with-dimensions.md 2.3 KB
    
    📄 with-hierarchy.md 2.4 KB
    
    📁 ux-audit/
    
    📄 aggregation.md 1.0 KB
    
    📄 desktop.md 2.4 KB
    
    📄 mobile.md 2.4 KB
    
    📄 tablet.md 2.4 KB
- 📄 capture.js 35.8 KB
- 📄 clone-site.js 16.7 KB
- 📄 extract-assets.js 10.5 KB
- 📄 filter-css.js 13.3 KB
- 📄 utils.js 11.2 KB
📁 templates/
- 📄 base.css 13.5 KB
- 📄 base.html 10.5 KB
📁 tests/
- 📄 run-all-tests.js 2.6 KB
- 📄 test-cli-utils.js 8.8 KB
- 📄 test-clone-site.js 3.6 KB
- 📄 test-env-js.js 3.6 KB
- 📄 test-env-path-order.js 1.4 KB
- 📄 test-filter-css.js 3.8 KB
- 📄 test-integration.js 7.3 KB
📄 .c8rc.json 190 B
📄 .gitignore 251 B
📄 CHANGELOG.md 10.5 KB
📄 CONTRIBUTING.md 2.5 KB
📄 LICENSE 1.0 KB
📄 package-lock.json 59.3 KB
📄 package.json 1.3 KB
📄 README.md 4.3 KB
📄 SKILL.md 6.8 KB

SKILL.md

---
name: design-clone
description: Clone website designs via multi-viewport screenshots, HTML/CSS extraction, and built-in AI analysis. Generates production HTML/CSS with Font Awesome icons, direct Unsplash images, and Japanese design principles. Commands - design:clone (basic), design:clone-site (multi-page), design:clone-px (pixel-perfect).
user-invocable: false
---

# Design Clone Skill

Clone website designs with multi-viewport screenshots, HTML/CSS extraction, CSS filtering, and built-in AI structure analysis.

## Features

- **Font Awesome 6 Icons** - All icons use Font Awesome CDN (no inline SVG)
- **Direct Unsplash Images** - Real images without API key needed
- **Japanese Design Principles** - Ma, Kanso, Shibui, Seijaku for elegant designs
- **Multi-viewport Screenshots** - Desktop, tablet, mobile captures
- **Hover State Capture** - Interactive element screenshots and :hover CSS generation
- **Built-in AI Analysis** - Design token extraction via Claude Code vision

## Prerequisites

- Node.js 18+ with npm
- Chrome/Chromium browser

## Quick Setup

```bash
npm install
```

## Project Structure

```
design-clone/
├── bin/                         # CLI entry point
│   ├── cli.js
│   ├── commands/                # CLI commands (init, help, update, uninstall)
│   └── utils/                   # CLI utilities
├── src/
│   ├── utils.js                 # Shared utilities, browser management, constants
│   ├── capture.js               # Screenshot pipeline + HTML/CSS extraction
│   ├── filter-css.js            # CSS filtering + dead code removal
│   ├── extract-assets.js        # Asset extraction (images, fonts, icons)
│   ├── clone-site.js            # Multi-page clone with route discovery
│   └── ai/                      # AI analysis prompt templates
│       └── prompts/             # Markdown prompts for Claude Code vision
│           ├── structure-analysis/
│           ├── design-tokens/
│           └── ux-audit/
├── templates/                   # HTML/CSS base templates
├── tests/                       # Test suite
├── docs/                        # Documentation
└── package.json
```

## Commands

### design:clone

Basic design capture with Font Awesome icons and Unsplash images.

```bash
/design:clone https://example.com
```

**Workflow:**
```bash
# Step 1: Capture screenshots + HTML/CSS
node src/capture.js \
  --url "URL" \
  --output ./output \
  --extract-html true \
  --extract-css true

# Step 2 (optional): Standalone CSS filter
node src/filter-css.js \
  --html ./output/source.html \
  --css ./output/source-raw.css \
  --output ./output/source.css

# Step 3: Review output + build clone
```

**Output:** desktop.png, tablet.png, mobile.png, source.html, source.css, source-raw.css

### design:clone-site

Multi-page clone with shared CSS and working navigation.

```bash
/design:clone-site https://example.com
/design:clone-site https://example.com --pages /,/about,/contact
/design:clone-site https://example.com --max-pages 5
```

**Usage:**
```bash
node src/clone-site.js \
  --url "URL" \
  --output ./cloned-designs \
  --max-pages 10
```

**Options:** `--url`, `--pages`, `--max-pages`, `--output`, `--detect-breakpoints`, `--aggressive-filter`, `--dry-run`

### design:clone-px

Pixel-perfect clone with full asset extraction and AI analysis.

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

**Workflow:**
```bash
# Step 1: Capture + Extract (with hover, breakpoints, computed styles)
node src/capture.js \
  --url "URL" \
  --output ./output \
  --extract-html true --extract-css true \
  --capture-hover true \
  --full-page true \
  --detect-breakpoints true \
  --extract-computed true \
  --aggressive-filter true

# Step 2: Extract Assets
node src/extract-assets.js \
  --url "URL" \
  --output ./output

# Step 3: AI Structure Analysis (Claude Code vision)
# Step 4: Extract Design Tokens (Claude Code vision)
# Step 5: Build the clone
```

## Quality Checklist

After generating HTML/CSS, verify:

### Visual Quality
- [ ] No emojis used as icons (use Font Awesome instead)
- [ ] All icons from Font Awesome 6 (consistent sizing)
- [ ] Hover states don't cause layout shift

### Interaction
- [ ] All clickable elements have `cursor-pointer`
- [ ] Hover states provide clear visual feedback
- [ ] Transitions are smooth (150-300ms)

### Accessibility
- [ ] All images have alt text
- [ ] Form inputs have labels
- [ ] Color is not the only indicator
- [ ] Sufficient text contrast (4.5:1 minimum)

### Layout
- [ ] Floating elements have proper spacing
- [ ] No content hidden behind fixed navbars
- [ ] Responsive at 320px, 768px, 1024px, 1440px

## Icon Usage (Font Awesome 6)

```html
<!-- CDN in <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- Icons -->
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-envelope"></i>
<i class="fa-brands fa-x-twitter"></i>
<i class="fa-brands fa-line"></i>
```

## Image Usage (Direct Unsplash)

```html
<!-- No API needed - direct URL format -->
<img src="https://images.unsplash.com/photo-{PHOTO_ID}?w={WIDTH}&h={HEIGHT}&fit=crop&q=80" alt="Description">
```

## Japanese Design Principles

| Principle | Description | CSS Implementation |
|-----------|-------------|-------------------|
| Ma (間) | Negative space | Generous padding/margins |
| Kanso (簡素) | Simplicity | Limited colors, clean typography |
| Shibui (渋い) | Subtle elegance | Soft shadows, gentle transitions |
| Seijaku (静寂) | Tranquility | Calm colors, visual harmony |

## Capture Flags

| Flag | Default | Description |
|------|---------|-------------|
| `--extract-html` | false | Extract page HTML |
| `--extract-css` | false | Extract + filter CSS |
| `--capture-hover` | false | Capture hover state screenshots |
| `--full-page` | false | Full-page screenshots |
| `--detect-breakpoints` | false | Auto-detect CSS breakpoints |
| `--extract-computed` | false | Extract computed styles |
| `--aggressive-filter` | false | Two-pass CSS dead code removal |

## Script Reference

| Script | Purpose |
|--------|---------|
| src/utils.js | Shared utilities, browser management, constants, progress reporting |
| src/capture.js | Screenshot pipeline + HTML/CSS extraction + hover + breakpoints |
| src/filter-css.js | CSS filtering + dead code removal + chunked processing |
| src/extract-assets.js | Download images, fonts, icons with rate limiting |
| src/clone-site.js | Multi-page clone with route discovery + CSS merge + link rewriting |

## References

- [Basic Clone](docs/basic-clone.md) - Step-by-step basic workflow
- [Pixel Perfect](docs/pixel-perfect.md) - Full pixel-perfect workflow
- [CLI Reference](docs/cli-reference.md) - All script options
- [Troubleshooting](docs/troubleshooting.md) - Common issues and fixes

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

design-clone

Directory Structure

SKILL.md

Report

Notice