How Full-Page Screenshots Are Captured at Different Viewport Widths in the AI Website Cloner Template

The ai-website-cloner-template repository uses Playwright to capture full-page screenshots at 1440px (desktop) and 390px (mobile) viewports by creating separate browser contexts for each width and calling page.screenshot() with the fullPage: true option.

Full-page screenshots serve as the immutable visual baseline for the entire cloning pipeline in this open-source project. According to the source code, these captures happen before any DOM extraction or CSS analysis, ensuring that subsequent "builder" agents have a pixel-perfect reference for reverse-engineering layouts and components.

The Screenshot Capture Process

The repository implements a multi-step browser automation workflow using Playwright. This process creates distinct visual artifacts for different device categories, which are later used to extract design tokens and verify layout accuracy.

Launching the Browser Context

The implementation starts by launching a headless browser instance. The code supports Chromium, Firefox, or Webkit engines through Playwright's unified API.

A new browser context is created for each target viewport rather than just resizing a single page. This approach ensures clean isolation between device simulations and prevents state leakage between captures.

Configuring Viewport Dimensions

The workflow explicitly mandates two specific viewport widths, as documented in .windsurf/workflows/clone-website.md at line 122:

• Desktop: 1440px width
• Mobile: 390px width (matching common iPhone dimensions)

While a starting height value is provided (typically 800px), Playwright ignores this limitation when capturing full-page screenshots. The height parameter serves only as the initial viewport size before the automatic scrolling behavior begins.

Executing the Full-Page Capture

After navigating to the target URL with waitUntil: 'networkidle', the script calls page.screenshot() with the configuration object { fullPage: true }. This parameter instructs Playwright to scroll through the entire document, stitch all visible portions together, and output a single PNG file.

The screenshots are saved to docs/design-references/ with filenames like desktop.png and mobile.png, creating the "master reference" files that drive the remainder of the cloning pipeline.

Implementation Details from the Source Code

The workflow documentation in .windsurf/workflows/clone-website.md explicitly lists screenshot capture as the first major artifact generation step. The repository declares Playwright as a development dependency in package.json (under @playwright/test), ensuring the automation tooling is available during the cloning process.

These files establish the contract between the visual capture phase and the subsequent extraction agents. By separating screenshot generation from CSS parsing, the system maintains a verifiable ground truth that can be referenced when extracting layout grids, component boundaries, and color values.

Practical Code Example

Below is a minimal TypeScript implementation that reproduces the repository's screenshot logic. This script can be executed from the command line to capture both desktop and mobile views of any target URL.

// scripts/capture.ts
import { chromium, Browser, BrowserContext, Page } from 'playwright';

// Helper to capture a full-page screenshot for a given viewport.
async function capture(url: string, width: number, label: string) {
  const browser: Browser = await chromium.launch();
  const context: BrowserContext = await browser.newContext({
    viewport: { width, height: 800 }, // height is just a starting point
  });
  const page: Page = await context.newPage();

  await page.goto(url, { waitUntil: 'networkidle' });
  await page.screenshot({
    path: `docs/design-references/${label}.png`,
    fullPage: true,
  });

  await browser.close();
}

// Main entry point
(async () => {
  const url = process.argv[2];
  if (!url) {
    console.error('Usage: node capture.ts <url>');
    process.exit(1);
  }

  // Desktop view (1440px)
  await capture(url, 1440, 'desktop');

  // Mobile view (390px)
  await capture(url, 390, 'mobile');
})();

Run the script with:

npx ts-node scripts/capture.ts https://example.com

Storage and Pipeline Integration

The docs/design-references/ directory acts as the bridge between visual capture and automated extraction. Builder agents consume these PNG files to perform side-by-side visual diffs and extract CSS values against the pixel-perfect reference.

Because the screenshots are generated before any code extraction begins, they provide an immutable checkpoint that can be referenced throughout the cloning process. This ensures that even if subsequent parsing steps fail or produce unexpected results, the original visual state remains available for verification.

Summary

• Playwright browser automation powers the screenshot capture process using separate browser contexts for each viewport.
• Fixed viewport widths of 1440px (desktop) and 390px (mobile) are mandated by the workflow documentation in .windsurf/workflows/clone-website.md.
• Full-page scrolling is handled automatically by passing fullPage: true to Playwright's page.screenshot() method.
• Immutable storage occurs in docs/design-references/, providing the visual baseline for all subsequent extraction steps.

Frequently Asked Questions

What viewport widths does the template use for screenshots?

The template captures screenshots at 1440px width for desktop viewports and 390px width for mobile viewports. These dimensions are explicitly specified in the workflow documentation at line 122 of .windsurf/workflows/clone-website.md.

Why does the height parameter not affect full-page screenshots?

While the code provides an initial height value (typically 800px) when creating the browser context, this only sets the starting viewport size. When fullPage: true is passed to page.screenshot(), Playwright automatically scrolls through the entire document height and stitches all content into a single image, regardless of the initial height setting.

Where are the screenshots stored in the repository?

Captured screenshots are saved to the docs/design-references/ directory with filenames like desktop.png and mobile.png. This location serves as the immutable visual reference that subsequent builder agents use for extracting design tokens and verifying layout accuracy.

Which browser engine does the template use for automation?

The implementation uses Playwright's Chromium engine by default, though the repository supports Firefox and Webkit as well through Playwright's unified API. The package.json file declares @playwright/test as a development dependency, making the automation tools available for the screenshot capture process.

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