design-clone 1.0.2 → 1.1.0

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/docs/troubleshooting.md

@@ -95,3 +95,75 @@ GEMINI_API_KEY=your-api-key-here
 ```bash
 --viewports '[{"width":1440,"height":900,"name":"custom"}]'
 ```
+
+## clone-site Issues
+
+### No pages discovered
+
+**Symptom:** Only homepage cloned, other pages not found.
+
+**Causes:**
+- Site uses JS-rendered navigation (React/Vue/Angular)
+- Navigation not in standard selectors (header nav, footer nav)
+
+**Solutions:**
+```bash
+# Specify pages manually
+design-clone clone-site https://example.com --pages /,/about,/contact,/services
+
+# Increase max pages if hitting limit
+design-clone clone-site https://example.com --max-pages 20
+```
+
+### Links not working in cloned pages
+
+**Symptom:** Internal links point to original URLs.
+
+**Causes:**
+- Page not in discovered list
+- HTML file not found for rewriting
+
+**Solutions:**
+1. Check `manifest.json` for page list
+2. Ensure all pages captured successfully (check `capture-results.json`)
+3. Re-run with manual `--pages` flag including missing pages
+
+### CSS broken on some pages
+
+**Symptom:** Styling differs between cloned pages.
+
+**Causes:**
+- Page-specific CSS not merged
+- CSS extraction failed for some pages
+
+**Solutions:**
+1. Check `css/` folder for per-page CSS files
+2. Review merge stats in output
+3. Try with fewer pages to isolate issue
+
+### Timeout during capture
+
+**Error:** `Navigation timeout`
+
+**Causes:**
+- Large pages
+- Slow server
+- Too many pages
+
+**Solutions:**
+```bash
+# Reduce pages
+design-clone clone-site https://example.com --max-pages 5
+
+# Use specific viewports only
+design-clone clone-site https://example.com --viewports desktop
+```
+
+### Memory issues
+
+**Symptom:** Process crashes or hangs.
+
+**Solutions:**
+1. Reduce `--max-pages` to 5 or fewer
+2. Clone in batches
+3. Close other applications

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-clone",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "description": "Claude Code skill for cloning website designs via multi-viewport screenshots, HTML/CSS extraction, and Gemini AI analysis",
   "bin": {

package/src/core/css-extractor.js

@@ -9,6 +9,27 @@
 export const MAX_CSS_SIZE = 5 * 1024 * 1024;   // 5MB limit
 export const MAX_CSS_RULES_WARN = 5000;        // Warn on large stylesheets
 
+// Layout-critical properties for accurate cloning
+export const LAYOUT_PROPERTIES = {
+  // Display & Flex
+  display: ['display', 'flexDirection', 'flexWrap', 'justifyContent',
+            'alignItems', 'alignContent', 'gap', 'rowGap', 'columnGap'],
+  // Grid
+  grid: ['gridTemplateColumns', 'gridTemplateRows', 'gridGap', 'gridAutoFlow'],
+  // Position
+  position: ['position', 'top', 'right', 'bottom', 'left', 'zIndex'],
+  // Sizing
+  sizing: ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight'],
+  // Box Model
+  box: ['boxSizing', 'overflow', 'overflowX', 'overflowY', 'borderWidth', 'borderStyle'],
+  // Visual (existing)
+  visual: ['color', 'backgroundColor', 'fontFamily', 'fontSize',
+           'fontWeight', 'lineHeight', 'padding', 'margin', 'borderRadius']
+};
+
+// Flatten for iteration
+export const ALL_PROPERTIES = Object.values(LAYOUT_PROPERTIES).flat();
+
 /**
  * Extract all CSS from page
  * @param {Page} page - Puppeteer page
@@ -16,7 +37,7 @@ export const MAX_CSS_RULES_WARN = 5000;        // Warn on large stylesheets
  * @returns {Promise<{cssBlocks: Array, corsBlocked: Array, computedStyles: Object, totalRules: number, warnings: Array}>}
  */
 export async function extractAllCss(page, baseUrl) {
-  return await page.evaluate((url) => {
+  return await page.evaluate((url, allProps) => {
     const cssBlocks = [];
     const corsBlocked = [];
     const warnings = [];
@@ -77,17 +98,21 @@ export async function extractAllCss(page, baseUrl) {
         const el = document.querySelector(selector);
         if (el) {
           const style = getComputedStyle(el);
-          computedStyles[selector] = {
-            color: style.color,
-            backgroundColor: style.backgroundColor,
-            fontFamily: style.fontFamily,
-            fontSize: style.fontSize,
-            fontWeight: style.fontWeight,
-            lineHeight: style.lineHeight,
-            padding: style.padding,
-            margin: style.margin,
-            borderRadius: style.borderRadius
-          };
+          const styles = {};
+
+          // Extract all layout + visual properties
+          allProps.forEach(prop => {
+            const value = style[prop];
+            // Skip empty/default values to reduce payload (except display)
+            if (prop === 'display') {
+              styles[prop] = value; // Always include display for inline strategy
+            } else if (value && value !== 'none' && value !== 'auto' &&
+                value !== 'normal' && value !== '0px' && value !== 'static') {
+              styles[prop] = value;
+            }
+          });
+
+          computedStyles[selector] = styles;
         }
       } catch (e) {
         // Ignore invalid selectors
@@ -103,5 +128,5 @@ export async function extractAllCss(page, baseUrl) {
       totalRules,
       warnings
     };
-  }, baseUrl);
+  }, baseUrl, ALL_PROPERTIES);
 }