Clone and Rebuild Any Website with AI

The Problem

You need a professional landing page fast — hiring a designer costs $5k+ and takes weeks. You've found a site you love (like Linear.app's clean dark theme and smooth animations) and want to use it as a starting point for your own brand. Manually recreating the design system, responsive layouts, and scroll animations would take days of tedious CSS inspection.

The Solution

The clone-website skill automates the entire reverse-engineering pipeline: it uses Chrome MCP to screenshot and extract exact CSS values from any live website, generates detailed component specifications, dispatches parallel builder agents in git worktrees, and runs visual QA — all in under an hour.

Step-by-Step Walkthrough

1. Set Up the Project

Clone the ai-website-cloner-template which provides the Next.js scaffold, Tailwind config, and skill infrastructure. Edit TARGET.md to define your target URL and scope (which sections to clone, priority order).

2. Launch the Clone

Run the skill with your target URL:

claude "/clone-website https://linear.app"

The skill handles reconnaissance automatically — Chrome MCP captures screenshots at multiple breakpoints, extracts the full color palette, font stack, spacing system, and identifies every interactive behavior (scroll animations, hover states, tab switching).

3. Parallel Building

The skill maps the page into sections, writes a detailed component spec for each one (with exact computed CSS values, not estimates), then dispatches parallel builder agents in separate git worktrees. Five sections build simultaneously instead of sequentially.

4. Visual QA and Iteration

After assembly, the skill compares your clone against the original section-by-section. Discrepancies (wrong padding, missing hover states) are caught and fixed automatically. Target is >95% pixel match.

5. Customize for Your Brand

Swap the copy, update brand colors in your Tailwind config, replace images with your own assets, and adjust animation timings. The extracted design system makes targeted changes easy — you're editing exact values, not guessing.

Real-World Example

Sara, a startup founder, needs a landing page before investor meetings next week. She runs the clone-website skill against Linear.app. In 45 minutes, she has a pixel-perfect Next.js clone with extracted design tokens, responsive layouts at 5 breakpoints, and smooth scroll animations. She swaps the purple accent (#5E6AD2) for her brand green (#10B981), updates the headline to "Ship faster with AI-powered code review," replaces the hero screenshot, and deploys to Vercel. Total cost: $0. Total time: under 2 hours including customization.

Related Skills

• clone-website — The core skill powering this workflow
• image-compare — Visual diff tool for QA comparison
• web-design — Design system generation and component architecture