design-clone 2.1.0 → 3.0.0

package/README.md

@@ -1,7 +1,7 @@
 <div align="center">
-  <img src="logo.svg" alt="design-clone" width="120" height="120">
+  <img src="./assets/images/logo.svg" alt="design-clone" width="120" height="120">
   <h1>Design Clone</h1>
-  <p><strong>Clone website designs with multi-viewport screenshots, HTML/CSS extraction, and Gemini AI analysis.</strong></p>
+  <p><strong>Clone website designs with multi-viewport screenshots, HTML/CSS extraction, and AI-powered design analysis.</strong></p>
   <p>
     <a href="https://www.npmjs.com/package/design-clone"><img src="https://img.shields.io/npm/v/design-clone" alt="npm"></a>
     <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
@@ -16,7 +16,7 @@
 - **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)
+- **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
 
@@ -36,7 +36,6 @@ 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
@@ -73,7 +72,7 @@ Basic design capture:
 Full pixel-perfect clone:
 - All basic clone features
 - Asset extraction (images, fonts, icons)
-- AI structure analysis (requires GEMINI_API_KEY)
+- AI structure analysis (built-in, no API key needed)
 - Menu verification
 - Design token extraction
 
@@ -90,7 +89,7 @@ cloned-design/
 ├── 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)
+├── 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
@@ -102,29 +101,20 @@ cloned-design/
     └── icons/
 ```
 
-## Environment Variables
-
-```bash
-# 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)
+- Playwright + Chromium (auto-installed with `npm install`)
 
 ## CLI Commands
 
 ```bash
-design-clone init [--force]   # Install skill to ~/.claude/skills/
-design-clone verify           # Check installation status
-design-clone help             # Show usage help
+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
@@ -142,21 +132,10 @@ sudo apt install chromium-browser
 export CHROME_PATH="/path/to/chrome"
 ```
 
-### Python dependencies fail
-
-```bash
-pip install google-genai
-# Or with Python 3
-pip3 install -r requirements.txt
-```
-
 ### Playwright issues
 
 ```bash
-# Install Playwright if not present
-npm install playwright
-
-# Install browsers
+# Install browsers (if not auto-installed)
 npx playwright install chromium
 
 # For Docker/CI environments

package/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: design-clone
-description: Clone website designs via multi-viewport screenshots, HTML/CSS extraction, and Gemini AI analysis. Generates production HTML/CSS with Font Awesome icons, direct Unsplash images, and Japanese design principles. Commands - design:clone (basic), design:clone-px (pixel-perfect).
+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-px (pixel-perfect).
 ---
 
 # Design Clone Skill
 
-Clone website designs with multi-viewport screenshots, HTML/CSS extraction, CSS filtering, and Gemini AI structure analysis.
+Clone website designs with multi-viewport screenshots, HTML/CSS extraction, CSS filtering, and built-in AI structure analysis.
 
 ## Features
 
@@ -14,21 +14,18 @@ Clone website designs with multi-viewport screenshots, HTML/CSS extraction, CSS
 - **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
-- **Gemini Vision Analysis** - AI-powered design token extraction
+- **Built-in AI Analysis** - Design token extraction via Claude Code vision
 - **ui-ux-pro-max Quality Check** - Accessibility, hover states, contrast validation
 
 ## Prerequisites
 
 - Node.js 18+ with npm
-- Python 3.9+ (for AI analysis)
 - Chrome/Chromium browser
 
 ## Quick Setup
 
 ```bash
 npm install
-pip install -r requirements.txt
-# Optional: Set GEMINI_API_KEY in .env for AI analysis
 ```
 
 ## Project Structure
@@ -44,17 +41,18 @@ design-clone/
 │   │   ├── screenshot.js   # Multi-viewport screenshots
 │   │   ├── filter-css.js   # CSS filtering
 │   │   └── extract-assets.js
-│   ├── ai/                 # AI analysis scripts
-│   │   ├── analyze-structure.py
-│   │   └── extract-design-tokens.py
+│   ├── ai/                 # AI analysis prompt templates
+│   │   └── prompts/         # Markdown prompts for Claude Code vision
+│   │       ├── structure-analysis/
+│   │       ├── design-tokens/
+│   │       └── ux-audit/
 │   ├── verification/       # Verification scripts
 │   │   ├── verify-menu.js
 │   │   └── verify-layout.js
 │   ├── utils/              # Shared utilities
 │   │   ├── browser.js
 │   │   ├── puppeteer.js
-│   │   ├── env.js
-│   │   └── env.py
+│   │   └── env.js
 │   └── post-process/       # Post-processing
 │       ├── fetch-images.js
 │       ├── inject-icons.js
@@ -78,14 +76,14 @@ Basic design capture with Font Awesome icons and Unsplash images.
 **Workflow:**
 ```bash
 # Step 1: Capture screenshots + HTML/CSS
-node src/core/screenshot.js \
+node src/core/capture/screenshot.js \
   --url "URL" \
   --output ./output \
   --extract-html \
   --extract-css
 
 # Step 2: Filter unused CSS
-node src/core/filter-css.js \
+node src/core/css/filter-css.js \
   --html ./output/source.html \
   --css ./output/source-raw.css \
   --output ./output/source.css
@@ -107,7 +105,7 @@ python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "animation hover" -
 
 ### design:clone-site
 
-Multi-page site cloning with shared CSS and working navigation.
+Multi-page screenshot capture for Claude Code vision to generate new HTML/CSS.
 
 ```bash
 /design:clone-site https://example.com
@@ -136,18 +134,13 @@ cloned-designs/{timestamp}-{domain}/
 │   ├── desktop/*.png
 │   ├── tablet/*.png
 │   └── mobile/*.png
-├── pages/              # HTML with rewritten links
-│   ├── index.html
-│   ├── about.html
-│   └── contact.html
-├── styles.css          # Merged + deduplicated CSS
-└── manifest.json       # Page metadata + mapping
+├── manifest.json       # Page metadata + screenshot paths
+└── capture-results.json
 ```
 
 **Features:**
 - Auto-discovers pages from navigation (SPA-aware)
-- Shared CSS with deduplication (15-30% reduction)
-- Working internal links
+- Multi-viewport screenshots (desktop, tablet, mobile)
 - Progress reporting
 - Graceful error handling (continues on page failures)
 
@@ -161,7 +154,7 @@ Pixel-perfect clone with full asset extraction and AI analysis.
 
 ```bash
 # Step 1: Capture + Extract
-node src/core/screenshot.js \
+node src/core/capture/screenshot.js \
   --url "URL" \
   --output ./output \
   --extract-html --extract-css \
@@ -169,27 +162,57 @@ node src/core/screenshot.js \
   --full-page
 
 # Step 2: Filter CSS
-node src/core/filter-css.js \
+node src/core/css/filter-css.js \
   --html ./output/source.html \
   --css ./output/source-raw.css \
   --output ./output/source.css
 
 # Step 3: Extract Assets (images, fonts, icons)
-node src/core/extract-assets.js \
+node src/core/media/extract-assets.js \
   --url "URL" \
   --output ./output
 
-# Step 4: AI Structure Analysis (requires GEMINI_API_KEY)
-python src/ai/analyze-structure.py \
-  -s ./output/desktop.png \
-  -o ./output \
-  --html ./output/source.html \
-  --css ./output/source.css
-
-# Step 5: Extract Design Tokens
-python src/ai/extract-design-tokens.py \
-  -s ./output/desktop.png \
-  -o ./output
+# Step 4: AI Structure Analysis (built-in Claude Code vision)
+# Select prompt based on available context (highest accuracy first):
+#   - If dom-hierarchy.json AND dimensions-summary.json exist:
+#       Read src/ai/prompts/structure-analysis/with-hierarchy.md
+#       Read output/dom-hierarchy.json
+#       Read output/dimensions-summary.json
+#   - Else if dimensions-summary.json exists:
+#       Read src/ai/prompts/structure-analysis/with-dimensions.md
+#       Read output/dimensions-summary.json
+#   - Else if source.html AND source.css exist:
+#       Read src/ai/prompts/structure-analysis/with-context.md
+#       Read output/source.html (first 100KB)
+#       Read output/source.css (first 100KB)
+#   - Else:
+#       Read src/ai/prompts/structure-analysis/basic.md
+#
+# Then: Read output/desktop.png (Claude vision analyzes the screenshot)
+# If content-summary.md exists: Read output/content-summary.md
+# Analyze following prompt instructions
+# Write result to output/structure.md
+
+# Step 5: Extract Design Tokens (built-in Claude Code vision)
+# Select prompt:
+#   - If source.css exists:
+#       Read src/ai/prompts/design-tokens/with-css.md
+#       Read output/source.css (first 15KB)
+#   - Else:
+#       Read src/ai/prompts/design-tokens/basic.md
+#
+# Read output/desktop.png, output/tablet.png, output/mobile.png
+# Analyze following prompt instructions
+# Write JSON result to output/design-tokens.json
+# Generate CSS custom properties and write to output/tokens.css
+#
+# Token CSS generation rules:
+#   - Map colors to --color-* variables
+#   - Map typography to --font-*, --font-size-*, --font-weight-*, --line-height-*
+#   - Map spacing to --space-* variables
+#   - Map border-radius to --radius-* variables
+#   - Map shadows to --shadow-* variables
+#   - Use :root {} selector
 
 # Step 6: Verify Menu
 node src/verification/verify-menu.js \
@@ -267,7 +290,7 @@ After generating HTML/CSS, verify these items using `ui-ux-pro-max` skill:
 Automatically extracts @keyframes and transition properties when using `--extract-css`:
 
 ```bash
-node src/core/screenshot.js --url https://example.com --output ./out --extract-css true
+node src/core/capture/screenshot.js --url https://example.com --output ./out --extract-css true
 ```
 
 **Output:**
@@ -279,7 +302,7 @@ node src/core/screenshot.js --url https://example.com --output ./out --extract-c
 Capture interactive element hover states:
 
 ```bash
-node src/core/screenshot.js --url https://example.com --output ./out --capture-hover
+node src/core/capture/screenshot.js --url https://example.com --output ./out --capture-hover
 ```
 
 **Output:**
@@ -297,16 +320,16 @@ Record scroll preview video (opt-in due to 3-5x capture time increase):
 
 ```bash
 # WebM (native, no extra deps)
-node src/core/screenshot.js --url https://example.com --output ./out --video
+node src/core/capture/screenshot.js --url https://example.com --output ./out --video
 
 # MP4 (requires ffmpeg)
-node src/core/screenshot.js --url https://example.com --output ./out --video --video-format mp4
+node src/core/capture/screenshot.js --url https://example.com --output ./out --video --video-format mp4
 
 # GIF (requires ffmpeg)
-node src/core/screenshot.js --url https://example.com --output ./out --video --video-format gif
+node src/core/capture/screenshot.js --url https://example.com --output ./out --video --video-format gif
 
 # Custom duration (default: 12000ms)
-node src/core/screenshot.js --url https://example.com --output ./out --video --video-duration 8000
+node src/core/capture/screenshot.js --url https://example.com --output ./out --video --video-duration 8000
 ```
 
 **Output:**
@@ -332,7 +355,7 @@ npm install fluent-ffmpeg @ffmpeg-installer/ffmpeg
 Create `.env` file (see `.env.example`):
 
 ```bash
-GEMINI_API_KEY=your-key    # Optional: enables AI structure analysis
+# No API keys required for AI analysis (uses Claude Code built-in vision)
 ```
 
 ## Script Reference
@@ -350,8 +373,9 @@ GEMINI_API_KEY=your-key    # Optional: enables AI structure analysis
 | merge-css.js | src/core/ | Merge + deduplicate CSS |
 | rewrite-links.js | src/core/ | Rewrite internal links |
 | clone-site.js | bin/commands/ | Multi-page clone CLI |
-| analyze-structure.py | src/ai/ | AI-powered structure analysis |
-| extract-design-tokens.py | src/ai/ | Extract colors, typography, spacing |
+| prompts/structure-analysis/*.md | src/ai/ | AI structure analysis prompts (Claude Code vision) |
+| prompts/design-tokens/*.md | src/ai/ | Design token extraction prompts (Claude Code vision) |
+| prompts/ux-audit/*.md | src/ai/ | UX audit prompts (Claude Code vision) |
 | verify-menu.js | src/verification/ | Validate navigation structure |
 | verify-layout.js | src/verification/ | Verify layout consistency |
 | fetch-images.js | src/post-process/ | Fetch and optimize images |

package/bin/cli.js

@@ -3,15 +3,21 @@
  * Design Clone Skill CLI
  *
  * Usage:
- *   design-clone init [--force]  Install skill to ~/.claude/skills/
- *   design-clone verify          Check installation status
- *   design-clone clone-site <url> [options]  Clone multiple pages
- *   design-clone help            Show help
+ *   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 clone-site <url>   Clone multiple pages
+ *   design-clone help               Show help
+ *   design-clone --version          Show version
  */
 
 import { init } from './commands/init.js';
 import { verify } from './commands/verify.js';
 import { help } from './commands/help.js';
+import { uninstall } from './commands/uninstall.js';
+import { update } from './commands/update.js';
+import { getVersion } from './utils/version.js';
 import { cloneSite, parseArgs as parseCloneSiteArgs, showHelp as showCloneSiteHelp } from './commands/clone-site.js';
 
 const [,, command, ...args] = process.argv;
@@ -41,6 +47,18 @@ async function main() {
           console.log(JSON.stringify(result, null, 2));
         }
         break;
+      case 'uninstall':
+      case 'remove':
+        await uninstall(args);
+        break;
+      case 'update':
+      case 'upgrade':
+        await update(args);
+        break;
+      case '--version':
+      case '-v':
+        console.log(`design-clone v${getVersion()}`);
+        break;
       case 'help':
       case '--help':
       case '-h':