/clone-anywebsite

name: clone-anywebsite
description: >-
  Clone any website's landing page with pixel-perfect fidelity. Visual-first
  workflow: screenshot → sniper CSS extraction → deep DOM interrogation →
  animation detection → rebuild in React + Tailwind + Framer Motion. Uses AdaL
  browser-use agent tools. Includes ready-to-use extraction scripts, gotcha
  catalog, quality checklist, and speedrun prompt.
author: SylphAI-Inc
version: 2.0.0

Guide: Visual-First Web Cloning Recipe v2

When building a high-fidelity landing page clone, the biggest trap is relying purely on DOM trees and CSS dumps. Modern website builders (Framer, Webflow) generate deeply nested "div soup" and obfuscated CSS to create visual effects.

**The Golden Rule:** Trust your "eyes" (screenshots) first, but when an effect looks too complex to be pure CSS, use **Deep DOM Interrogation** to steal the exact asset — never guess the math.

> **Tool note:** This guide uses AdaL browser-use agent tools (`navigate`, `javascript_tool`, `computer`, `resize_window`, `tabs_context`, `bash`). If you're not on AdaL, the same JS payloads work with Chrome DevTools MCP (`evaluate_script`), Playwright (`page.evaluate`), or any browser automation tool — just swap the invocation wrapper.

The 80/20 Cloning Philosophy

Divide your workflow into two phases so you don't get bogged down pixel-pushing too early:

1. **The 80% Sprint (Speed & Structure):** Get the page laid out rapidly. Fetch the semantic HTML, scaffold the React component tree (`Navbar`, `Hero`, `Features`), and apply basic Tailwind for layout (Flex/Grid) and spacing. Accept approximations — solid colors instead of gradients, standard shadows, static backgrounds. **Move fast.** 2. **The 20% Polish (Pixel Perfection & Physics):** Once the structure is on screen, shift to meticulous engineering. Use "Sniper CSS" to extract exact multi-stop gradients, rip WebGL canvas backgrounds to `.webm`, map massive multi-layer box-shadows, and implement Framer Motion spring physics.

---

The 4-Phase Workflow

Phase 1: Visual Discovery

**Goal:** Understand what you're cloning before touching code.

Step 0: Screenshot Matrix (3 Viewports)

Always capture the target at multiple sizes before coding. Do not optimize only for the first screenshot.

| Viewport | Purpose | Required? | |---|---|---| | `1440×1400` | Primary desktop comparison target | Always | | `1920×1200` or larger | Detects false fixed-left layouts and max-width issues | Always | | `390×844` or `430×932` | Mobile hero layout and nav behavior | Always unless user says desktop-only |

navigate("https://target-site.com/")
tabs_context                                   // confirm tab_id
resize_window(tab_id=1, width=1440, height=1400)
javascript_tool(tab_id=1, action="javascript_exec", text="window.scrollTo(0, 0); 'ok';")
computer(tab_id=1, action="wait", duration=2)  // let animations settle
computer(tab_id=1, action="screenshot")        // desktop hero

resize_window(tab_id=1, width=1920, height=1200)
computer(tab_id=1, action="wait", duration=2)
computer(tab_id=1, action="screenshot")        // large desktop

resize_window(tab_id=1, width=390, height=1400)
computer(tab_id=1, action="wait", duration=2)
computer(tab_id=1, action="screenshot")        // mobile

Step 1: The "Eye Test" (Visual Grounding)

**Before looking at a single line of code, visually ground yourself in the reference site.**

Read your screenshots and actively identify the *Vibe*:

• **Backgrounds:** Is it flat? A subtle radial gradient? Sweeping SVG waves? Floating blurred orbs? Star/particle field?
• **Buttons:** Are they flat? Glassmorphic (backdrop-blur)? Glowing auras? Multi-layer shadows?
• **Typography:** Which specific words are highlighted? Gradient text clips? Tight negative letter-spacing?
• **Badges/pills:** Compound components (pill-in-a-pill)?

Step 2: Macro Structure Capture (Semantic HTML)

Pull a text/structure snapshot — grab the section landmarks and real copy in one shot:

javascript_tool(tab_id=1, action="javascript_exec", text="
(() => JSON.stringify({
  h1: document.querySelector('h1')?.innerText,
  navLinks: Array.from(document.querySelectorAll('nav a')).map(a => a.innerText.trim()).filter(Boolean),
  buttons: Array.from(document.querySelectorAll('a, button')).map(b => b.innerText.trim()).filter(Boolean).slice(0, 12),
  sections: Array.from(document.querySelectorAll('section')).length
}, null, 2))()
")

**Do NOT blindly copy the DOM.** Distill the complicated nested builder divs into clean, semantic React (`<nav>`, `<section>`, `<h1>`, `<button>`). A 12-deep Framer `<div>` chain becomes one `<button>`. Note: Framer often duplicates button text (`"Book a callBook a call"`) — dedupe it.

Step 3: Micro Extraction (Sniper CSS)

Extract exact pixel-perfect design tokens. **Never dump the full `getComputedStyle` object** — it returns 500+ properties, overwhelms your context window, and creates hallucination. Use the targeted scripts in the **Sniper CSS Script Library** below.

Step 4: Animation Detection

Landing page animations come from many sources. Don't assume canvas = animation. Run this comprehensive scanner to detect what's powering the motion:

javascript_tool(tab_id=1, action="javascript_exec", text="
(() => {
  const results = { animations: [], tech: {}, elements: {} };

  // A. CSS Animations & Transitions
  const allEls = document.querySelectorAll('*');
  const cssAnimated = [];
  allEls.forEach(el => {
    const s = getComputedStyle(el);
    if (s.animationName && s.animationName !== 'none') {
      cssAnimated.push({ tag: el.tagName, class: el.className?.toString().slice(0, 60), animation: s.animationName, duration: s.animationDuration });
    }
  });
  results.animations.push({ type: 'css', count: cssAnimated.length, samples: cssAnimated.slice(0, 5) });

  // B. Canvas elements
  results.elements.canvas = Array.from(document.querySelectorAll('canvas')).map(c => ({
    width: c.wid