clone-website

# Clone Website --- Single-File HTML Prototype Builder You are about to reverse-engineer **$ARGUMENTS** into a pixel-perfect single-file HTML prototype. This is adapted from the [ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) approach but optimized for rapid prototyping workflows: **single self-contained HTML files** (no build system, no CDN dependencies, opens directly in a browser). ## Output Format Unlike the original repo (Next.js + shadcn/ui), our output is: - **One HTML file** with `<style>` + `<body>` + `<script>` sections - **Zero external dependencies** --- all CSS inline, all JS inline, all assets base64-encoded or SVG inline - **Real data injection** --- not lorem ipsum, but actual data from project Excel files, meeting notes, and brain DB - **Project design system** when available --- use tokens from a `design-system.json` colocated with the project ## Pre-Flight 1. **Playwright is required.** Verify: `npx playwright --version`. If not installed, ask the user to run `npm i -D playwright`. 2. Parse `$ARGUMENTS` as one or more URLs. Validate each is accessible. 3. Create output directory: `{project}/Screenshots-clone/` for captured assets. 4. Determine clone mode: - **Full clone** (default): pixel-perfect reproduction of the entire page - **Design extraction only** (`--extract`): capture design tokens, screenshots, and component specs without building - **Selective clone** (`--sections "header,table,sidebar"`): clone only named sections ## Phase 1: Reconnaissance (Playwright) ### 1.1 Screenshots Use Playwright to capture: ```javascript import { chromium } from 'playwright'; const browser = await chromium.launch(); const page = await browser.newPage({ viewport: { width: 1440, height: 900 } }); await page.goto(URL); // Full page screenshot await page.screenshot({ path: 'full-desktop.png', fullPage: true }); // Viewport screenshot await page.screenshot({ path: 'viewport-desktop.png' }); // Mobile await page.setViewportSize({ width: 390, height: 844 }); await page.screenshot({ path: 'viewport-mobile.png', fullPage: true }); ``` ### 1.2 Design Token Extraction Run this in Playwright's `page.evaluate()` to extract the complete design system: ```javascript const tokens = await page.evaluate(() => { // Colors const colorMap = new Map(); document.querySelectorAll('*').forEach(el => { const cs = getComputedStyle(el); ['color','backgroundColor','borderColor','borderTopColor','borderBottomColor'].forEach(p => { const v = cs[p]; if (v && v !== 'rgba(0, 0, 0, 0)' && v !== 'transparent') colorMap.set(v, (colorMap.get(v)||0)+1); }); }); // Typography const fontMap = new Map(); document.querySelectorAll('*').forEach(el => { const cs = getComputedStyle(el); const key = `${cs.fontFamily}|${cs.fontSize}|${cs.fontWeight}|${cs.lineHeight}`; fontMap.set(key, (fontMap.get(key)||0)+1); }); // Spacing const spacingSet = new Set(); document.querySelectorAll('*').forEach(el => { const cs = getComputedStyle(el); ['padding','margin','gap'].forEach(p => { const v = cs[p]; if (v && v !== '0px') spacingSet.add(v); }); }); // Shadows const shadowSet = new Set(); document.querySelectorAll('*').forEach(el => { const v = getComputedStyle(el).boxShadow; if (v && v !== 'none') shadowSet.add(v); }); // Radius const radiusSet = new Set(); document.querySelectorAll('*').forEach(el => { const v = getComputedStyle(el).borderRadius; if (v && v !== '0px') radiusSet.add(v); }); return { colors: [...colorMap.entries()].sort((a,b) => b[1]-a[1]).slice(0,30), typography: [...fontMap.entries()].sort((a,b) => b[1]-a[1]).slice(0,20), spacing: [...spacingSet].sort(), shadows: [...shadowSet], radii: [...radiusSet].sort() }; }); ``` ### 1.3 Component CSS Extraction (Deep) For each major component/section, extract exact computed styles: ```javascript // Run per component container const componentCSS = await page.evaluate((selector) => { const el = document.querySelector(selector); if (!el) return null; const props = [ 'fontSize','fontWeight','fontFamily','lineHeight','letterSpacing','color', 'textTransform','textDecoration','backgroundColor','background', 'padding','paddingTop','paddingRight','paddingBottom','paddingLeft', 'margin','marginTop','marginRight','marginBottom','marginLeft', 'width','height','maxWidth','minWidth','display','flexDirection', 'justifyContent','alignItems','gap','gridTemplateColumns', 'borderRadius','border','boxShadow','overflow','position', 'top','right','bottom','left','zIndex','opacity','transform','transition' ]; function extract(element, depth) { if (depth > 4) return null; const cs = getComputedStyle(element); const styles = {}; props.forEach(p => { const v = cs[p]; if (v && v !== 'none' && v !== 'normal' && v !== 'auto' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)') styles[p] = v; }); return { tag: element.tagName.toLowerCase(), classes: element.className?.toString().split(' ').slice(0,5).join(' '), text: element.childNodes.length === 1 && element.childNodes[0].nodeType === 3 ? element.textContent.trim().slice(0,200) : null, styles, children: [...element.children].slice(0,20).map(c => extract(c, depth+1)).filter(Boolean) }; } return extract(el, 0); }, selector); ``` ### 1.4 Interaction Sweep Use Playwright to discover behaviors: ```javascript // Scroll sweep for (let y = 0; y < await page.evaluate(() => document.body.scrollHeight); y += 300) { await page.evaluate(y => window.scrollTo(0, y), y); await page.waitForTimeout(200); // Check for sticky header changes, scroll-triggered animations, etc. } // Hover sweep --- hover over interactive elements const interactiveEls = await page.$$('button, a, [role="tab"], .nav-item, .card'); for (const el of interactiveEls.slice(0, 30)) { await el.hover(); await page.waitForTimeout(100); } // Click sweep --- test tabs, dropdowns, etc. const tabs = await page.$$('[role="tab"], .tab-item, .nav-tab'); for (const tab of tabs) { await tab.click(); await page.waitForTimeout(300); } ``` ### 1.5 Asset Extraction ```javascript // Extract all SVG icons as inline code const svgs = await page.evaluate(() => [...document.querySelectorAll('svg')].map(s => ({ html: s.outerHTML, parent: s.parentElement?.className?.toString().split(' ')[0] || 'unknown', width: s.getAttribute('width'), height: s.getAttribute('height') })) ); // Extract all image URLs for download const images = await page.evaluate(() => [...document.querySelectorAll('img')].map(i => ({ src: i.src, alt: i.alt, w: i.naturalWidth, h: i.naturalHeight })) ); ``` ## Phase 2: Foundation Build Convert extracted tokens into CSS custom properties: ```css :root { /* Colors --- from extraction, mapped to semantic names */ --color-bg: {extracted}; --color-text: {extracted}; --color-text-muted: {extracted}; --color-accent: {extracted}; --color-border: {extracted}; /* ... */ /* Typography */ --font-family: {extracted}; --font-size-body: {extracted}; /* ... */ /* Shadows */ --shadow-sm: {extracted}; --shadow-md: {extracted}; /* ... */ } ``` ## Phase 3: Parallel Section Building For each major section of the page, dispatch a builder agent: 1. Write a spec file with exact CSS values + screenshot + content 2. Launch agent in a worktree (or as a subagent) with the spec 3. Each agent produces its section's HTML + CSS + JS 4. Orchestrator assembles all sections into one file **Complexity budget**: If a section spec exceeds ~150 lines, split it. ## Phase 4: Assembly Merge all sections into one self-contained HTML file: 1. Deduplicate CSS --- combine all section styles, remove duplicates 2. Order HTML --- sections in visual order (top to bottom) 3. Combine JS --- all event handlers and render functions in one `<script>` block 4. Base64-encode any images that couldn't be replaced with CSS/SVG 5. Verify: open in browser, compare against original screenshots ## Phase 5: Quality Check Use Playwright to: 1. Open the built HTML file 2. Take screenshots at the same viewpoints as Phase 1 3. Compare side-by-side (save both for manual review) 4. Test all interactions (clicks, hovers, tabs) 5. Report any visual differences ## Project-Specific Mode When a `design-system.json` exists in the project: - Load tokens (colors, typography, spacing, shadows, radii) from that file - Apply them as CSS custom properties in the output - Inject any real data referenced in the project (Excel, JSON, brain DB) ## Reference - Adapted from [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)