15 分钟上线｜开源克隆网站 + 一键部署，搭建你自己的产品

把目标网站像素级克隆下来再用部署技能把它一键部署到线上。全程主要靠自然语言对话完成不需要命令行操作不需要懂代码。你要做的只有一件事把“你想复制哪个网站、要怎么上线”说清楚其它交给 AI 去检测、拆解、构建和质检复制部署上线。01用的工具网站克隆神器核心是一个开源项目AI Website Cloner Template。项目设计的目标就是逆向工程任意网站用AI重建为像素级克隆版本。官方说明是给 Claude Code 适配我用的是 WorkBuddy也适用于 OpenClawCodexTrae 等诸多 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 中新建任务选择一个工作目录输入对话推荐你按工作空间的方式把不同的目录执行不同的任务每个目录有自己任务相关的技能只把一些必要的技能设置为全局的技能。安装技能https://github.com/JCodesMore/ai-website-cloner-templateAgent 惯例获取仓库基本信息和文件列表做一次安全审计。审计通过之后询问你用哪种方式安装。这个项目本质是一个 Next.js 项目模板 多平台 AI Agent 指令不是标准的 WorkBuddy 技能包。安装方式有两种选择作为项目模板克隆 — 克隆整个仓库到你的工作目录用于实际的网站克隆项目转换为 WorkBuddy 技能 — 提取核心 SKILL.md 逻辑安装到 ~/.workbuddy/skills/作为通用技能使用你希望哪种方式或者两者都要我选的是作为项目克隆而不是全局安装。原因全局技能太多每次对话都要把这些技能内容填充进大模型的上下文白白消耗 token拖慢响应速度。这个技能别的任务不太用得上就作为这个项目的技能单独使用。顺便推荐一个使用 AI 助手的小技巧对话到一定阶段适当新开一个任务。上下文太长大模型执行任务的效率会下降有时候甚至搞错意图。每隔一段适当切断是保持 AI 稳定输出的好习惯。安装完成后还需要配置一个前置工具Playwright MCP用于浏览器自动化侦察这是克隆能正常工作的依赖。让它继续安装检查MCP工具如果没有配置则安装第二步克隆目标网站正好曾经有朋友问选哪个模型好我找到一个国内七个平台购买大模型套餐价格的对比站覆盖了智谱AI、Kimi、MiniMax、字节·方舟、阿里·百炼、百度·千帆、腾讯·混元这次选它作为克隆目标。直接告诉 AI 你的要求请使用 ai-website-cloner-template 技能复制网站https://z4crk6mg95.coze.site它自动创建了五个任务列表并开始执行五个阶段依次跑完。执行完成后 AI 自己做了一轮检查汇报结果打开本地预览还原度非常高。第三步安装一键部署技能克隆完了下一步是部署到线上。让 AI 检查当前技能列表看有没有现成的部署技能。没有的话让它去搜索。检查技能列表查找一键部署的技能如果没有搜索能完成的技能需要我用 find-skills 从社区搜索一键部署相关的技能吗可以搜索以下关键词搜索 Vercel 部署。找到之后安装安装 vercel-labs/agent-skillsdeploy-to-vercel惯例是安全审核安装完先测试能不能用。接着安装 Vercel CLI然后执行登录认证会自动打开浏览器显示下面的授权点击 Allow 即可。第四步部署上线部署也很简单对话 AI请将目录下 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 目录部署 src单独准备 package.json 和构建配置几分钟后部署成功线上 URL 已生成。克隆到上线的完整操作清单到这里一个属于你的网站就轻松上线了。后续有什么改进在这个项目基础上对话就可以完成再部署上线即可。我把整个过程压缩成一张清单方便你照着做步骤指令预期时间1安装 ai-website-cloner-template 技能2-3 分钟2复制网站[你的目标网址]5-8 分钟3安装 deploy-to-vercel 技能2-3 分钟4将网站部署到 Vercel2-5 分钟全程自然语言0 行代码约 15 分钟03核心不是克隆是使用 AI 的思路遇到问题 → 找到能做这件事的开源工具 → 让 AI 帮你安装、配置、执行 → 遇到报错继续问 AI。克隆网站、部署上线只是其中一个场景。同样的框架可以用来做数据采集、自动化测试、内容生成……本质都是你负责提需求AI 负责找工具、跑工具、解决跑工具时遇到的问题。对于刚开始用 Openclaw 以及类似 AI 助手的朋友这个案例可以作为一个入门参考不用搞懂每一行命令不用会配置环境先跑起来遇到问题问 AI慢慢就熟了。这大概是现阶段最务实的上手策略。善用技能组合11 2 。单工具做事组合做工作流程。AI 助手像一个施工队你给它图纸和目标它去勘测、备料、施工、质检。你只需要把最终的目标定义每一个步骤的标准是什么说清楚。如果你现在就能做一个网站你会做什么A. 做一个工具型网站比如资源汇总、数据对比B. 做一个内容型网站比如个人博客、知识库C. 做一个商业型网站比如落地页、产品展示D. 没想好但想先试试克隆一个网站欢迎评论区留言。-END-推荐阅读AI 不是在抢我的工作Harness 正在重构软件工程让 Agent 完成任何复杂任务效率提升 10 倍OpenClaw OpenCLI 实战体验让OpenClaw替你打工五没花什么钱养了6只虾还赚到了钱让 OpenClaw 帮你干活四Proactive Agent 技能让AI眼里有活OpenClaw Obsidian最小成本搭建 AI 记忆同步系统让OpenClaw替你打工每日摘要、获取社交网站信息、量化模拟回测实战教程踩坑让你的OpenClaw替你打工从0到1跑通小红书运营全流程实战教程谷歌提示工程白皮书Google Prompt Engineering White-paper