⚠️ 使用前必读:合规提醒这个工具能把一个网站"复刻"成现代化代码,但它不是用来抄袭或仿冒别人网站的。项目作者明确写明,禁止用于以下用途:
❌ 钓鱼、仿冒——不能用它伪造别人的网站去骗人,更不能违法。 ❌ 盗用他人设计——别人的 Logo、品牌素材、原创文案,版权都属于人家。 ❌ 违反网站服务条款——很多网站明确禁止抓取和复制,使用前请先确认对方是否允许。 简单说:只复刻你自己拥有的网站,或在对方授权、用于学习研究的前提下使用。 否则可能惹上法律麻烦。
先说一个很多人都遇到过的尴尬场景。
你公司的官网用了好几年,运行得好好的。可某一天你想改版、想加个新功能,结果发现——当年做网站的源代码不见了。
可能是外包的程序员早就离职了;可能是用的某个老建站平台已经过时;也可能是文件存在某台坏掉的电脑里,再也找不回来。网站还在线上跑着,但你手里却没有它的"图纸",想改一个字都改不动。
重新找人照着原样做一个?光是把每个按钮、每个间距、每种颜色都对照得分毫不差,就够设计师和程序员熬上好几个通宵了。
JCodesMore/ai-website-cloner-template 这个项目,就是来解决这个头疼问题的。

这个项目,你可以把它理解成一台专门给网站用的智能复印机。
普通复印机是把纸上的内容原样印一份出来;而它是把一个网页原样"印"成一套干净、现代的程序代码。
它的工作方式很简单:你给它一个网址,输入一句指令 /clone-website,剩下的事它全包了——AI 会自动去"参观"这个网站,把网站用的字体、颜色、图片、按钮样式一项项扒下来,然后像一个施工队一样,同时派出好几个"AI 工人"分头干活,最后把整个网站用全新的代码重新搭建出来。
它本身是一个模板(Template),意思是它已经把架子搭好了,你只要"拿来即用",配合 AI 编程助手就能跑起来。作者推荐搭配 Claude Code 使用效果最好。
如何使用
整个流程对新手也算友好,大致分这几步:
第一步:复制一份属于你自己的项目
在 GitHub 项目页面点击 「Use this template」(使用此模板)按钮,创建一个你自己的新仓库。注意:不要直接克隆原始模板,要先生成自己的副本,这样改动才不会影响到原项目。
第二步:把项目下载到电脑上
git clone https://github.com/你的用户名/你的新仓库.gitcd 你的新仓库第三步:安装依赖
npm install第四步:启动 AI 助手(推荐 Claude Code)
claude --chrome第五步:运行复刻指令
/clone-website <目标网址>你甚至可以一次填多个网址,让它批量处理。
第六步:按需微调
基础版本搭好后,你可以再根据自己的需求修改细节。
如果你用的是别的 AI 助手(比如 Cursor、Copilot),打开项目里的
AGENTS.md文件,大部分助手都能自动读取里面的说明。
软硬件要求
可以看到它的兼容性非常好,市面上主流的 AI 编程工具基本都能配合使用。
它到底怎么"复刻"网站的?
它背后是一条分了好几个阶段的"流水线",了解一下能帮你建立信任感:
侦查阶段——先给网站截图,把配色、字体等"设计密码"提取出来,还会模拟滚动、点击、悬停等各种操作,把网站的反应都摸清楚。 打地基——更新字体、颜色,把网站上的所有图片素材统统下载下来。 写施工图——为每个组件写一份超详细的"规格说明书",连每个元素精确的 CSS 数值都记录在案。 多人同时施工——派出多个"AI 工人",每人负责网站的一个区块,同时开工,效率拉满。 组装与质检——把各部分拼起来,再和原网站做"找不同"对比,确保还原度。
最关键的是,每个"AI 工人"拿到的都是精确到像素的施工说明,不靠猜,所以还原度才有保障。
使用场景
场景一:网站搬家
你自己拥有的网站,原来用 WordPress、Webflow 或 Squarespace 这类建站平台搭的,现在想升级成更现代、更灵活的 Next.js 代码版本,它能帮你平滑迁移。
场景二:找回丢失的源代码
就是开头说的那个痛点——网站还在线上跑,但代码没了、程序员走了、技术栈过时了。用它就能把代码以现代化的形式"复活"回来。
场景三:学习研究
想知道那些大厂网站的炫酷布局、动画、响应式效果是怎么做出来的?把它拆解成真实代码来研究,比对着看效果学得快多了。
项目地址
GitHub 仓库:https://github.com/JCodesMore/ai-website-cloner-
夜雨聆风