A Playwright Pipeline That Reverse-Engineers and Rebuilds Any Website with Parallel AI Agents
Website cloning tools usually produce brittle, single-shot output. This pipeline formalizes the process into a verifiable, concurrent engineering flow where spec documents act as contracts for AI agents. The spec-first, build-second order is what separates a toy from a repeatable build system, and the git-worktree concurrency pattern is directly reusable for any multi-agent code generation task.
A new open-source pipeline, ai-website-cloner-template, reverse-engineers any website into a functional Next.js codebase. It runs Playwright across three viewports to capture full-page screenshots, extracts computed CSS values from every DOM node, and simulates scroll, click, and hover interactions to document every interactive state. The result is a set of JSON design tokens, a page topology map, and a library of deduplicated icons and downloaded assets.
Component generation follows a spec-driven, multi-agent workflow. Each page section gets a markdown spec under 150 lines that pins exact pixel values, real content, and interaction models. Builder agents work in isolated git worktrees, and an orchestrator merges their output into main only after each merge passes lint, typecheck, and build checks. The pipeline finishes with a visual QA step that captures side-by-side screenshots of the original and the clone across all three viewports, flagging size, color, and layout discrepancies.
On Juejin's homepage, the pipeline restored roughly 70% of the UI fidelity. Mobile viewport testing immediately surfaced three layout bugs—tag wrapping, author truncation, and a button-inside-anchor issue—while desktop and tablet passed in one shot. The project treats website cloning as an engineering discipline, not a one-shot AI prompt.
Extracting computed styles instead of source CSS is the key architectural decision that makes the pipeline robust across different frameworks and styling approaches.
The 150-line spec budget per section is a practical complexity cap that forces granularity and keeps individual agent tasks focused enough to succeed.
Git worktree concurrency solves the merge-conflict problem that plagues multi-agent code generation, and the 'merge only if it builds' rule enforces a quality gate at every step.
The 2.5-second post-networkidle wait is a reminder that real-world pages with lazy loading and IntersectionObserver are never truly 'done' loading—any scraping tool needs a hydration buffer.
Restoring only 70% UI fidelity on a complex page like Juejin suggests the current ceiling is set by model capability, not pipeline design; the architecture can absorb better models without structural changes.
If it's drawn with canvas, it basically won't achieve the effect at all.
Let the OP test it.