Steps in the Reconnaissance Phase of the AI Website Cloning Process

The Reconnaissance phase comprises seven sequential steps: opening the target URL, capturing responsive screenshots, extracting global design assets, performing comprehensive interaction sweeps, documenting behaviors, mapping page topology, and persisting the structure to markdown files.

The Reconnaissance phase serves as the exploratory foundation of the AI Website Cloner pipeline in the JCodesMore/ai-website-cloner-template repository. This phase systematically collects every visual, stylistic, and interactive detail from the target website before any code generation begins. According to the skill definition in .github/skills/clone-website/SKILL.md (lines 120-166), executing these steps ensures the cloning process has accurate references and complete behavioral documentation.

What Is the Reconnaissance Phase?

The Reconnaissance phase is the initial data-gathering stage of the AI Website Cloner. Its primary purpose is to create a comprehensive blueprint of the target site by capturing full-page screenshots, extracting design tokens, cataloging interactions, and mapping the visual structure. This phase runs entirely within a browser automation environment using Chrome or Playwright MCP tools.

The Seven Steps of the Reconnaissance Phase

The phase follows a strict sequential order defined in the skill documentation. Each step produces specific artifacts that drive the subsequent cloning pipeline.

Step 1: Open the Target Page

Launch the target URL in a browser automation MCP (such as Chrome or Playwright). This establishes the browser context for all subsequent extraction operations.

Step 2: Capture Full-Page Screenshots

Capture two full-page screenshots at specific viewport sizes: desktop at 1440 px width and mobile at 390 px width. Save these images to docs/design-references/ to serve as pixel-perfect visual references for the builder agents.

Step 3: Extract Global Assets

Before analyzing individual sections, pull site-wide design tokens and assets:

• Fonts – Parse <link> tags and computed font-family values
• Colors – Sample computed styles across the page to map design tokens
• Favicons and meta – Download all icons, Open Graph images, and manifest.json
• Global UI patterns – Document scroll-snap behaviors, smooth-scroll libraries, global keyframes, and custom scrollbars

Step 4: Perform the Mandatory Interaction Sweep

Conduct a dedicated pass after screenshots to catalog all interactive behaviors. This includes four distinct sub-sweeps:

• Scroll sweep – Scroll slowly from top to bottom, pausing at each section to record header style shifts, fade-in animations, and scroll-triggered effects
• Click sweep – Click every interactive element (buttons, tabs, cards, links) and document the resulting UI changes (modals, dropdowns, content swaps)
• Hover sweep – Hover over potential hover-state elements to capture style changes
• Responsive sweep – Repeat the three sweeps at three viewport widths: desktop (1440 px), tablet (768 px), and mobile (390 px), noting layout breakpoints

Step 5: Record Findings to BEHAVIORS.md

Consolidate all interaction discoveries into docs/research/BEHAVIORS.md. This file becomes the "behavior bible" that informs component specifications and animation implementations later in the pipeline.

Step 6: Map the Page Topology

Enumerate every distinct visual section from top to bottom. For each section, assign a working name and document:

• Visual order and sequence
• Fixed versus flow positioning status
• Overall layout architecture (columns, scroll containers, z-index)
• Inter-section dependencies
• Interaction model classification (static, click-driven, scroll-driven, or time-driven)

Step 7: Persist Topology to PAGE_TOPOLOGY.md

Write the complete topology map to docs/research/PAGE_TOPOLOGY.md. This blueprint drives the later "extract → spec → dispatch" loop, telling builder agents exactly which sections exist and how they relate structurally.

Implementation Code Examples

The following snippets illustrate how developers can implement the core Reconnaissance actions using browser automation tools.

Capture Screenshots with Playwright

// playwright-mcp.mjs – run inside the browser MCP
import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(process.argv[2]);          // target URL
  // Desktop
  await page.setViewportSize({ width: 1440, height: 900 });
  await page.screenshot({ 
    path: 'docs/design-references/full-desktop.png', 
    fullPage: true 
  });
  // Mobile
  await page.setViewportSize({ width: 390, height: 800 });
  await page.screenshot({ 
    path: 'docs/design-references/full-mobile.png', 
    fullPage: true 
  });
  await browser.close();
})();

Extract Global Fonts and Colors

// global-extraction.mjs – inject via browser MCP
(() => {
  // Fonts
  const fontLinks = [...document.querySelectorAll('link[rel*="stylesheet"]')]
    .filter(l => l.href.includes('fonts.googleapis.com') || l.href.includes('fonts'));
  const fonts = fontLinks.map(l => l.href);

  // Colors – sample computed styles
  const elems = document.querySelectorAll('body *');
  const colors = new Set();
  elems.forEach(el => {
    const cs = getComputedStyle(el);
    colors.add(cs.color);
    colors.add(cs.backgroundColor);
  });

  return { fonts, colors: [...colors] };
})();

Interaction Sweep Skeleton

// interaction-sweep.mjs – high-level flow
(async () => {
  // 1️⃣ Scroll sweep
  for (let y = 0; y < document.body.scrollHeight; y += 100) {
    window.scrollTo(0, y);
    await new Promise(r => setTimeout(r, 200));
    // Record style changes (e.g., header height, opacity)
  }

  // 2️⃣ Click sweep
  const clickables = document.querySelectorAll('a, button, [role="button"]');
  for (const el of clickables) {
    el.click();
    await new Promise(r => setTimeout(r, 300));
    // Capture DOM/CSS changes
  }

  // 3️⃣ Hover sweep
  const hoverables = document.querySelectorAll('a, button, .hoverable');
  for (const el of hoverables) {
    el.dispatchEvent(new Event('mouseover'));
    await new Promise(r => setTimeout(r, 200));
    // Capture hover styles
    el.dispatchEvent(new Event('mouseout'));
  }
})();

Key Output Files and Artifacts

The Reconnaissance phase generates specific files that power the remainder of the cloning pipeline:

• .github/skills/clone-website/SKILL.md – The authoritative source defining the phase steps and detailed instructions (lines 120-166)
• docs/research/BEHAVIORS.md – Generated runtime file containing all detected interactions (scroll, click, hover, responsive changes)
• docs/research/PAGE_TOPOLOGY.md – The structural blueprint driving component specification
• docs/design-references/ – Folder containing full-page screenshots and visual references
• src/app/layout.tsx and src/app/globals.css – Foundation files later updated with extracted fonts, colors, and global CSS

Summary

The Reconnaissance phase establishes the data foundation for accurate website cloning through systematic exploration:

• Seven sequential steps ensure comprehensive coverage of visual and behavioral assets
• Dual-viewport screenshots (1440 px and 390 px) provide pixel-perfect references
• Global extraction captures fonts, colors, favicons, and UI patterns before section analysis
• Mandatory interaction sweeps document scroll, click, hover, and responsive behaviors at three breakpoints
• Structured documentation in BEHAVIORS.md and PAGE_TOPOLOGY.md creates an authoritative blueprint for builder agents

Frequently Asked Questions

What is the purpose of the Reconnaissance phase in the AI website cloning process?

The Reconnaissance phase serves as the data-gathering foundation that collects every visual, stylistic, and interactive detail from the target site before any code is written. It ensures the cloning pipeline has accurate screenshots, design tokens, interaction catalogs, and structural maps to produce pixel-perfect replicas.

What file stores the interaction behaviors discovered during Reconnaissance?

All interaction behaviors are consolidated into docs/research/BEHAVIORS.md. This file acts as the "behavior bible" for the project, documenting scroll triggers, click handlers, hover states, and responsive changes discovered during the mandatory interaction sweep.

What viewport sizes are required for the interaction sweep?

The Reconnaissance phase requires testing at three specific viewport widths: desktop at 1440 px, tablet at 768 px, and mobile at 390 px. These breakpoints ensure the capture of responsive layout changes and interaction patterns across all device categories.

How does the page topology map guide the cloning process?

The page topology map, saved to docs/research/PAGE_TOPOLOGY.md, enumerates every visual section with its layout architecture, positioning status, and interaction model. This blueprint drives the later "extract → spec → dispatch" loop, enabling builder agents to understand section relationships and dependencies before generating code.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}