What Happens During the Reconnaissance Phase of the AI Website Cloner

The Reconnaissance phase exhaustively captures screenshots, global assets, site-wide UI patterns, and interaction behaviors to create a pixel-perfect blueprint before any code is generated.

The Reconnaissance phase is the foundational first step when using the ai-website-cloner-template from JCodesMore. Before any React components are written or Tailwind classes applied, this phase systematically gathers every visual, stylistic, and interactive detail from the target website. According to the workflow defined in .windsurf/workflows/clone-website.md, the process follows a strict three-part methodology to ensure no design element or behavioral nuance is missed.

The Three Core Activities of the Reconnaissance Phase

The Reconnaissance workflow is divided into three distinct activities that must execute in sequence: visual capture, global asset extraction, and behavioral auditing.

Navigation and Screenshot Capture

The process begins by opening the target URL in a browser-automation tool (MCP) and capturing full-page screenshots at standardized viewports. The workflow specifically requires desktop screenshots at 1440 px width and mobile screenshots at 390 px width.

These images are stored under docs/design-references/ and serve as the master visual reference for all subsequent builders. As noted in lines 21-24 of the workflow file, these screenshots become the authoritative design source that prevents drift during the build process.

// Using a browser MCP (e.g., Playwright)
const page = await browser.newPage();
await page.goto(targetUrl);
// Desktop capture
await page.setViewportSize({ width: 1440, height: 900 });
await page.screenshot({ path: 'docs/design-references/full-desktop.png', fullPage: true });
// Mobile capture
await page.setViewportSize({ width: 390, height: 800 });
await page.screenshot({ path: 'docs/design-references/full-mobile.png', fullPage: true });

Global Asset Extraction

Before analyzing individual components, the Reconnaissance phase extracts site-wide assets and settings. This global extraction targets four specific categories:

• Fonts – The system locates <link> tags and computes font-family values on key elements, then configures them in src/app/layout.tsx using either next/font/google or next/font/local (lines 29-30).
• Colors – The full color palette is extracted from computed styles, mapped to shadcn UI token names, and added as CSS variables to src/app/globals.css (lines 31-32).
• Favicons and Meta – All favicons, apple-touch-icons, OG images, and the web manifest are downloaded into public/seo/, with metadata updates applied to layout.tsx (lines 33-34).
• Global UI Patterns – The system detects site-wide CSS and JavaScript including custom scrollbars, scroll-snap configurations, global keyframe animations, backdrop filters, and smooth-scroll libraries like Lenis or Locomotive Scroll. These patterns are recorded in globals.css with notes about required npm packages (lines 35-36).

// Global extraction script run in browser MCP console
JSON.stringify({
  images: [...document.querySelectorAll('img')].map(img => ({
    src: img.src || img.currentSrc,
    alt: img.alt,
    width: img.naturalWidth,
    height: img.naturalHeight
  })),
  fonts: [...new Set([...document.querySelectorAll('*')]
            .slice(0,200)
            .map(el => getComputedStyle(el).fontFamily))],
  favicons: [...document.querySelectorAll('link[rel*="icon"]')]
            .map(l => ({ href: l.href, sizes: l.sizes?.toString() }))
});

Mandatory Interaction Sweep

After capturing screenshots and global assets, the workflow mandates a comprehensive behavioral audit performed before any component work begins. This systematic sweep consists of four distinct examinations:

Scroll Sweep – The page is scrolled slowly to record header changes, entrance animations, auto-switching tabs, scroll-snap points, and smooth-scroll library behaviors (lines 41-46).

Click Sweep – Every interactive element including buttons, tabs, cards, and links are clicked to document resulting UI changes such as modals, dropdowns, and content swaps (lines 48-52).

Hover Sweep – Possible hover-state elements are tested to record visual feedback including color transitions, scale transforms, shadow changes, and opacity shifts (lines 53-56).

Responsive Sweep – The layout is tested at three breakpoints: desktop (1440 px), tablet (768 px), and mobile (390 px), logging all layout changes and breakpoint values (lines 57-60).

// Pseudocode for scroll sweep capture
const scrollPositions = [];
await page.evaluate(() => { window.scrollTo(0,0); });
while (await page.evaluate(() => window.scrollY < document.body.scrollHeight)) {
  const y = await page.evaluate(() => window.scrollY);
  scrollPositions.push(y);
  await page.waitForTimeout(200);
  await page.evaluate(() => window.scrollBy(0, 100));
}
console.log('Scroll positions captured:', scrollPositions);

Capturing the Page Topology

The Reconnaissance phase concludes with a Page Topology pass that maps each distinct section of the target page. This process records the visual order of sections, identifies fixed versus flow positioning, documents layout hierarchy, and catalogs interaction models for each area.

This topology is written to docs/research/PAGE_TOPOLOGY.md and serves as the architectural blueprint for the subsequent foundation-build and component-spec stages (lines 65-73). Concurrently, all behavioral observations from the interaction sweep are compiled into docs/research/BEHAVIORS.md, creating a behavior bible that drives component specifications later (lines 62-64).

Summary

The Reconnaissance phase in JCodesMore/ai-website-cloner-template performs comprehensive data gathering before code generation begins:

• Visual Capture: Full-page screenshots at 1440 px and 390 px viewports stored in docs/design-references/
• Global Assets: Extraction of fonts, colors, favicons, and UI patterns into src/app/layout.tsx and src/app/globals.css
• Behavioral Audit: Systematic scroll, click, hover, and responsive sweeps documented in docs/research/BEHAVIORS.md
• Structural Mapping: Page topology creation in docs/research/PAGE_TOPOLOGY.md serving as the build blueprint

Frequently Asked Questions

What files does the Reconnaissance phase generate?

The phase generates four categories of artifacts: screenshots stored in docs/design-references/, global style updates in src/app/globals.css and src/app/layout.tsx, behavioral documentation in docs/research/BEHAVIORS.md, and structural mapping in docs/research/PAGE_TOPOLOGY.md. These files collectively form the complete specification for the clone.

Why is the interaction sweep mandatory before component building?

The interaction sweep prevents functional gaps in the final build. By documenting scroll-triggered animations, click handlers, hover states, and responsive breakpoints in docs/research/BEHAVIORS.md before writing code, later agents can implement exact behavioral matches rather than inferring functionality from static screenshots.

What viewport sizes are required during Reconnaissance?

The workflow mandates testing at 1440 px for desktop, 390 px for mobile, and 768 px for tablet during the responsive sweep. Screenshot capture focuses on the 1440 px and 390 px breakpoints, while the interaction sweep tests all three to ensure responsive behavior is fully documented.

How are fonts and colors extracted from the target site?

Fonts are identified by locating <link> tags and computing font-family values on key DOM elements, then configured via next/font/google or next/font/local in src/app/layout.tsx. Colors are pulled from computed styles, mapped to shadcn UI tokens, and defined as CSS variables in src/app/globals.css to maintain design system consistency.

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