AI 网站克隆模板：一条命令复刻任意前端架构

一个开源的 AI 网站克隆模板，用 Claude Code 或 Codex CLI 等 AI Agent，五阶段流水线自动把任意网站拆解、复刻成 Next.js 16 项目。

解决什么问题

用 AI 写前端代码时，最烦的不是模型能力不够，而是不知道怎么组织 prompt。随手一句"帮我克隆这个网站"，结果要么丢三落四，要么结构混乱。

这个项目解决的就是这个"怎么问"的问题——它把网站克隆拆成五个阶段，每个阶段有专门的 prompt 模板，AI Agent 按流水线干活，质量稳定得多。

五阶段克隆流水线

阶段 1：侦察（Reconnaissance）
→ 扫描目标网站的 URL、字体、配色、布局结构
→ 输出一份结构化的网站分析报告

阶段 2：组件规格（Component Specifications）
→ 根据分析报告，拆分出独立的组件清单
→ 每个组件定义 props、状态、交互行为

阶段 3：并行构建（Parallel Build）
→ 多个 AI Agent 同时生成不同组件
→ 互不依赖，速度翻倍

阶段 4：集成（Integration）
→ 把所有组件组装到一起
→ 处理路由、状态管理、全局样式

阶段 5：打磨（Polish）
→ 响应式适配
→ 动画微调
→ 细节对齐

怎么用

1. 准备

先确保装了 Node.js 18+，然后选一个 AI Agent 工具：

• Claude Code（推荐）：Anthropic 官方 CLI
• Codex CLI：OpenAI 的命令行工具
• Gemini CLI：Google 的
• Cursor / Windsurf：IDE 内置 Agent 也行

2. 一键启动

git clone https://github.com/JCodesMore/ai-website-cloner-template.git
cd ai-website-cloner-template
npm install

然后打开你选的 AI Agent，把项目目录喂进去，告诉它：

我想克隆这个网站：[目标 URL]
请按照项目中的流水线阶段依次执行

Agent 会自动读取 prompt 模板，按阶段执行。

3. 等结果

整个过程大概 5-15 分钟，取决于目标网站的复杂度。完成后你会得到一个完整的 Next.js 项目，npm run dev 直接跑。

技术栈

适合什么场景

适合：

• 快速出原型、验证想法
• 学习别人的前端架构和组件拆分方式
• 把设计稿转成可运行代码
• 接手旧项目时快速理解结构

不适合：

• 需要像素级还原的生产项目
• 涉及后端逻辑和数据库的完整克隆
• 需要处理用户认证、支付等敏感功能

开源地址：github.com/JCodesMore/ai-website-cloner-template

本文转自 白马号，有删改。