How Visual Quality Assurance Is Performed After Website Cloning

The AI‑website‑cloner‑template executes a dedicated "Visual QA Diff" phase that captures side‑by‑side screenshots at standard viewport sizes, compares them pixel‑by‑pixel, and iteratively corrects design specs or component code until the cloned Next.js site matches the original.

After AI agents extract design tokens and generate component specifications, the JCodesMore/ai-website-cloner-template pipeline enters a rigorous visual quality assurance after website cloning workflow. This Visual QA Diff phase ensures the assembled Next.js application achieves pixel‑perfect fidelity to the source site before delivery.

The Visual QA Diff Pipeline Overview

The quality assurance workflow is documented in the repository’s .windsurf/workflows/clone-website.md file and referenced from the main README. According to the source code, the pipeline performs six distinct validation steps to catch both static layout mismatches and dynamic behavioral errors.

Step‑by‑Step Visual Quality Assurance Process

Side‑by‑Side Screenshot Capture

The clone‑builder opens both the original source page and the freshly assembled Next.js site at identical viewport sizes—desktop 1440 px and mobile 390 px—and captures screenshots for each section. This standardized sizing eliminates viewport‑induced variance during comparison.

Sequential Visual Comparison

Screenshots are inspected sequentially in a top‑to‑bottom review. The QA process looks for any visual mismatch, tracing discrepancies back to either an incorrect spec extraction or a builder implementation error.

Design Spec Verification and Correction

When a mismatch originates from faulty specifications, the extractor re‑runs browser automation via MCP to capture correct getComputedStyle() values from the DOM. These corrected values update the corresponding .spec.md file, ensuring the design reference remains authoritative.

Component Code Correction

If the spec is accurate but the rendered component deviates, the builder revises the component code directly to align with the specification. This tight feedback loop between visual validation and code generation prevents error propagation.

Interactive Behavior Validation

Beyond static layout, the QA step exercises all interactive behaviors—clicks, hovers, scroll‑driven animations, and smooth‑scroll effects—to ensure dynamic fidelity matches the original user experience.

Build Integrity Checks

Throughout the QA cycle, the project undergoes continuous type‑checking and linting via npm run build. This guarantees that visual fixes do not compromise the compile‑time integrity of the Next.js application.

Automating Visual QA with Playwright

The repository includes patterns for automating screenshot comparison using Playwright. Below is a simplified implementation that captures both sites at 1440 px and performs pixel‑level diffing.

import { test, expect } from '@playwright/test';

test('compare original vs clone', async ({ page }) => {
  // Open original site
  await page.goto('https://example.com');
  await page.screenshot({ path: 'original-desktop.png', width: 1440 });

  // Open cloned site
  await page.goto('http://localhost:3000');
  await page.screenshot({ path: 'clone-desktop.png', width: 1440 });

  // Use an image‑diff library (e.g., pixelmatch) to compare
  const diff = await compareImages('original-desktop.png', 'clone-desktop.png');
  expect(diff).toBeLessThan(0.01); // allow tiny tolerance
});

Execute the validation suite alongside the build process:

# Ensure no type errors exist before visual comparison

npm run build

# Run the visual QA script

npx playwright test visual-qa.ts

Key Configuration Files in the Repository

Understanding where visual quality assurance is configured helps customize the pipeline for specific project needs.

• .windsurf/workflows/clone-website.md (lines 412‑426): Contains the detailed phase‑by‑phase instructions for the Visual QA Diff process, including viewport specifications and mismatch resolution protocols.

• README.md (line 94): Provides the high‑level pipeline overview in the "Assembly & QA" section, explaining where visual QA fits within the broader cloning workflow.

• AGENTS.md (line 56): Defines the design‑reference folder used for storing screenshots and visual references that serve as the ground truth during comparison.

Summary

• The JCodesMore/ai-website-cloner‑template implements a Visual QA Diff phase after component assembly to guarantee pixel‑perfect cloning.
• Quality assurance relies on side‑by‑side screenshots captured at 1440 px (desktop) and 390 px (mobile) viewports.
• Mismatches trigger either spec re‑extraction via MCP browser automation or component code revision to align with the .spec.md reference.
• Interactive behaviors—including animations and hover states—are manually validated alongside static layout checks.
• Continuous npm run build execution ensures visual corrections maintain TypeScript and Next.js compile‑time integrity.

Frequently Asked Questions

What viewport sizes does the visual QA process use for comparison?

The pipeline captures screenshots at 1440 px width for desktop and 390 px width for mobile, as defined in .windsurf/workflows/clone-website.md. These standardized dimensions ensure consistent comparison conditions regardless of the developer’s local screen size.

How does the system handle incorrect design specifications discovered during QA?

When a visual mismatch stems from faulty specs, the extractor re‑runs MCP browser automation to capture accurate getComputedStyle() values from the original site. The corrected values are then written back to the corresponding .spec.md file before the builder regenerates the component.

Does visual QA only check static layouts, or does it include interactive elements?

The validation process covers both static layout and interactive behaviors. Testers exercise clicks, hovers, scroll‑driven animations, and smooth‑scroll effects to ensure the cloned Next.js application replicates the original site’s dynamic fidelity, not just its visual appearance.

Where is the visual QA workflow documented in the repository?

The high‑level overview appears in README.md at line 94 under the "Assembly & QA" section. Detailed step‑by‑step instructions are located in .windsurf/workflows/clone-website.md between lines 412‑426, while AGENTS.md at line 56 references the design‑reference folder structure used for screenshot storage.

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