JCodesMore / ai-website-cloner-template

查看原文 / View Original 编辑 / Edit

JCodesMore / ai-website-cloner-template

AI Website Cloner Template

A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. Recommended: Claude Code with Opus 4.7 for best results — but works with a variety of AI coding agents. Point it at a URL, run /clone-website, and your AI agent will inspect the site, extract design tokens and assets, write component specs, and dispatch parallel builders to reconstruct every section.

AI 网站克隆模板

这是一个可复用的模板，旨在利用 AI 编程代理将任何网站逆向工程为整洁、现代的 Next.js 代码库。推荐使用配备 Opus 4.7 的 Claude Code 以获得最佳效果，但也支持多种其他 AI 编程代理。只需指向一个 URL，运行 /clone-website，你的 AI 代理就会检查该网站、提取设计令牌（design tokens）和资源、编写组件规范，并派遣并行构建器来重构每一个部分。

Demo

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

演示

点击上方图片即可在 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.

快速开始

重要提示：请先通过 GitHub 的“Use this template”（使用此模板）按钮创建你自己的副本。请勿直接克隆此模板仓库用于你的网站项目，也不要将你生成的网站提交 Pull Request 到此仓库。

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.

从此模板创建你自己的仓库

在此项目的 GitHub 页面上，点击“Use this template”，然后点击“Create a new repository”。为你的新仓库命名，选择公开或私有，然后点击“Create repository”。如果 GitHub 显示“Include all branches”选项，你可以不勾选。这样你就能拥有一个独立的开发项目，确保你的网站更改保留在你的账户中，而不会回传到主模板仓库。

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

在电脑上打开你的新仓库

GitHub 创建副本后，打开该新仓库。点击“Code”，使用你偏好的编程工具打开或克隆你的新仓库。如果你使用终端，命令如下： git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git cd YOUR-NEW-REPOSITORY

Install dependencies

npm install

安装依赖

npm install

Start your AI agent — Claude Code recommended:

claude --chrome

启动你的 AI 代理 — 推荐使用 Claude Code：

claude --chrome

Run the skill:

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

运行技能：

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

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

Using a different agent? Open AGENTS.md for project instructions — most agents pick it up automatically.

自定义（可选）— 在基础克隆构建完成后，根据需要进行修改

使用其他代理？请打开 AGENTS.md 查看项目说明——大多数代理会自动识别这些指令。

Supported Platforms

AgentStatus
Claude CodeRecommended — Opus 4.7
Codex CLISupported
OpenCodeSupported
GitHub CopilotSupported
CursorSupported
WindsurfSupported
Gemini CLISupported
ClineSupported
Roo CodeSupported
ContinueSupported
Amazon QSupported
Augment CodeSupported
AiderSupported

支持的平台

代理状态
Claude Code推荐 — Opus 4.7
Codex CLI已支持
OpenCode已支持
GitHub Copilot已支持
Cursor已支持
Windsurf已支持
Gemini CLI已支持
Cline已支持
Roo Code已支持
Continue已支持
Amazon Q已支持
Augment Code已支持
Aider已支持

Prerequisites

  • Node.js 24+
  • An AI coding agent (see Supported Platforms)

前置要求

  • Node.js 24+
  • AI 编程代理（见“支持的平台”）

Tech Stack

  • Next.js 16 — App Router, React 19, TypeScript strict
  • shadcn/ui — Radix primitives + Tailwind CSS v4
  • Tailwind CSS v4 — oklch design tokens
  • Lucide React — default icons (replaced by extracted SVGs during cloning)

技术栈

  • Next.js 16 — App Router, React 19, TypeScript 严格模式
  • shadcn/ui — Radix 原语 + Tailwind CSS v4
  • Tailwind CSS v4 — oklch 设计令牌
  • Lucide React — 默认图标（克隆过程中会被提取的 SVG 替换）

How It Works

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

  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.

工作原理

/clone-website 技能运行一个多阶段流水线：

  1. 侦察 — 截图、提取设计令牌、交互扫描（滚动、点击、悬停、响应式测试）
  2. 基础构建 — 更新字体、颜色、全局样式，下载所有资源
  3. 组件规范 — 编写详细的规范文件 (docs/research/components/)，包含精确的计算 CSS 值、状态、行为和内容
  4. 并行构建 — 在 git 工作树中派遣构建代理，每个部分/组件一个
  5. 组装与质量保证 — 合并工作树、连接页面、与原网站进行视觉差异对比

每个构建代理都会在线接收完整的组件规范——包括精确的 getComputedStyle() 值、交互模型、多状态内容、响应式断点和资源路径。无需猜测。

Use Cases

  • Platform migration — rebuild a site you own from WordPress/Webflow/Squarespace into a modern Next.js codebase
  • Lost source code — your site is live but the repo is gone, the developer left, or the stack is legacy. Get the code back in a modern format
  • Learning — deconstruct how production sites achieve specific layouts, animations, and responsive behavior by working with real code

使用场景

  • 平台迁移 — 将你拥有的 WordPress/Webflow/Squarespace 网站重构为现代的 Next.js 代码库
  • 源码丢失 — 网站在线但仓库丢失、开发者离职或技术栈过时。以现代格式找回代码
  • 学习 — 通过处理真实代码，解构生产环境网站如何实现特定的布局、动画和响应式行为

Not Intended For

  • Phishing or impersonation — this project must not be used for deceptive purposes, impersonation, or any activity that breaks the law.
  • Passing off someone’s design as your own — logos, brand assets, and original copy belong to their owners.
  • Violating terms of service — some sites explicitly prohibit scraping or reproduction. Check first.

非预期用途

  • 钓鱼或冒充 — 本项目不得用于欺骗、冒充或任何违法活动。
  • 冒用他人设计 — Logo、品牌资产和原创文案归其所有者所有。
  • 违反服务条款 — 某些网站明确禁止抓取或复制。请先进行核实。

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
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

命令

  • npm run dev — 启动开发服务器
  • npm run build — 生产环境构建
  • npm run lint — ESLint 检查
  • npm run typecheck — TypeScript 检查
  • npm run check — 运行 lint + typecheck + build

如果使用 Docker：

  • docker compose up app --build — 构建并运行应用
  • docker compose up dev --build — 在开发模式下运行应用（端口 3001）

Updating for Other Platforms

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

WhatSource of truthSync command
Project instructionsAGENTS.mdbash scripts/sync-agent-rules.sh
/clone-website skill.claude/skills/clone-website/SKILL.mdnode scripts/sync-skills.mjs

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

为其他平台更新

两个“单一事实来源”文件支持所有平台。编辑源文件，然后运行同步脚本：

内容事实来源同步命令
项目说明AGENTS.mdbash scripts/sync-agent-rules.sh
/clone-website 技能.claude/skills/clone-website/SKILL.mdnode scripts/sync-skills.mjs

每个脚本都会自动重新生成特定平台的副本。原生读取源文件的代理无需重新生成。

Star History

(Link omitted)

Star 历史

（链接已省略）

License

MIT

许可证

MIT

← 返回新闻列表 / Back to news list