create-website-clone

Clone any website into a pixel-perfect Next.js App Router project.

Quick Start

npx create-website-clone my-clone

This will:

1. Ask for the URL to clone
2. Scaffold a Next.js 15 + Tailwind 4 project
3. Install dependencies + Playwright Chromium
4. Run the scraper and download assets

Usage

Interactive Mode

npx create-website-clone

With Arguments

npx create-website-clone my-clone --url https://example.com

After Running

cd my-clone
npm run dev

Re-run the scraper anytime with:

npm run scrape

What's Included

• Next.js 15 with App Router
• Tailwind CSS 4 with @theme support
• TypeScript configured
• Auto-scrape that captures:
  • Full-page screenshot
  • Rendered HTML
  • All images and fonts

Project Structure

my-clone/
├── package.json
├── next.config.ts
├── tsconfig.json
├── README.md
├── AGENTS.md
├── scripts/
│   └── scrape.cjs        # Re-run scraping
├── validation/
│   ├── screenshot.png    # Full-page screenshot
│   └── render.html       # Rendered HTML
├── public/
│   ├── assets/           # Downloaded images
│   └── fonts/            # Downloaded fonts
└── src/
    ├── app/
    │   ├── layout.tsx
    │   ├── globals.css
    │   └── page.tsx      # Your clone goes here
    ├── components/
    │   ├── ui/           # Add shadcn components as needed
    │   └── sections/     # Break into section components
    └── lib/
        └── utils.ts      # cn() helper

Adding shadcn/ui Components

npx shadcn@latest init --yes
npx shadcn@latest add button card dialog --yes

License

MIT