一条命令克隆整个网站？这个开源项目把AI玩出了新高度

3.6k Stars一键复刻任意网页image.png看到一个设计精美的网站想把它作为自己项目的参考甚至直接拿来用以前的做法是打开浏览器开发者工具一点点扒代码、下载图片、复制样式……折腾半天还可能漏掉一堆细节。现在不一样了。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 16App Router React 19 TypeScript严格模式shadcn/uiRadix Tailwind CSS v4Tailwind CSS v4oklch设计令牌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工具辅助开发吗欢迎在评论区聊聊你的使用体验。