DEV Community

Cover image for Build an AI Agent That Clones Any Website in Under an Hour
Max
Max

Posted on • Originally published at terminalskills.io

Build an AI Agent That Clones Any Website in Under an Hour

#webdev #ai #productivity #tutorial

Ever looked at a competitor's landing page and wished you could rebuild it in your own stack? With AI coding agents, you can now clone any website as a pixel-perfect Next.js app — in under an hour.

The Problem

You need a professional landing page. You love how Linear.app looks. But hiring a designer is $5k and 3 weeks. What if an AI agent could reverse-engineer the design, extract every color/font/spacing token, and rebuild it as clean React components?

How It Works

The workflow uses a multi-phase pipeline:

  1. Reconnaissance — Screenshots at every breakpoint, extract design tokens (colors, fonts, spacing), sweep all interactions (hover, scroll, click)
  2. Foundation — Download fonts, images, videos. Set up Tailwind config with extracted tokens
  3. Component Specs — Write detailed specs for each section with exact getComputedStyle() values
  4. Parallel Build — Dispatch builder agents in git worktrees, one per section
  5. Assembly & QA — Merge worktrees, visual diff against original

Quick Start 

# Clone the template
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone && npm install

# Start Claude Code with Chrome MCP
claude --chrome

# Run the skill
/clone-website https://linear.app
Enter fullscreen mode Exit fullscreen mode

The agent takes over from here — screenshots, extracts tokens, writes specs, builds components in parallel.

What Gets Extracted

  • Colors — Every hex/oklch value mapped to CSS custom properties
  • Typography — Font families, sizes, weights, line heights
  • Spacing — Margins, paddings, gaps as design tokens
  • Assets — Images, videos, SVGs downloaded and optimized
  • Interactions — Hover states, animations, scroll behaviors

The Result

After ~30-45 minutes, you have a fully functional Next.js app:

  • React 19 + Next.js App Router
  • Tailwind CSS v4 with extracted design tokens
  • shadcn/ui components
  • Responsive at all breakpoints
  • All animations and interactions preserved

Customize and Ship

The clone is your starting point. Swap in your copy, adjust colors to your brand, modify CTAs, and deploy to Vercel.

Try It Yourself

The clone-website skill is available on Terminal Skills — a marketplace of 900+ AI coding skills for Claude Code, Cursor, Codex, and more.

Check out the full use-case guide with step-by-step instructions.

What website would you clone first? Drop a comment below 👇

Top comments (0)