一条命令克隆整个网站？这个开源项目把AI玩出了新高度
3.6k Stars，一键复刻任意网页
看到一个设计精美的网站，想把它作为自己项目的参考，甚至直接拿来用？
以前的做法是：打开浏览器开发者工具，一点点扒代码、下载图片、复制样式……折腾半天，还可能漏掉一堆细节。
现在不一样了。JCodesMore最近开源了一个项目——AI Website Cloner Template，用AI代理帮你自动完成网站克隆，一条命令搞定。
先看数据：发布不到一个月，GitHub已收获3.6k Stars，支持Claude Code、Cursor、Copilot、Windsurf等十几种主流AI编码工具。
它能做什么？
简单说：你给它一个网址，它帮你还原一个像素级一致的本地网站。
不是简单截图，而是真正可运行的Next.js项目。页面布局、颜色、字体、图标、交互效果，全部自动提取并重建。
演示视频里，作者克隆了一个设计复杂的落地页。AI代理首先截取全页面截图，提取所有设计变量，下载图片资源，然后分模块并行构建，最后组装成一个完整的Next.js应用。整个过程基本不需要人工干预。
快速上手
想自己试的话，三步搞定：
第一步：克隆项目
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone cd my-clone第二步：安装依赖
npm install第三步：启动AI代理并执行克隆
claude --chrome # 启动Claude Code /clone-website https://目标网站.com然后就等着吧。AI代理会自动完成侦察、提取、构建、组装全流程。
如果你用的是Cursor、Copilot或其他工具，项目根目录的AGENTS.md已经写好了完整的操作指引，大多数AI代理会自动读取。
工作原理
这个模板的核心是一个多阶段的自动化流程：
侦察阶段：AI代理会截图、提取设计令牌（颜色、字体、间距）、扫描交互行为（滚动、点击、悬停、响应式变化）
基础构建：更新全局样式、下载所有图片和视频资源
组件拆解：为每个页面区块生成详细规范文档，精确到
getComputedStyle()的计算值并行构建：在独立的Git工作树中同时构建各个组件
组装质检：合并所有组件，生成最终页面，并与原网站进行视觉对比
每个构建代理都会拿到完整的组件规范，包括精确的CSS值、交互模型、多状态内容、响应式断点、资源路径。没有猜测，全是精确还原。
技术栈
克隆出来的项目基于一套成熟的技术体系：
Next.js 16（App Router + React 19 + TypeScript严格模式）
shadcn/ui（Radix + Tailwind CSS v4）
Tailwind CSS v4（oklch设计令牌）
Lucide React（默认图标，克隆时会替换为提取的SVG）
这些组合保证了代码质量和可维护性，也方便你后续在此基础上二次开发。
适合谁用？
前端开发者：快速搭建参考项目，分析别人网站的布局和样式实现
产品经理/设计师：将灵感网站快速转化为可交互的本地原型
AI工具爱好者：看看目前AI代理能做到什么程度
需要做类似网站但不想从零开始的人：克隆下来，改改内容就是自己的
注意事项
需要Node.js 20+环境
建议使用Claude Code配合Opus 4.6模型，效果最佳（作者亲测）
克隆前确认目标网站的robots.txt和服务条款，尊重版权
克隆后的项目仅供学习和参考，不要直接用于商业用途
最后
这个项目的价值在于，它把“AI辅助编程”从“写几行代码”提升到了“完成一个完整任务”的层次。你不需要跟AI反复对话、逐步调整，只需要一条指令，它自己知道该做什么、怎么做。
项目的GitHub地址：https://github.com/JCodesMore/ai-website-cloner-template
如果你也在用AI编码工具，不妨试试这个模板，感受一下AI代理执行复杂任务的能力边界在哪里。
你平时会用AI工具辅助开发吗？欢迎在评论区聊聊你的使用体验。