design-clone 1.2.0 → 2.3.0

package/README.md

@@ -1,17 +1,22 @@
-# Design Clone Skill for Claude Code
-
-Clone website designs with multi-viewport screenshots, HTML/CSS extraction, and Gemini AI analysis.
-
-[![npm](https://img.shields.io/npm/v/design-clone)](https://www.npmjs.com/package/design-clone)
-[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-[![Node](https://img.shields.io/badge/node-%3E%3D18-brightgreen.svg)](https://nodejs.org)
+<div align="center">
+  <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 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>
+    <a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%3E%3D18-brightgreen.svg" alt="Node"></a>
+  </p>
+</div>
+
+---
 
 ## 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)
+- **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
 
@@ -31,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
@@ -68,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
 
@@ -85,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
@@ -97,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)
-- Chrome or Chromium (auto-detected)
+- 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
@@ -137,22 +132,14 @@ sudo apt install chromium-browser
 export CHROME_PATH="/path/to/chrome"
 ```
 
-### Python dependencies fail
+### Playwright issues
 
 ```bash
-pip install google-genai
-# Or with Python 3
-pip3 install -r requirements.txt
-```
-
-### Puppeteer issues
-
-```bash
-# Install Puppeteer if not present
-npm install puppeteer
+# Install browsers (if not auto-installed)
+npx playwright install chromium
 
 # For Docker/CI environments
-export PUPPETEER_NO_SANDBOX=1
+export PLAYWRIGHT_BROWSERS_PATH=/tmp/pw-browsers
 ```
 
 See full troubleshooting guide: [docs/troubleshooting.md](docs/troubleshooting.md)
@@ -172,3 +159,9 @@ MIT - See [LICENSE](LICENSE)
 ## Credits
 
 Built for use with [Claude Code](https://claude.ai/code) by Anthropic.
+
+---
+
+<div align="center">
+  <sub>Made with ❤️ for the Claude Code community</sub>
+</div>

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':

package/bin/commands/clone-site.js

@@ -1,7 +1,8 @@
 /**
  * Clone Site Command
  *
- * Clone multiple pages from a website with shared CSS and working navigation.
+ * Capture multi-viewport screenshots of multiple pages from a website.
+ * Screenshots are used by Claude Code vision to generate new HTML/CSS.
  *
  * Usage:
  *   design-clone clone-site <url> [options]
@@ -16,13 +17,9 @@
 
 import fs from 'fs/promises';
 import path from 'path';
-import { fileURLToPath } from 'url';
 
-import { discoverPages } from '../../src/core/discover-pages.js';
-import { captureMultiplePages } from '../../src/core/multi-page-screenshot.js';
-import { mergeCssFiles } from '../../src/core/merge-css.js';
-import { rewriteLinks, createPageManifest, rewriteAllLinks } from '../../src/core/rewrite-links.js';
-import { extractDesignTokens } from '../../src/core/design-tokens.js';
+import { discoverPages } from '../../src/core/discovery/discover-pages.js';
+import { captureMultiplePages } from '../../src/core/capture/multi-page-screenshot.js';
 
 /**
  * Generate output directory name
@@ -52,8 +49,7 @@ export function parseArgs(args) {
     maxPages: 10,
     viewports: ['desktop', 'tablet', 'mobile'],
     skipConfirm: false,
-    output: null,
-    ai: false
+    output: null
   };
 
   for (let i = 0; i < args.length; i++) {
@@ -69,8 +65,6 @@ export function parseArgs(args) {
       options.skipConfirm = true;
     } else if (arg === '--output' && args[i + 1]) {
       options.output = args[++i];
-    } else if (arg === '--ai') {
-      options.ai = true;
     } else if (!arg.startsWith('--') && !options.url) {
       options.url = arg;
     }
@@ -80,7 +74,7 @@ export function parseArgs(args) {
 }
 
 /**
- * Clone multiple pages from a website
+ * Clone multiple pages from a website (screenshot-only capture)
  * @param {string} url - Target URL
  * @param {Object} options - Clone options
  * @returns {Promise<Object>} Clone result
@@ -91,9 +85,7 @@ export async function cloneSite(url, options = {}) {
     pages: manualPages,
     maxPages = 10,
     viewports = ['desktop', 'tablet', 'mobile'],
-    skipConfirm = false,
-    output,
-    ai = false
+    output
   } = options;
 
   // Validate URL
@@ -111,11 +103,10 @@ export async function cloneSite(url, options = {}) {
   console.error(`[clone-site] Output: ${outputDir}`);
 
   // Step 1: Discover or use manual pages
-  console.error('\n[1/6] Discovering pages...');
+  console.error('\n[1/3] Discovering pages...');
 
   let pageList;
   if (manualPages && manualPages.length > 0) {
-    // Use manual page list
     pageList = {
       success: true,
       pages: manualPages.map(p => ({
@@ -126,7 +117,6 @@ export async function cloneSite(url, options = {}) {
     };
     console.error(`   Using ${pageList.pages.length} manual pages`);
   } else {
-    // Auto-discover
     pageList = await discoverPages(url, { maxPages });
     if (!pageList.success) {
       console.error(`   Warning: Discovery failed - ${pageList.error}`);
@@ -135,13 +125,12 @@ export async function cloneSite(url, options = {}) {
     console.error(`   Found ${pageList.pages.length} pages`);
   }
 
-  // Show discovered pages
   for (const page of pageList.pages) {
     console.error(`   - ${page.path} (${page.name})`);
   }
 
-  // Step 2: Capture all pages
-  console.error('\n[2/6] Capturing pages...');
+  // Step 2: Capture all pages (screenshots only)
+  console.error('\n[2/3] Capturing screenshots...');
 
   const captureResult = await captureMultiplePages(pageList.pages, {
     outputDir,
@@ -158,91 +147,30 @@ export async function cloneSite(url, options = {}) {
   console.error(`   Captured ${captureResult.stats.successfulPages}/${captureResult.stats.totalPages} pages`);
   console.error(`   Screenshots: ${captureResult.stats.totalScreenshots}`);
 
-  // Step 3: Merge CSS files (prefer filtered CSS)
-  console.error('\n[3/6] Merging CSS...');
-
-  const mergedCssPath = path.join(outputDir, 'styles.css');
-  let mergeResult = { success: false };
-
-  // Use filtered CSS if available, fallback to raw CSS
-  const cssToMerge = captureResult.cssFilesFiltered?.length > 0
-    ? captureResult.cssFilesFiltered
-    : captureResult.cssFiles;
-
-  const cssType = captureResult.cssFilesFiltered?.length > 0 ? 'filtered' : 'raw';
-
-  if (cssToMerge.length > 0) {
-    mergeResult = await mergeCssFiles(cssToMerge, mergedCssPath);
-    if (mergeResult.success) {
-      console.error(`   Merged ${mergeResult.input.fileCount} ${cssType} files`);
-      console.error(`   Reduction: ${mergeResult.stats.reduction}`);
-    } else {
-      console.error(`   Warning: Merge failed - ${mergeResult.error}`);
-    }
-  } else {
-    console.error('   No CSS files to merge');
-  }
-
-  // Step 4: Extract design tokens (if --ai flag)
-  console.error('\n[4/6] Extracting design tokens...');
-
-  let hasTokens = false;
-  if (ai) {
-    if (process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY) {
-      const tokenResult = await extractDesignTokens(outputDir, mergedCssPath);
-      if (tokenResult.success) {
-        hasTokens = true;
-        console.error(`   Created: tokens.css, design-tokens.json`);
-      } else {
-        console.error(`   Warning: Token extraction failed - ${tokenResult.error}`);
-        if (tokenResult.hint) {
-          console.error(`   Hint: ${tokenResult.hint}`);
-        }
-      }
-    } else {
-      console.error('   Skipped: GEMINI_API_KEY not set');
-      console.error('   Hint: Set GEMINI_API_KEY in ~/.claude/.env for AI token extraction');
-    }
-  } else {
-    console.error('   Skipped (use --ai flag to enable)');
-  }
-
-  // Step 5: Rewrite links
-  console.error('\n[5/6] Rewriting links...');
-
-  const manifest = createPageManifest(pageList.pages, {
-    hasTokens,
+  // Step 3: Generate manifest
+  console.error('\n[3/3] Generating manifest...');
+
+  const manifest = {
+    baseUrl: url,
+    capturedAt: new Date().toISOString(),
+    pages: captureResult.pages
+      .filter(p => p.success)
+      .map(p => ({
+        path: p.path,
+        name: p.name,
+        originalUrl: p.url,
+        screenshots: Object.fromEntries(
+          Object.entries(p.screenshots)
+            .filter(([, v]) => !v.failed)
+            .map(([vp, v]) => [vp, path.relative(outputDir, v.path)])
+        )
+      })),
     stats: {
-      totalPages: pageList.pages.length,
+      totalPages: captureResult.stats.totalPages,
       totalScreenshots: captureResult.stats.totalScreenshots,
-      cssReduction: mergeResult.stats?.reduction || '0%',
       captureTimeMs: captureResult.stats.totalTimeMs
     }
-  });
-
-  // Copy HTML files to pages/ directory and rewrite links
-  const pagesDir = path.join(outputDir, 'pages');
-  await fs.mkdir(pagesDir, { recursive: true });
-
-  for (const page of manifest.pages) {
-    const sourceHtml = path.join(outputDir, 'html', page.file);
-    const destHtml = path.join(pagesDir, page.file);
-
-    try {
-      let html = await fs.readFile(sourceHtml, 'utf-8');
-      html = rewriteLinks(html, manifest, {
-        baseUrl: url,
-        injectTokensCss: hasTokens
-      });
-      await fs.writeFile(destHtml, html, 'utf-8');
-      console.error(`   Rewritten: ${page.file}`);
-    } catch (err) {
-      console.error(`   Warning: Failed to rewrite ${page.file}: ${err.message}`);
-    }
-  }
-
-  // Step 6: Generate manifest
-  console.error('\n[6/6] Generating manifest...');
+  };
 
   const manifestPath = path.join(outputDir, 'manifest.json');
   await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2));
@@ -260,7 +188,6 @@ export async function cloneSite(url, options = {}) {
     outputDir: path.resolve(outputDir),
     manifest,
     captureResult,
-    mergeResult,
     totalTimeMs: totalTime
   };
 }
@@ -272,7 +199,7 @@ export function showHelp() {
   console.log(`
 Usage: design-clone clone-site <url> [options]
 
-Clone multiple pages from a website with shared CSS and working navigation.
+Capture multi-viewport screenshots of multiple pages from a website.
 
 Options:
   --pages <paths>     Comma-separated paths (e.g., /,/about,/contact)
@@ -280,13 +207,11 @@ Options:
   --viewports <list>  Viewport list (default: desktop,tablet,mobile)
   --yes               Skip confirmation prompt
   --output <dir>      Custom output directory
-  --ai                Extract design tokens using Gemini AI (requires GEMINI_API_KEY)
 
 Examples:
   design-clone clone-site https://example.com
   design-clone clone-site https://example.com --max-pages 5
   design-clone clone-site https://example.com --pages /,/about,/contact
-  design-clone clone-site https://example.com --ai
 `);
 }