当在网上看到一个特别好看的网站时，想给自己项目也整个类似的风格。
以前会打开浏览器的开发者工具，去看它的颜色、字体、间距的值是多少，效率很慢。
后来有了 AI 之后，直接截图让 AI 帮我们复刻，但效果非常粗糙，很多细节都对不上。
直到最近，一个叫「AI Website Cloner Template」的开源项目爆火。
连续多次登上 GitHub Trending 榜单，短短时间狂揽了 26000+ Star。
它能帮我们快速复刻还原一个网站，只需要给 Agent 编程工具一个网址。
几分钟后，它就能把整个网站扒下来，包括字体、颜色、组件等等内容，然后重建一个。
官方推荐使用 Claude Code 和搭配 Opus 4.8 模型，复刻还原的效果是最好。
其他如 Codex、Cursor、Windsurf、Gemini CLI 等主流的 AI 编程工具也支持。
它本质上就是一个 Skill，可以安装到任何 Agent 工具上使用，运行命令如下：
/clone-website 要克隆的网站地址
支持一次丢好几个网址进去，可以同时处理好几个网站，这一点挺不错的。
接下来，它就会连接我们在 Chrome 浏览器上安装的 Claude 插件。
对目标网站进行从头到尾了解，包括页面怎么滚动、按钮点下去有什么反应等交互细节。
以及页面尺寸的适配兼容性，窗口缩大缩小，在手机和电脑上显示的情况一并了解。
还会把网站所用到的颜色值、字体、组件间距这些页面上设计的细节全部记录下来。
然后还会把网站上的图片、视频素材下载到本地，方便在重构网站的时候使用。
接着将整个页面所有区域进行拆解，比如导航栏、轮播图、功能介绍、页尾等模块。
每一块都会写一份详细说明，具体到什么字体、颜色、文案、有什么交互等信息内容。
准备好后，将任务分给几个 Agent 同时开工搭建，一个构建导航栏，一个构建轮播图…
最后把各自开发完成的部分组装拼到一起，再跑一遍检查，代码没问题，就本地运行给我们看结果。
再来说一下，这个工具对我们来说有哪些比较好的应用场景。
当想要重构自己网站，可以用它先给网站生成一份说明书，再让 AI 按说明书用新框架开发。
还有就是比较极端的情况，网站的源代码丢失了，若网站还是运行，可以让 AI 逆向复刻获取到代码。
最后对于技术初学者来说，它是一个很好的学习工具，可以用它查看感兴趣的网站交互效果、布局样式是怎么实现的。
但有一个底线需要遵守，不能拿这工具去一比一复刻别人网站后自己上线获取收益。
写在最后
以前提到 AI 编程，大家想到的多数是写代码、修复 Bug 这种开发的活。
现在给一个链接，AI 就能把整个网站的所有信息了解完成，克隆一个一模一样的出来。
以后前端拼的可能不再是谁抄样式抄得快，而是谁的设计判断和产品思路更值钱。
毕竟复刻这件事，现在 AI 的确比人做得又快又细了。
GitHub 项目地址：https://github.com/JCodesMore/ai-website-cloner-template
今天的分享到此结束，感谢大家抽空阅读，我们下期再见，Respect！