简介

AI Website Cloner Template​ 是一个专为 AI 编程助手（如 Claude Code、Cursor、GitHub Copilot）设计的开源模板。它通过一个简单的 /clone-website指令，驱动 AI 代理自动完成网站逆向工程——将目标 URL 的视觉设计、交互逻辑和内容结构，完整地重建为高质量的 Next.js + TypeScript + Tailwind CSS​ 代码。

不同于传统的“爬虫”仅抓取静态 HTML，该项目利用 AI 的视觉理解能力，执行设计 Token 提取、组件化拆解和并行代码生成，最终产出一个可维护、可扩展的现代化 React 项目骨架。

主要功能

1. AI 驱动的逆向解析：

   • 视觉侦察：AI 自动截图、分析响应式布局，并提取精确的 CSS 计算值（颜色、字体、间距）。

   • 交互建模：自动探测页面的点击、悬停、滚动等交互状态，并生成对应的组件行为描述。

2. 组件化重构流水线：

   • 规范生成：为每个页面区块生成详细的组件规格文档（位于 docs/research/components/），包含精确的样式数据和资产路径。

   • 并行构建：利用 Git worktree 机制，分发多个 AI Builder 并行重构不同页面区块，大幅提升生成效率。

3. 多平台 AI 代理兼容：

   • 原生支持 Claude Code（推荐 Opus 4.6）、Cursor、OpenCode、GitHub Copilot、Windsurf、Gemini CLI 等主流 AI 开发工具。

4. 现代化技术栈输出：

   • 输出代码基于 Next.js 16+（App Router）、React 19​ 和 TypeScript。

   • 采用 shadcn/ui​ 设计系统，配合 Tailwind CSS v4，确保代码既美观又易于二次开发。

安装与配置

环境要求

• Node.js 24+

• 任意兼容的 AI 编程代理（推荐 Claude Code）

安装步骤

1. 克隆模板：

   git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-project
   cd my-project

2. 安装依赖：

   npm install

3. 启动 AI 代理：

   • 启动你的 AI 代理（如 claude --chrome或直接在 Cursor 中打开项目）。

如何使用

1. 执行克隆指令：

   • 在 AI 代理的聊天框中输入：

   /clone-website <目标网站URL>

   • 支持同时克隆多个 URL（用空格分隔）。

2. 等待自动化流程：

   • AI 会依次执行 侦察（Recon）→ 提取（Extract）→ 生成规范（Spec）→ 并行构建（Build）→ 质量检查（QA）。

   • 此过程会自动下载图片、视频等静态资源，并更新 tailwind.config中的设计 Token。

3. 验收与自定义：

   • 流程结束后，运行 npm run dev查看重建的网站。

   • 所有代码均位于 src/目录下，你可以像开发普通 Next.js 项目一样进行修改和扩展。

应用场景实例

场景一：遗留系统现代化迁移

痛点：公司官网基于老旧技术栈（如 WordPress 或 jQuery），源码混乱、维护困难，且无法利用现代框架的 SEO 和性能优势。

解决方案：使用该模板指向生产环境官网 URL，运行 /clone-website。AI 会生成一个视觉一致但技术栈全新的 Next.js 项目。开发者只需将后端 API 接入新生成的前端组件，即可完成低成本的技术栈迁移。

场景二：设计稿转代码（Design to Code）

痛点：设计师交付了高保真 Figma 原型，但前端开发排期紧张，手动切图写代码耗时长。

解决方案：将设计稿发布为一个临时的静态 HTML 页面（使用 Figma 的 Dev Mode 或类似工具），然后使用模板克隆该临时 URL。AI 会将设计稿精准转化为 React 组件，开发者仅需调整细节和业务逻辑绑定。

场景三：代码找回与重构

痛点：线上网站运行正常，但源码丢失（如硬盘损坏、前任开发者未交接），或源码为压缩混淆后的不可读代码。

解决方案：直接克隆线上网站，快速获得一份结构清晰、组件化的可读源码，作为重构或二次开发的基准。

GitHub 地址

• 项目仓库：<https://github.com/JCodesMore/ai-website-cloner-template>

• 在线演示：参见仓库 README 中的 YouTube 演示视频链接。

• 技术栈：Next.js, React, TypeScript, Tailwind CSS, shadcn/ui

• 开源协议：MIT License