你的网站还在手敲代码?这条命令直接克隆任意网站

你有一个完美的网站设计，但还没开始写代码。

传统做法：手动搭建框架、写组件、调样式，几天甚至几周才能上线。

现在只需要一条命令。

这个项目是什么

ai-website-cloner-template^[1] 是一个AI驱动的网站克隆工具。

输入： 目标网站URL输出： Next.js应用代码

5个月，3万+ Stars。作者JCodesMore用这个项目证明了：AI编程代理已经成熟到可以自动化复杂的前端开发工作。

工作原理

┌──────────────────────────────────────┐│  1. 侦察                              ││     ├─ 截图目标网站                   ││     ├─ 提取设计Token（颜色、字体）    ││     └─ 扫描交互行为                   │├──────────────────────────────────────┤│  2. 基础搭建                          ││     ├─ 配置字体、颜色                 ││     ├─ 全局样式设置                   ││     └─ 下载资源文件                   │├──────────────────────────────────────┤│  3. 组件规格                          ││     ├─ 编写详细规格文档               ││     ├─ 精确CSS值计算                  ││     └─ 交互状态定义                   │├──────────────────────────────────────┤│  4. 并行构建                          ││     ├─ 多个AI代理同时工作             ││     └─ 每个代理负责一个区块           │├──────────────────────────────────────┤│  5. 组装与QA                          ││     ├─ 合并代码                       ││     └─ 与原站视觉对比                 │└──────────────────────────────────────┘

不是简单的HTML复制，而是完整的React组件重构。

支持的平台

技术栈： Next.js 16 + React 19 + TypeScript + Tailwind CSS v4 + shadcn/ui

使用步骤

1. 创建仓库

在GitHub页面点击 "Use this template" → Create a new repository

⚠️ 不要直接clone这个模板仓库用于你的项目

2. 本地安装

git clone https://github.com/YOUR-USERNAME/YOUR-REPO.gitcd YOUR-REPOnpm install

3. 启动AI代理

推荐使用Claude Code：

claude --chrome

4. 克隆网站

/clone-website https://example.com

一条命令，AI自动完成剩余工作。

适用场景

风险提示

⚠️ 仅限合法使用：   ✅ 克隆自己拥有的网站   ✅ 用于学习和研究   ❌ 不得用于钓鱼或冒充   ❌ 不得侵犯他人版权   ❌ 需遵守目标网站服务条款

总结

这个项目展示了AI编程代理的成熟度：

1. 多阶段流水线 — 侦察→搭建→规格→构建→QA
2. 并行架构 — 多个AI代理同时工作，加速开发
3. 可视化验证 — 与原站对比确保质量

如果你经常需要快速构建网站，或者想学习优秀网站的实现方式，这个项目值得收藏。

更多内容请关注公众号

• 项目仓库：https://github.com/JCodesMore/ai-website-cloner-template^[2]