< img id="wx_img" src="https://www.qbitai.com/wp-content/uploads/imgs/qbitai-logo-1.png" width="400" height="400">
前端工程师最不想看到的开源项目出现了，一行命令克隆任意网站
GitHub 20k Star
量子位 | 公众号 QbitAI
看到一个网站设计得贼好看，想复刻一个同款？
现在不用打开F12一行行抄CSS了！GitHub上有个
的项目专门干这事儿——
ai-website-cloner-template
，一行命令，像素级克隆任意网站。
视频地址：https://mp.weixin.qq.com/s/aY5GjbcafuVZZvWBizF73g
给它一个URL，它会自动完成全站逆向解析：
采集页面元素精确计算样式、遍历滚动/点击/悬停等全量交互逻辑、提取标准化设计Token；
再调度多Agent基于Git工作树并行完成组件分块重建，最终输出一套可直接本地运行的完整
没错，出来的是一个完整的前端工程。
产物内置标准化路由、模块化组件、严格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
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会先对目标网站做一次全面体检。自动滚动整个页面，模拟鼠标悬浮和点击，把视口宽度拉到不同尺寸看响应式表现，把整站的视觉状态和交互行为全部录下来。
同时提取设计Token，比如配色体系用了哪些色值、标题正文分别什么字体什么字重、间距体系有没有规律、圆角和阴影的参数分别是多少。
这里所有数值都是用getComputedStyle()从浏览器里拿到的真实计算值。
（限制：站点私有业务JS、登录态受限动态内容、第三方嵌入组件无法完整捕获还原。）