How to Compare the Original Website with the Cloned Version Using the AI Website Cloner Template

The AI Website Cloner Template automatically generates a pixel-perfect visual diff during its Assembly & QA pipeline, storing side-by-side screenshots in docs/design-references/comparison.png while recording every design token in docs/research/components/ for manual verification.

The AI Website Cloner Template by JCodesMore creates pixel-perfect replicas of any target website through an automated cloning pipeline. When you need to compare the original website with the cloned version, the repository provides built-in visual diff capabilities and structured design token documentation. This guide covers the Assembly & QA pipeline, component specification inspection, and custom Playwright implementations to verify fidelity.

Run the Assembly & QA Pipeline

The /clone-website skill triggers a comprehensive pipeline that automatically compares the original site against the generated Next.js output. According to the README.md at lines 94-95, this Assembly & QA step takes screenshots of the original pages, extracts design tokens into docs/research/, and runs a visual diff after merging all builder worktrees.

To execute the built-in comparison:

# Start the development server

npm run dev

# Execute the cloning skill (Claude Code example)

claude --chrome
/clone-website https://example.com

The pipeline stores the results automatically upon completion, requiring no additional configuration to generate the initial comparison.

Locate the Side-by-Side Screenshots

After the pipeline finishes, examine the generated comparison image at docs/design-references/comparison.png. This file displays the original website on the left and the cloned Next.js page on the right, exactly as demonstrated in the project demo video.

Opening this PNG file reveals pixel-level discrepancies immediately. If the cloned version shows layout shifts, color mismatches, or spacing issues, the visual diff highlights these areas for targeted fixes.

Inspect Design Tokens and Component Specs

The INSPECTION_GUIDE.md file at docs/research/INSPECTION_GUIDE.md (lines 90-97) explains how agents record every measured CSS property during the cloning process. Navigate to docs/research/components/ to find JSON or YAML specifications for each extracted component.

Verify that tokens match the source values by comparing the recorded properties against the original site. For example, examine a button component specification:

{
  "name": "Button",
  "styles": {
    "backgroundColor": "#1e3a8a",
    "color": "#ffffff",
    "borderRadius": "0.375rem",
    "padding": "0.75rem 1.5rem"
  },
  "states": {
    "hover": {
      "backgroundColor": "#1d4ed8"
    }
  }
}

Cross-reference these values with the computed styles from the original website using Chrome DevTools. If the backgroundColor or padding values differ, adjust the generated React component at src/components/ui/button.tsx to match the source exactly.

Create Custom Visual Diff Scripts

For automated regression testing or custom comparisons, implement a Playwright script using pixelmatch. Install the necessary dependencies in your cloned repository:

npm i -D @playwright/test pixelmatch pngjs

Create a comparison script at scripts/visual-diff.ts:

import { test, expect } from '@playwright/test';
import pixelmatch from 'pixelmatch';
import { PNG } from 'pngjs';
import fs from 'fs';

test('compare original vs cloned page', async ({ page }) => {
  // Screenshot the original site
  await page.goto('https://example.com');
  const original = await page.screenshot();

  // Screenshot the local clone
  await page.goto('http://localhost:3000');
  const cloned = await page.screenshot();

  // Load PNG objects
  const imgA = PNG.sync.read(original);
  const imgB = PNG.sync.read(cloned);
  const { width, height } = imgA;
  const diff = new PNG({ width, height });

  // Pixel-compare with threshold
  const mismatched = pixelmatch(
    imgA.data,
    imgB.data,
    diff.data,
    width,
    height,
    { threshold: 0.1 }
  );

  // Save diff image for manual review
  fs.writeFileSync('diff.png', PNG.sync.write(diff));

  // Assert zero visual differences
  expect(mismatched).toBe(0);
});

Execute the test with npx playwright test scripts/visual-diff.ts. The script generates a diff.png file highlighting discrepancies and fails the test if any pixels differ beyond the specified threshold.

Interpret Results and Iterate

Analyze the diff image to identify specific components requiring adjustment. Common discrepancies include font rendering variations, spacing inconsistencies, or color profile differences between the original and the Tailwind-generated output.

Modify the affected components in src/app/page.tsx or the specific UI components under src/components/ui/. After implementing fixes, re-run the /clone-website skill or restart the development server to regenerate the comparison. The pipeline repeats the visual diff step, allowing you to confirm that the clone now matches the original indistinguishably.

Summary

• Run the /clone-website skill to trigger the automated Assembly & QA pipeline that generates visual comparisons.
• Check docs/design-references/comparison.png for side-by-side screenshots of the original versus cloned output.
• Verify design tokens in docs/research/components/ against the original site's computed styles.
• Implement custom Playwright scripts using pixelmatch for automated pixel-level regression testing.
• Iterate on component code in src/components/ui/ and re-run the pipeline until visual diffs show zero discrepancies.

Frequently Asked Questions

Where does the AI Website Cloner Template store the visual comparison?

The pipeline automatically saves the side-by-side comparison image to docs/design-references/comparison.png. This file shows the original website on the left and the cloned Next.js version on the right, generated during the Assembly & QA step described in the README.md.

How do I verify specific CSS properties like colors and spacing?

Inspect the JSON or YAML component specifications located in docs/research/components/. Each file records measured design tokens including colors, fonts, spacing, and border-radius values. Compare these against the original site's computed styles using browser DevTools to ensure the cloned version matches exactly.

Can I automate the comparison process with custom scripts?

Yes. Install @playwright/test and pixelmatch to create automated visual regression tests. The script captures screenshots of both the original URL and your local localhost:3000 instance, then compares them pixel-by-pixel to detect any divergence from the source design.

What should I do if the visual diff shows discrepancies?

Open the generated diff.png or docs/design-references/comparison.png to identify specific areas of mismatch. Edit the corresponding React components in src/components/ui/ or src/app/page.tsx to adjust the Tailwind classes and styles. Re-run the /clone-website skill to regenerate the comparison and verify the fixes.

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