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

> Discover how to compare original and cloned websites with the AI Website Cloner Template. Analyze visual diffs and design tokens for accurate verification effortlessly.

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

---

**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:

```bash

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

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

```bash
npm i -D @playwright/test pixelmatch pngjs

```

Create a comparison script at [`scripts/visual-diff.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/visual-diff.ts):

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