# What Happens During the Reconnaissance Phase of the AI Website Cloner

> Discover the AI website cloner reconnaissance phase. Learn how it captures screenshots, global assets, UI patterns, and interactions to build a perfect blueprint for code generation.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: internals
- Published: 2026-07-11

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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.

```javascript
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) with notes about required npm packages (lines 35-36).

```javascript
// 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).

```javascript
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) and [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)
- **Behavioral Audit**: Systematic scroll, click, hover, and responsive sweeps documented in [`docs/research/BEHAVIORS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/BEHAVIORS.md)
- **Structural Mapping**: Page topology creation in [`docs/research/PAGE_TOPOLOGY.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) and [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx), behavioral documentation in [`docs/research/BEHAVIORS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/BEHAVIORS.md), and structural mapping in [`docs/research/PAGE_TOPOLOGY.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) to maintain design system consistency.