Free · Local inspection · No signup

UI Replication QA

Catch the bugs a QA team actually files after a site clone: wrong theme colors, a gap at 1366×768, unreadable hover, leftover social links. The specification wins. The source is only a reference.

UI Replication QA

Spec is the authority. Source is the reference. Target is tested.

1

Choose a mode

Compare a full source page to the rebuilt target.

2

Load pages or a demo

Try it first

Loads sample URLs and a spec. Then press Run QA — about 15–30 seconds.

Source

Target

Specification

Parsed in this browser. If a PDF comes up empty, paste the text.

3

Run QA

Load a demo or enter a target URL first.

Local runner: not running — that’s fine. The demo runs in this tab.

Not a screenshot differ, not Lighthouse

Replication work copies components from a live site, then restyles them to a project document. Most bugs are not TypeScript errors. They are “Twitter is still in the footer” and “the CTA is still the old red.” Pair this with the Asset & UI Extractor when you first pull colors from the source.

Specification first

Semantic tokens like Accent Color: Yellow become rules. Usage is enforced only where the document says to use them.

Measured layout, not a screenshot diff

Navbar/hero gaps use getBoundingClientRect(). A 32px hole at 1366×768 is reported with numbers, not “images differ”.

Static and interaction states

Default screenshots can match while Filter opens a drawer on the source and a dropdown on the target. Safe clicks capture the resulting UI.

Allow-list social links

If the spec lists Instagram and Facebook, leftover Twitter fails. LinkedIn missing from the source copy is not a failure.

Local Chromium

Cross-origin sites are inspected by a runner on 127.0.0.1. Nothing ships a headless browser through Vercel.

Evidence on every issue

Element, viewport, expected vs actual, and screenshots so you can reproduce the bug immediately.

How to use UI Replication QA

1
Choose a mode
Page Comparison for a whole site, or Component Mapping for named pieces (navbar, hero, filter, footer).
2
Load a demo or paste URLs
Load demo fills source, target, and spec. For a real project, paste URLs and upload or paste the specification.
3
Run QA
Press Run QA. Issues appear after the run. Open Advanced only if you need extra viewports, tests, or token edits.

UI Replication QA