导航|地址|刷新
前端工程师最不想看到的开源项目出现了，一行命令克隆任意网站_手机网易网

网易网易号



0

前端工程师最不想看到的开源项目出现了，一行命令克隆任意网站

量子位
2026-06-28 15:53·北京·《量子位》官方网易号

0

闻乐发自凹非寺

量子位 | 公众号 QbitAI

看到一个网站设计得贼好看，想复刻一个同款？

现在不用打开F12一行行抄CSS了！GitHub上有个2万Star的项目专门干这事儿——

ai-website-cloner-template，一行命令，像素级克隆任意网站。

打开网易新闻查看精彩图片
视频地址：https://mp.weixin.qq.com/s/aY5GjbcafuVZZvWBizF73g
给它一个URL，它会自动完成全站逆向解析：

采集页面元素精确计算样式、遍历滚动/点击/悬停等全量交互逻辑、提取标准化设计Token；

再调度多Agent基于Git工作树并行完成组件分块重建，最终输出一套可直接本地运行的完整Next.js工程。

没错，出来的是一个完整的前端工程。

产物内置标准化路由、模块化组件、严格TypeScript类型定义，执行npm run dev即可启动开发服务。

打开网易新闻查看精彩图片

而且Claude Code、Codex CLI、Cursor、Copilot、Gemini CLI、Windsurf全支持，总之市面上你能想到的AI编程助手它全接上了。

作者提醒：Claude Code+Opus 4.7效果最佳～

/clone-website

用法是真简单，咱先说说。

这个项目是GitHub模板仓库，打开项目页面点Use this template，一键生成属于你自己的仓库，然后拉到本地装个依赖：

git clone https://github.com/你的用户名/你的新仓库.git
cd 你的新仓库
npm install

启动Claude Code，建议带上—chrome让它能直接操控浏览器：

claude —chrome

然后输入那句灵魂命令：

/clone-website https://某个你盯了好久的网站

完事儿了。

接下来你什么都不用管，看着AI自己干活就行。

打开网易新闻查看精彩图片

它甚至还支持批量操作，一条命令同时丢多个URL进去：

/clone-website https://站点A.com https://站点B.com https://站点C.com

多个站会并行处理，各自隔离互不影响。

兼容性方面，项目里有一个AGENTS.md文件，充当所有AI编码工具共享的“单一事实来源”。

Claude Code、Cursor、Windsurf、Codex CLI、Gemini CLI……各个平台的配置文件都是从这一个文件自动同步生成的。

所以体验基本一致，都用同一条/clone-website命令。

想给新的平台加支持也很方便，改完AGENTS.md跑一下同步脚本就行：

bash scripts/sync-agent-rules.sh

用起来就是这么“朴实无华”，但AI在背后跑的流水线却不简单。

AI全站复刻工作流

第一阶段，全域采集。

AI会先对目标网站做一次全面体检。自动滚动整个页面，模拟鼠标悬浮和点击，把视口宽度拉到不同尺寸看响应式表现，把整站的视觉状态和交互行为全部录下来。

同时提取设计Token，比如配色体系用了哪些色值、标题正文分别什么字体什么字重、间距体系有没有规律、圆角和阴影的参数分别是多少。

这里所有数值都是用getComputedStyle()从浏览器里拿到的真实计算值。

（限制：站点私有业务JS、登录态受限动态内容、第三方嵌入组件无法完整捕获还原。）

第二阶段，基础搭建。

设计Token到手之后，AI把项目的全局样式一把更新掉，字体文件、CSS变量、颜色系统、Tailwind配置全部写好。

同时把原站用到的所有静态资源下载回来，图片、视频、favicon、OG图，按目录分好落盘。

跑完这一步，整个项目的底色就已经跟原站对齐了，后面建组件的时候不用再操心全局风格的事。

打开网易新闻查看精彩图片

第三阶段，组件规格书。

这一步是整条流水线里最硬核的部分。

AI会把页面拆成一个个独立区块，比如导航栏、hero区、功能介绍卡片、定价表、页脚，然后为每一个区块写一份详细的组件规格文件，存到相关目录下。

规格书里写的东西非常具体，每个元素精确的CSS计算值、所有状态之间怎么过渡（持续时间、缓动函数）、在不同响应式断点下布局怎么变、以及完整的文案内容。

第四阶段，并行构建。

规格书写完，AI开始派活儿。

它会为每个组件开一个独立的git worktree，然后调度多个builder智能体同时施工。

比如一个在建导航栏，一个在建hero区，一个在搞页脚，各干各的，互不干扰。

第五阶段，组装质检。

所有组件建完之后，AI把各个worktree的代码合并回主分支，拼成完整页面，路由和布局全部接好。

然后自动跑一遍npm run check进行ESLint检查、TypeScript类型检查、生产环境构建，全部都得通过。

五步跑完，你拿到的是一个Next.js 16+shadcn/ui+Tailwind CSS v4+TypeScript严格模式的完整前端工程，你可以直接改、直接部署。

打开网易新闻查看精彩图片

那这个工具该用在什么地方？

作者给了三个正当用途：

平台迁移

你自己的网站之前WordPress、Webflow或者Squarespace搭的，现在想迁到Next.js技术栈，又不想从零重写，可以用它先生成一版基础代码再在上面改。

源码恢复

网站还在线上跑着，但代码仓库丢了，可能之前的开发跑路了，也可能老技术栈年久失修谁也不想碰了，可以用它把活的站逆向回一套现代化的代码。

学习拆解

想研究某个网站是怎么实现特定的布局效果、滚动动画或者响应式方案的，用它生成代码之后逐组件去读，比自己在F12里翻来翻去高效太多。

当然了，作者也强调：不能用它来钓鱼、要重视版权、部分网站的服务条款也要事先核查！

总之，好工具欢迎大家使用，但要合理使用！！！

项目地址：https://github.com/JCodesMore/ai-website-cloner-template

特别声明：本文为网易自媒体平台“网易号”作者上传并发布，仅代表该作者观点。网易仅提供信息发布平台。

打开网易新闻体验更佳

热搜

美方拟购约1700亿美元导弹和核潜艇

 中方敦促日方彻底清除日遗化武毒害

 台风“白海豚”或冲击今年风王

 新西兰外长竟要华裔议员“滚回国”

外交部提醒避免危险抵近中方舰艇

 男孩被奶奶责怪负气离家5天后被找到

热门跟贴

打开APP发贴

0条跟贴

相关推荐

GPT-5.6自己优化自己实锤了，新的左脚踩右脚已经出现

量子位1跟贴



Claude Code 源码泄露了，有人用Python复刻了一个极简版

机器之心Pro14跟贴



BrowserBC：克隆人类点击，让一次网页操作转化为所有Agent的能力

量子位27跟贴



腾讯WorkBuddy上线人机双写：终于不用复制粘贴了

智东西



Kimi K3竟是GPT-2的22580倍，博主「肝」48小时发现：七年进化大模型不只是参数暴涨

机器之心Pro1跟贴



零样本迁移，降本80%！自适应时序预测Agent加持真实工业

新智元



模型变强没有用，创作仍然碎片化！面向长程多模态创作的开放式Harness

新智元



AI队友正在进入公司，腾讯云想重构下一代研发工作流

智东西



贾扬清再创业，造了一支AI军团，让GLM-5.2提速534%

智东西



1行代码，游戏PC沦为矿机！Steam新型ClickFix骗局曝光

雾野寻踪2

Claude Code之父：Harness保质期只有半年，解开缰绳吧

量子位



别学Claude Code了！OMC五大「卧槽」功能解析：自动化开发军团来了

钛媒体APP

AI开始给自己写代码了！GPT-5.6重写内核，服务成本直降20%

新智元2跟贴



平板车超宽上高速被拦，司机要看文件，路政你不要强词夺理

夜涩爱心345跟贴



树莓派Pico打造光学音乐盒：彩色纸条一扫即奏，自制教程开源

报错免疫体



生猪“打码器”，猪背上的代码到底有什么用？

小明不讲理1跟贴



8万星开源短视频神器，文案配音画面字幕全包揽，真的好用吗

量子位



AI自己写代码，训出1B端侧「小钢炮」-1

机器之心Pro

用网页做汇报？TRAE Work帮你写代码

马力职场进化论



均温20℃的夏日爽地，6个避暑出行好去处，一个比一个凉爽

钧哥哥乒乓生活

回到顶部回到首页

------
导航页打开网址