# Reconnaissance Phase Screenshot Workflow for Desktop and Mobile Viewports

> Learn the reconnaissance phase screenshot workflow for desktop and mobile. Capture master reference images at 1440px and 390px viewports for AI website cloning.

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

---

**The reconnaissance phase screenshot workflow captures full-page screenshots at 1440px (desktop) and 390px (mobile) viewports to create master reference images that guide all downstream builder agents in the AI website cloning process.**

The JCodesMore/ai-website-cloner-template repository implements a structured reconnaissance phase that begins with precise visual documentation of the target site. This reconnaissance phase screenshot workflow establishes the visual baseline for the entire cloning pipeline, ensuring builder agents reference pixel-perfect representations of the original layout across device categories.

## Viewport Specifications for Desktop and Mobile

The workflow targets two specific viewport widths to capture the responsive design spectrum of the target website.

### Desktop Viewport (1440px)

The **desktop viewport** uses a width of **1440 pixels** to capture the layout as it appears on large screens. This dimension serves as the baseline for desktop-only components, horizontal spacing, and grid systems that break down at narrower widths.

### Mobile Viewport (390px)

The **mobile viewport** uses a width of **390 pixels** to capture the responsive design for handheld devices. This viewport reveals hidden navigation elements, collapsed menus, mobile-specific typography, and touch-target sizes that differ significantly from the desktop experience.

## Step-by-Step Screenshot Workflow

According to the [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) documentation, the reconnaissance phase follows this precise sequence:

1. **Set the viewport** – Programmatically resize the browser automation tool (Playwright, Puppeteer, or Chrome MCP) to the required width (`1440px` for desktop, `390px` for mobile).
2. **Navigate to the target URL** – Load the page and wait for network idle to ensure all assets finish loading.
3. **Take a full-page screenshot** – Capture the entire scrollable area, not just the visible viewport, to include footer content and lazy-loaded sections.
4. **Save the image** – Store the file under `docs/design-references/` with a descriptive name (e.g., `homepage-desktop.png`, `homepage-mobile.png`).
5. **Repeat for the other viewport** – Execute the same steps for the opposite size to complete the reference set.

These screenshots become the **master reference** for later phases, where builder agents receive section-specific crops derived from the master images to guide their reconstruction efforts.

## Automating Screenshots with Playwright

The repository includes a reference implementation using Playwright to automate the reconnaissance phase screenshot workflow. The script handles viewport sizing, navigation, scrolling to trigger lazy loading, and full-page capture.

```javascript
// scripts/take-screenshots.mjs
import { chromium } from 'playwright';
import fs from 'fs';
import path from 'path';

const TARGET_URL = process.argv[2] ?? 'https://example.com';
const OUT_DIR = path.resolve('docs/design-references');

await fs.promises.mkdir(OUT_DIR, { recursive: true });

const viewports = [
  { name: 'desktop', width: 1440, height: 900 },
  { name: 'mobile',  width: 390,  height: 800 },
];

const browser = await chromium.launch();
const context = await browser.newContext();

for (const vp of viewports) {
  const page = await context.newPage();
  await page.setViewportSize({ width: vp.width, height: vp.height });
  await page.goto(TARGET_URL, { waitUntil: 'networkidle' });
  // Ensure lazy-loaded content appears (scroll to the bottom)
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  await page.waitForTimeout(1000); // give any animations a moment

  const screenshotPath = path.join(
    OUT_DIR,
    `${vp.name}.png`
  );
  await page.screenshot({ path: screenshotPath, fullPage: true });
  console.log(`✅ Saved ${vp.name} screenshot → ${screenshotPath}`);
}

await browser.close();

```

Running this script produces the two required reference files:

```bash
$ node scripts/take-screenshots.mjs https://my-site.com
✅ Saved desktop screenshot → docs/design-references/desktop.png
✅ Saved mobile screenshot → docs/design-references/mobile.png

```

## Alternative Implementation with Chrome MCP

If you prefer a lighter-weight approach using **chrome-mcp** (the default MCP in the repository), the same reconnaissance phase screenshot workflow applies. Replace the Playwright API calls with the MCP’s equivalent `setViewport`, `navigate`, and `screenshot` commands to achieve identical results without launching a full browser instance.

## File Structure and Storage Conventions

The workflow outputs and documentation are organized according to the following structure:

| File Path | Purpose |
|-----------|---------|
| [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) | Central documentation of the reconnaissance phase, including the screenshot directives and viewport specifications. |
| `scripts/take-screenshots.mjs` | Sample automation script that implements the full-page screenshot capture for both viewports. |
| `docs/design-references/` | Destination directory where the desktop and mobile screenshots are stored as master references for builder agents. |

## Summary

- The reconnaissance phase screenshot workflow requires capturing full-page screenshots at **1440px (desktop)** and **390px (mobile)** viewports.
- Screenshots must include the entire scrollable page, not just the initial viewport, to serve as comprehensive master references.
- Files are stored in `docs/design-references/` to provide builder agents with visual baselines for section-specific reconstruction.
- Playwright automation handles viewport resizing, network idle waiting, and lazy-loaded content triggering before capture.

## Frequently Asked Questions

### What are the exact viewport dimensions required for the reconnaissance phase?

The workflow specifies **1440px width** for desktop screenshots and **390px width** for mobile screenshots. These dimensions capture the two most common device categories and reveal responsive design breakpoints that builder agents must replicate.

### Why does the workflow require full-page screenshots instead of viewport-only captures?

Full-page screenshots capture the entire scrollable document height, ensuring that footer content, lazy-loaded images, and below-the-fold layouts are preserved in the master reference. Viewport-only captures would miss critical page elements that builder agents need to see during the reconstruction phase.

### Where are the screenshots stored in the repository structure?

The workflow saves screenshots to the `docs/design-references/` directory with descriptive filenames like `desktop.png` and `mobile.png`. This location serves as the central reference point for all downstream builder agents and design comparison tasks.

### Can I use Puppeteer instead of Playwright for this workflow?

Yes, the reconnaissance phase screenshot workflow is compatible with any browser automation tool that supports viewport resizing and full-page capture. Simply adapt the viewport settings (`1440px` and `390px`) and ensure you wait for network idle before capturing, as implemented in the reference Playwright script.