ai-website-cloner-template README

The project's README from github.com/JCodesMore/ai-website-cloner-template. As one markdown file: README.md.

AI Website Cloner Template

Clone any website with one command

Give your AI coding agent a URL and watch it recreate the website as a clean Next.js app.

Best results with Claude Code + Opus 5. Works with Codex, Cursor, Gemini, and more.

Use this template Discord

Quick Start · Watch Demo · Supported Platforms

MIT License Stars tokens

JCodesMore%2Fai-website-cloner-template | Trendshift Star History Global Rank


SPONSORED BY

RapidProxy residential proxy service
Power your scraping and automation with 90M+ residential IPs, 500MB free traffic, and non-expiring bandwidth. Explore RapidProxy →

Atlas Cloud
Generate AI images, video, audio, and 3D assets through one API. Explore Atlas Cloud →

Demo

Watch the demo

Click the image above to watch the full demo on YouTube.

Quick Start

Important: Start by making your own copy with GitHub's Use this template button. Do not clone this template repository directly for your website project, and do not open pull requests here with your generated website.

  1. Create your own repository from this template

    On the GitHub page for this project, click Use this template, then click Create a new repository.

    Give your new repository a name, choose whether it should be public or private, then click Create repository. If GitHub shows an Include all branches option, you can leave it off.

    This gives you your own separate project to work in, so your website changes stay in your account instead of coming back to the main template.

  2. Open your new repository on your computer

    After GitHub creates your copy, open that new repository. Click Code and open or clone your new repository with your preferred coding tool.

    If you use the terminal, the command will look like this:

    git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY

  3. Install dependencies

    npm install

  4. Start your AI agent — Claude Code recommended:

    claude --chrome

  5. Run the skill:

    /clone-website <target-url1> [<target-url2> ...]

  6. Customize (optional) — after the base clone is built, modify as needed

Most supported clients expose /clone-website directly. If your client activates skills from natural-language requests, enter Clone <target-url> using the clone-website workflow. Project instructions are in AGENTS.md.

Supported Platforms

Agent Status
Claude Code Recommended — Opus 5
Codex CLI Supported
OpenCode Supported
GitHub Copilot Supported
Kiro Supported
Cursor Supported
Windsurf Supported
Gemini CLI Supported
Cline Supported
Roo Code Supported
Continue Supported
Amazon Q Supported
Augment Code Supported

Prerequisites

Tech Stack

How It Works

The /clone-website skill runs a multi-phase pipeline:

flowchart LR
    P1["1. Reconnaissance"] --> P2["2. Foundation"]
    P2 --> P3["3. Component Specs"]
    P3 --> P4["4. Parallel Build"]
    P4 --> P5["5. Assembly and QA"]
  1. Reconnaissance — screenshots, design token extraction, interaction sweep (scroll, click, hover, responsive)
  2. Foundation — updates fonts, colors, globals, downloads all assets
  3. Component Specs — writes detailed spec files (docs/research/components/) with exact computed CSS values, states, behaviors, and content
  4. Parallel Build — dispatches builder agents in git worktrees, one per section/component
  5. Assembly & QA — merges worktrees, wires up the page, runs visual diff against the original

Each builder agent receives the full component specification inline — exact getComputedStyle() values, interaction models, multi-state content, responsive breakpoints, and asset paths. No guessing.

Use Cases

Not Intended For

Project Structure

src/
  app/              # Next.js routes
  components/       # React components
    ui/             # shadcn/ui primitives
    icons.tsx       # Extracted SVG icons
  lib/utils.ts      # cn() utility
  types/            # TypeScript interfaces
  hooks/            # Custom React hooks
public/
  images/           # Downloaded images from target
  videos/           # Downloaded videos from target
  seo/              # Favicons, OG images
docs/
  research/         # Extraction output & component specs
  design-references/ # Screenshots
scripts/
  sync-agent-rules.sh  # Regenerate agent instruction files
  sync-skills.mjs      # Regenerate /clone-website for all platforms
.kiro/skills/          # Generated Kiro workspace skill
.cline/skills/         # Generated Cline workspace skill
.roo/skills/           # Generated Roo Code workspace skill
.roo/commands/         # Generated Roo Code slash command
AGENTS.md           # Agent instructions (single source of truth)
CLAUDE.md           # Claude Code config (imports AGENTS.md)
GEMINI.md           # Gemini CLI config (imports AGENTS.md)

Commands

npm run dev    # Start dev server
npm run build  # Production build
npm run lint   # ESLint check
npm run typecheck # TypeScript check
npm run check  # Run lint + typecheck + build

If using docker

docker compose up app --build # build and run the app
docker compose up dev --build # run the app in dev mode on port 3001

Updating for Other Platforms

Two source-of-truth files power all platform support. Edit the source, then run the sync script:

What Source of truth Sync command
Project instructions AGENTS.md bash scripts/sync-agent-rules.sh
/clone-website skill .claude/skills/clone-website/SKILL.md node scripts/sync-skills.mjs

Each script regenerates the platform-specific copies automatically. Agents that read the source files natively need no regeneration.

Star History

Star History Chart

License

MIT

Translations: 日本語 · Simplified Chinese

ai-website-cloner-template (JCodesMore/ai-website-cloner-template)

Searching Database…

36.9K ·GitHub
Ai-website-cloner-template
What is this?A GitHub template that lets an AI coding agent clone any website into a working Next.js project just by giving it the URL.
Is this a ready-made app or a starting template I run myself?It is a GitHub template repository: you click 'Use this template' to create your own copy, then run the included skill through your AI agent to generate a real Next.js app from it.
How do I actually clone a website with this?Create your own repo from the template, open it locally, run npm install, start your AI agent (Claude Code recommended), then run the /clone-website skill which handles the rest.
What do I need installed before I start?You need Node.js 24 or newer plus one of the supported AI coding agents (Claude Code, Codex CLI, Cursor, Gemini CLI, and many others).
Any rules I need to follow when using this?Don't work directly in this template repo for your own site, and don't open PRs here with generated clones; the project also explicitly forbids using it for phishing, impersonation, or copying someone's branding.
What's this actually useful for?It's aimed at developers who need to migrate an old WordPress/Webflow/Squarespace site into modern code, recover a site whose source was lost, or study how a production site's layout and interactions are built.
Can I run this on Windows, or do I need a Mac?Since it's just Node.js plus whatever AI agent CLI you use, it runs the same way on Windows, macOS, and Linux.
How does the cloning pipeline actually work?It runs a multi-phase pipeline: reconnaissance (screenshots, design tokens, interaction sweep), foundation setup, detailed component spec files, parallel builder agents working in git worktrees, then assembly and a visual diff QA pass against the original site.
Which AI agent should I use for best results?Claude Code with Opus 5 is explicitly recommended, but Codex CLI, Cursor, Gemini CLI, GitHub Copilot, Windsurf, Cline, Roo Code, Continue, Amazon Q, and Augment Code are all supported.
What tech stack does the generated site use?The cloned output is a Next.js 16 app using the App Router, React 19, TypeScript in strict mode, shadcn/ui with Radix primitives, and Tailwind CSS v4 with oklch design tokens.
What shouldn't I use this for?It's not meant for phishing or impersonation, for passing off someone else's logos/brand assets/copy as your own, or for scraping sites whose terms of service prohibit reproduction.
What are similar projects?agentic-playwright, vicoa, app-store-screenshots, zuse, superpowers-zh, superpowers, stitch-skills, ui-ux-pro-max-skill
Which topics is it in?shadcn-ui, boilerplate, gemini-cli, github-copilot, template, ai-tools, opencode, web-scraping, tailwindcss, ci, reverse-engineering, nextjs
Creator
JCodesMore
Size
1.4 MB
Stars
36.9K
Updated
CommitOct 05Releasev0.6.1Oct 05
Age
7mo
Commits · 90 Days