design-clone 1.0.2 → 1.1.1

package/SKILL.md

@@ -104,6 +104,54 @@ python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "animation hover" -
 
 **Output:** desktop.png, tablet.png, mobile.png, source.html, source.css, source-raw.css
 
+### design:clone-site
+
+Multi-page site cloning with shared CSS and working navigation.
+
+```bash
+/design:clone-site https://example.com
+```
+
+**Workflow:**
+```bash
+# Auto-discover pages from navigation
+design-clone clone-site https://example.com
+
+# Or specify pages manually
+design-clone clone-site https://example.com --pages /,/about,/contact
+
+# Options:
+#   --pages <paths>     Comma-separated paths
+#   --max-pages <n>     Limit pages (default: 10)
+#   --viewports <list>  Viewports (default: desktop,tablet,mobile)
+#   --yes               Skip confirmation
+#   --output <dir>      Custom output directory
+```
+
+**Output Structure:**
+```
+cloned-designs/{timestamp}-{domain}/
+├── analysis/           # Screenshots by viewport
+│   ├── 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
+```
+
+**Features:**
+- Auto-discovers pages from navigation (SPA-aware)
+- Shared CSS with deduplication (15-30% reduction)
+- Working internal links
+- Progress reporting
+- Graceful error handling (continues on page failures)
+
+---
+
 ### design:clone-px
 
 Pixel-perfect clone with full asset extraction and AI analysis.
@@ -223,6 +271,11 @@ GEMINI_API_KEY=your-key    # Optional: enables AI structure analysis
 | screenshot.js | src/core/ | Capture screenshots + extract HTML/CSS |
 | filter-css.js | src/core/ | Filter unused CSS rules |
 | extract-assets.js | src/core/ | Download images, fonts, icons |
+| discover-pages.js | src/core/ | Discover navigation links |
+| multi-page-screenshot.js | src/core/ | Capture multiple pages |
+| 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 |
 | verify-menu.js | src/verification/ | Validate navigation structure |

package/bin/cli.js

@@ -5,12 +5,14 @@
  * 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
  */
 
 import { init } from './commands/init.js';
 import { verify } from './commands/verify.js';
 import { help } from './commands/help.js';
+import { cloneSite, parseArgs as parseCloneSiteArgs, showHelp as showCloneSiteHelp } from './commands/clone-site.js';
 
 const [,, command, ...args] = process.argv;
 
@@ -25,6 +27,20 @@ async function main() {
       case 'check':
         await verify();
         break;
+      case 'clone-site':
+        if (args.includes('--help') || args.includes('-h')) {
+          showCloneSiteHelp();
+        } else {
+          const options = parseCloneSiteArgs(args);
+          if (!options.url) {
+            console.error('Error: URL is required');
+            showCloneSiteHelp();
+            process.exit(1);
+          }
+          const result = await cloneSite(options.url, options);
+          console.log(JSON.stringify(result, null, 2));
+        }
+        break;
       case 'help':
       case '--help':
       case '-h':

package/bin/commands/clone-site.js

@@ -0,0 +1,324 @@
+/**
+ * Clone Site Command
+ *
+ * Clone multiple pages from a website with shared CSS and working navigation.
+ *
+ * Usage:
+ *   design-clone clone-site <url> [options]
+ *
+ * Options:
+ *   --pages <paths>     Comma-separated paths (e.g., /,/about,/contact)
+ *   --max-pages <n>     Maximum pages to clone (default: 10)
+ *   --viewports <list>  Viewport list (default: desktop,tablet,mobile)
+ *   --yes               Skip confirmation prompt
+ *   --output <dir>      Custom output directory
+ */
+
+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';
+
+/**
+ * Generate output directory name
+ * @param {string} url - Target URL
+ * @returns {string} Output directory path
+ */
+function generateOutputDir(url) {
+  const urlObj = new URL(url);
+  const domain = urlObj.hostname.replace(/^www\./, '');
+  const timestamp = new Date().toISOString()
+    .replace(/[-:]/g, '')
+    .replace('T', '-')
+    .slice(0, 13);
+
+  return `./cloned-designs/${timestamp}-${domain}`;
+}
+
+/**
+ * Parse CLI arguments
+ * @param {string[]} args - CLI arguments
+ * @returns {Object} Parsed options
+ */
+export function parseArgs(args) {
+  const options = {
+    url: null,
+    pages: null,
+    maxPages: 10,
+    viewports: ['desktop', 'tablet', 'mobile'],
+    skipConfirm: false,
+    output: null,
+    ai: false
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg === '--pages' && args[i + 1]) {
+      options.pages = args[++i].split(',').map(p => p.trim());
+    } else if (arg === '--max-pages' && args[i + 1]) {
+      options.maxPages = parseInt(args[++i], 10);
+    } else if (arg === '--viewports' && args[i + 1]) {
+      options.viewports = args[++i].split(',').map(v => v.trim());
+    } else if (arg === '--yes' || arg === '-y') {
+      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;
+    }
+  }
+
+  return options;
+}
+
+/**
+ * Clone multiple pages from a website
+ * @param {string} url - Target URL
+ * @param {Object} options - Clone options
+ * @returns {Promise<Object>} Clone result
+ */
+export async function cloneSite(url, options = {}) {
+  const startTime = Date.now();
+  const {
+    pages: manualPages,
+    maxPages = 10,
+    viewports = ['desktop', 'tablet', 'mobile'],
+    skipConfirm = false,
+    output,
+    ai = false
+  } = options;
+
+  // Validate URL
+  let baseUrl;
+  try {
+    baseUrl = new URL(url);
+  } catch {
+    throw new Error(`Invalid URL: ${url}`);
+  }
+
+  // Generate output directory
+  const outputDir = output || generateOutputDir(url);
+
+  console.error(`\n[clone-site] Target: ${url}`);
+  console.error(`[clone-site] Output: ${outputDir}`);
+
+  // Step 1: Discover or use manual pages
+  console.error('\n[1/6] Discovering pages...');
+
+  let pageList;
+  if (manualPages && manualPages.length > 0) {
+    // Use manual page list
+    pageList = {
+      success: true,
+      pages: manualPages.map(p => ({
+        path: p,
+        name: p === '/' ? 'Home' : p.replace(/^\//, '').replace(/-/g, ' '),
+        url: new URL(p, url).href
+      }))
+    };
+    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}`);
+      console.error('   Falling back to homepage only');
+    }
+    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...');
+
+  const captureResult = await captureMultiplePages(pageList.pages, {
+    outputDir,
+    viewports,
+    onProgress: (current, total, info) => {
+      console.error(`   [${current}/${total}] ${info.status}: ${info.name}`);
+    }
+  });
+
+  if (!captureResult.success) {
+    throw new Error(`Capture failed: ${captureResult.error}`);
+  }
+
+  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,
+    stats: {
+      totalPages: pageList.pages.length,
+      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));
+  console.error(`   Created: manifest.json`);
+
+  // Summary
+  const totalTime = Date.now() - startTime;
+  console.error(`\n[clone-site] Complete!`);
+  console.error(`   Output: ${path.resolve(outputDir)}`);
+  console.error(`   Pages: ${manifest.pages.length}`);
+  console.error(`   Time: ${(totalTime / 1000).toFixed(1)}s`);
+
+  return {
+    success: true,
+    outputDir: path.resolve(outputDir),
+    manifest,
+    captureResult,
+    mergeResult,
+    totalTimeMs: totalTime
+  };
+}
+
+/**
+ * Show help message
+ */
+export function showHelp() {
+  console.log(`
+Usage: design-clone clone-site <url> [options]
+
+Clone multiple pages from a website with shared CSS and working navigation.
+
+Options:
+  --pages <paths>     Comma-separated paths (e.g., /,/about,/contact)
+  --max-pages <n>     Maximum pages to auto-discover (default: 10)
+  --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
+`);
+}
+
+// CLI entry point
+const isMainModule = process.argv[1] && (
+  process.argv[1].endsWith('clone-site.js') ||
+  process.argv[1].includes('clone-site')
+);
+
+if (isMainModule) {
+  const args = process.argv.slice(2);
+
+  if (args.includes('--help') || args.includes('-h')) {
+    showHelp();
+    process.exit(0);
+  }
+
+  const options = parseArgs(args);
+
+  if (!options.url) {
+    console.error('Error: URL is required');
+    showHelp();
+    process.exit(1);
+  }
+
+  cloneSite(options.url, options)
+    .then(result => {
+      console.log(JSON.stringify(result, null, 2));
+      process.exit(0);
+    })
+    .catch(err => {
+      console.error(`\n[ERROR] ${err.message}`);
+      process.exit(1);
+    });
+}

package/bin/commands/help.js

@@ -9,16 +9,28 @@ design-clone - Claude Code skill for website design cloning
 Usage:
   design-clone init [options]   Install skill to ~/.claude/skills/
   design-clone verify           Check installation status
+  design-clone clone-site <url> Clone multiple pages from a website
   design-clone help             Show this help
 
-Options:
+Init Options:
   --force, -f    Overwrite existing installation
   --skip-deps    Skip dependency installation
 
+Clone-site Options:
+  --pages <paths>     Comma-separated paths (e.g., /,/about,/contact)
+  --max-pages <n>     Maximum pages to auto-discover (default: 10)
+  --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 init              # Install skill
-  design-clone init --force      # Reinstall, overwrite existing
-  design-clone verify            # Check if installed correctly
+  design-clone init                     # Install skill
+  design-clone init --force             # Reinstall, overwrite existing
+  design-clone verify                   # Check if installed correctly
+  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
 
 After installation:
   1. Set GEMINI_API_KEY in ~/.claude/.env (optional, for AI analysis)

package/bin/commands/init.js

@@ -17,6 +17,8 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const SKILL_SOURCE = path.resolve(__dirname, '../..');
 // Destination: ~/.claude/skills/design-clone
 const getSkillDest = () => path.join(process.env.HOME || process.env.USERPROFILE || '', '.claude/skills/design-clone');
+// Commands destination: ~/.claude/commands/design/
+const getCommandsDest = () => path.join(process.env.HOME || process.env.USERPROFILE || '', '.claude/commands/design');
 
 /**
  * Install skill to Claude Code skills directory
@@ -93,6 +95,29 @@ export async function init(args) {
     process.exit(1);
   }
 
+  // Copy slash commands to ~/.claude/commands/design/
+  console.log('Installing slash commands...');
+  try {
+    const COMMANDS_DEST = getCommandsDest();
+    const COMMANDS_SOURCE = path.join(SKILL_SOURCE, 'commands/design');
+
+    // Ensure commands directory exists
+    await fs.mkdir(COMMANDS_DEST, { recursive: true });
+
+    // Copy command files
+    const commandFiles = await fs.readdir(COMMANDS_SOURCE).catch(() => []);
+    for (const file of commandFiles) {
+      if (file.endsWith('.md')) {
+        const src = path.join(COMMANDS_SOURCE, file);
+        const dest = path.join(COMMANDS_DEST, file);
+        await fs.copyFile(src, dest);
+        console.log(`  Installed: /design:${file.replace('.md', '')}`);
+      }
+    }
+  } catch (error) {
+    console.warn(`  Warning: Could not install slash commands: ${error.message}`);
+  }
+
   // Install dependencies
   if (!skipDeps) {
     // Node.js dependencies
@@ -156,6 +181,9 @@ export async function init(args) {
   console.log('\n✓ design-clone skill installed successfully!\n');
   console.log('Next steps:');
   console.log('  1. (Optional) Set GEMINI_API_KEY in ~/.claude/.env for AI analysis');
-  console.log('  2. Use /design:clone or /design:clone-px in Claude Code');
+  console.log('  2. Use slash commands in Claude Code:');
+  console.log('     /design:clone      - Clone single page');
+  console.log('     /design:clone-site - Clone multiple pages');
+  console.log('     /design:clone-px   - Pixel-perfect clone');
   console.log('\nRun "design-clone verify" to check installation status.');
 }

package/commands/design/clone-site.md

@@ -0,0 +1,135 @@
+---
+description: Clone multiple pages from a website with shared CSS and navigation
+argument-hint: [url] [--max-pages N] [--ai]
+---
+
+Clone multiple pages from this website with shared CSS and working navigation:
+<url>$ARGUMENTS</url>
+
+## Required Skills (Priority Order)
+1. **`chrome-devtools`** - Multi-viewport screenshot capture
+2. **`ai-multimodal`** - Gemini Vision for design token extraction (with --ai flag)
+
+## Pipeline Overview
+
+```
+URL -> Page Discovery -> Multi-page Capture -> CSS Filtering & Merge -> Link Rewriting -> [AI Tokens] -> Output
+```
+
+## Workflow
+
+### STEP 1: Run Clone-Site Command
+
+Use the design-clone CLI to clone multiple pages:
+
+```bash
+# Basic usage - auto-discovers pages from navigation
+design-clone clone-site "$ARGUMENTS"
+
+# With options
+design-clone clone-site "$ARGUMENTS" --max-pages 5
+
+# Specific pages
+design-clone clone-site "$ARGUMENTS" --pages /,/about,/contact
+
+# With AI design token extraction (requires GEMINI_API_KEY)
+design-clone clone-site "$ARGUMENTS" --ai
+```
+
+### CLI Options
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `--pages <paths>` | auto | Comma-separated paths (e.g., /,/about,/contact) |
+| `--max-pages <n>` | 10 | Maximum pages to auto-discover |
+| `--viewports <list>` | desktop,tablet,mobile | Viewport list |
+| `--yes` | false | Skip confirmation prompt |
+| `--output <dir>` | ./cloned-designs/{timestamp}-{domain} | Custom output directory |
+| `--ai` | false | Extract design tokens using Gemini AI |
+
+### STEP 2: Process Flow (Automatic)
+
+The command executes these steps automatically:
+
+1. **Page Discovery** - Crawls navigation links, respects same-domain
+2. **Multi-page Capture** - Screenshots + HTML/CSS for each page
+3. **CSS Merge** - Combines filtered CSS with deduplication (15-30% reduction)
+4. **Link Rewriting** - Updates internal links to local .html files
+5. **Token Extraction** (if --ai) - Gemini Vision extracts design tokens
+6. **Manifest Generation** - Creates manifest.json with page metadata
+
+### Output Structure
+
+```
+cloned-designs/{timestamp}-{domain}/
+├── analysis/           # Screenshots by viewport
+│   ├── desktop/
+│   │   ├── index.png
+│   │   ├── about.png
+│   │   └── contact.png
+│   ├── tablet/
+│   └── mobile/
+├── html/               # Raw extracted HTML (source)
+├── css/                # Per-page CSS (raw + filtered)
+├── pages/              # HTML with rewritten links
+│   ├── index.html      # Links to ../styles.css
+│   ├── about.html
+│   └── contact.html
+├── styles.css          # Merged + deduplicated CSS
+├── tokens.css          # Design tokens (if --ai)
+├── design-tokens.json  # Token data (if --ai)
+├── manifest.json       # Page metadata + mapping
+└── capture-results.json
+```
+
+### STEP 3: Review & Edit
+
+After cloning:
+
+1. **Test navigation** - Open `pages/index.html` in browser
+2. **Verify CSS** - Check that styles.css covers all pages
+3. **Check screenshots** - Review analysis/ for visual reference
+4. **Edit tokens** (if --ai) - Modify tokens.css to customize design
+
+## Features
+
+- **Auto-discovers pages** from navigation (SPA-aware)
+- **Shared CSS** with deduplication (15-30% reduction)
+- **Filtered CSS** - Uses per-page filtered CSS, not raw
+- **Working internal links** - Rewrites to local .html files
+- **Progress reporting** - Shows capture progress
+- **Graceful errors** - Continues on individual page failures
+- **AI tokens** (optional) - Gemini Vision design token extraction
+
+## Environment Variables
+
+```bash
+# Optional: For AI token extraction with --ai flag
+GEMINI_API_KEY=your-key
+```
+
+## Examples
+
+```bash
+# Clone with auto-discovery (up to 10 pages)
+/design:clone-site https://example.com
+
+# Clone specific pages only
+/design:clone-site https://example.com --pages /,/about,/pricing
+
+# Clone with AI token extraction
+/design:clone-site https://example.com --ai --max-pages 5
+
+# Clone to custom directory
+/design:clone-site https://example.com --output ./my-clone
+```
+
+## Error Handling
+
+| Scenario | Behavior |
+|----------|----------|
+| Page fails to load | Continues with other pages, logs warning |
+| No navigation found | Falls back to homepage only |
+| CSS extraction fails | Uses raw CSS fallback |
+| No GEMINI_API_KEY | Skips token extraction, logs hint |
+| Python not found | Skips AI features, continues |