把目标网站像素级克隆下来，再用部署技能把它一键部署到线上。
全程主要靠自然语言对话完成，不需要命令行操作，不需要懂代码。
你要做的只有一件事：
把“你想复制哪个网站、要怎么上线”说清楚，
其它交给 AI 去检测、拆解、构建和质检，复制，部署上线。
01
用的工具：网站克隆神器
核心是一个开源项目：AI Website Cloner Template。
项目设计的目标就是逆向工程任意网站，用AI重建为像素级克隆版本。
官方说明是给 Claude Code 适配，我用的是 WorkBuddy，也适用于 OpenClaw，Codex，Trae 等诸多 AI 助手。
你只需要提供一个 URL，运行 `/clone-website` 命令，剩下的事情它全部自动完成
用 Chrome MCP 检查目标网站提取设计令牌和所有视觉资源编写每个组件的详细规范分发多个并行构建代理，各自负责重建不同区块所有操作都在自动合并的隔离 git 工作树里完成，互不干扰。
它是怎么做到"像素级"的？
`/clone-website` 这个命令实际上运行了一个工作流程，可以分成如下五阶段：
阶段 1：侦察
截图、提取设计令牌，还会模拟真实用户行为：滚动、点击、悬停、切换响应式断点。
这一步拿到的是动态状态下的真实样子，不是静态截图。
阶段 2：基础搭建
根据侦察结果，更新字体、颜色变量、全局样式，同时把所有图片、图标等资源全部下载到本地。
阶段 3：组件规范
这是最关键的一步。它会把每个 UI 组件写成详细的规范文件，存在 `docs/research/components/` 目录里。
规范里包含精确的 `getComputedStyle()` 计算值、交互状态、响应式断点、内容结构，全部是精确数值，不是模糊描述。
阶段 4：并行构建
把构建代理分发到不同的 git 工作树，每个组件或页面区块对应一个代理，并行执行，速度比串行快得多。
阶段 5：组装与质量检查
合并所有工作树，连接页面，最后针对原始网站运行视觉差异对比，确保还原度。
有了克隆工具，咱们来试试复制一个网站，把它上线作为自己的产品。
下面全程操作基于我本地安装的 WorkBuddy，其他 AI 助手包括 OpenClaw 也可以按这个步骤进行，细节上有问题直接问 AI 就行。
这也是有了 AI 之后的转变：
有什么问题，不再需要搜索，不需要问别人，直接问 AI，多半有你要的答案。
02
实战：15分钟，从克隆到上线
第一步：安装克隆技能
在 WorkBuddy 中新建任务，选择一个工作目录，输入对话：
（推荐你按工作空间的方式，把不同的目录执行不同的任务，每个目录有自己任务相关的技能，只把一些必要的技能设置为全局的技能。）
代码语言：javascript复制安装技能：https://github.com/JCodesMore/ai-website-cloner-templateAgent 惯例获取仓库基本信息和文件列表，做一次安全审计。
审计通过之后，询问你用哪种方式安装。
这个项目本质是一个 Next.js 项目模板 + 多平台 AI Agent 指令，不是标准的 WorkBuddy 技能包。安装方式有两种选择：
作为项目模板克隆 — 克隆整个仓库到你的工作目录，用于实际的网站克隆项目
转换为 WorkBuddy 技能 — 提取核心 SKILL.md 逻辑安装到 ~/.workbuddy/skills/，作为通用技能使用
你希望哪种方式？或者两者都要？
我选的是作为项目克隆，而不是全局安装。
原因：全局技能太多，每次对话都要把这些技能内容填充进大模型的上下文，白白消耗 token，拖慢响应速度。
这个技能别的任务不太用得上，就作为这个项目的技能单独使用。
顺便推荐一个使用 AI 助手的小技巧：
对话到一定阶段，适当新开一个任务。
上下文太长，大模型执行任务的效率会下降，有时候甚至搞错意图。
每隔一段适当切断，是保持 AI 稳定输出的好习惯。
安装完成后，还需要配置一个前置工具：Playwright MCP，用于浏览器自动化侦察，这是克隆能正常工作的依赖。
让它继续安装：
代码语言：javascript复制检查MCP工具，如果没有配置，则安装第二步：克隆目标网站
正好曾经有朋友问，选哪个模型好？
我找到一个国内七个平台购买大模型套餐价格的对比站，覆盖了智谱AI、Kimi、MiniMax、字节·方舟、阿里·百炼、百度·千帆、腾讯·混元，这次选它作为克隆目标。
直接告诉 AI 你的要求：
代码语言：javascript复制请使用 ai-website-cloner-template 技能复制网站：https://z4crk6mg95.coze.site它自动创建了五个任务列表并开始执行，五个阶段依次跑完。
执行完成后 AI 自己做了一轮检查，汇报结果：
打开本地预览，还原度非常高。
第三步：安装一键部署技能
克隆完了，下一步是部署到线上。
让 AI 检查当前技能列表，看有没有现成的部署技能。没有的话让它去搜索。
代码语言：javascript复制检查技能列表，查找一键部署的技能，如果没有，搜索能完成的技能需要我用 find-skills 从社区搜索一键部署相关的技能吗？可以搜索以下关键词：
搜索 Vercel 部署。
找到之后，安装：
代码语言：javascript复制安装 vercel-labs/agent-skills@deploy-to-vercel 惯例是安全审核，安装完先测试能不能用。
接着安装 Vercel CLI，然后执行登录认证，会自动打开浏览器，显示下面的授权，点击 Allow 即可。
第四步：部署上线
部署也很简单，对话 AI：
代码语言：javascript复制请将目录下 ai-website-cloner-template/src 目录中的网站部署到 Vercel先检查项目状态：
问题： src/ 目录不是一个独立可部署的项目——它缺少 package.json、next.config 等配置文件，只是 ai-website-cloner-template 项目的源码子目录。
方案建议：
部署整个 ai-website-cloner-template 项目 — 这是完整的 Next.js 项目，可直接部署
部署 src/ — 需要单独准备 package.json 和构建配置，工作量较大
建议选方案 1，直接部署整个项目。要继续吗？
让它单独部署 src 目录
代码语言：javascript复制部署 src，单独准备 package.json 和构建配置几分钟后，部署成功，线上 URL 已生成。
克隆到上线的完整操作清单
到这里，一个属于你的网站就轻松上线了。
后续有什么改进，在这个项目基础上对话就可以完成，再部署上线即可。
我把整个过程压缩成一张清单，方便你照着做：
步骤
指令
预期时间
1
安装 ai-website-cloner-template 技能
2-3 分钟
2
复制网站：[你的目标网址]
5-8 分钟
3
安装 deploy-to-vercel 技能
2-3 分钟
4
将网站部署到 Vercel
2-5 分钟
全程自然语言，0 行代码
约 15 分钟
03
核心不是克隆，是使用 AI 的思路
遇到问题 → 找到能做这件事的开源工具 → 让 AI 帮你安装、配置、执行 → 遇到报错继续问 AI。
克隆网站、部署上线只是其中一个场景。
同样的框架，可以用来做数据采集、自动化测试、内容生成……
本质都是：你负责提需求，AI 负责找工具、跑工具、解决跑工具时遇到的问题。
对于刚开始用 Openclaw 以及类似 AI 助手的朋友，这个案例可以作为一个入门参考
不用搞懂每一行命令，不用会配置环境，先跑起来，遇到问题问 AI，慢慢就熟了。
这，大概是现阶段最务实的上手策略。
善用技能组合，1+1 > 2 。
单工具做事，组合做工作流程。
AI 助手像一个施工队：你给它图纸和目标，它去勘测、备料、施工、质检。
你只需要把最终的目标定义，每一个步骤的标准是什么说清楚。
如果你现在就能做一个网站，你会做什么？
A. 做一个工具型网站（比如资源汇总、数据对比）
B. 做一个内容型网站（比如个人博客、知识库）
C. 做一个商业型网站（比如落地页、产品展示）
D. 没想好，但想先试试克隆一个网站
欢迎评论区留言。
-END-