社区收录技能

Clone Website

JCodesMore 维护的 Codex skill，配合 Next.js + shadcn/ui + Tailwind v4 模板和浏览器 MCP，对一个或多个目标网站做逆向工程并逐像素克隆成可运行前端，按侦察 → 地基 → 组件规格派发 → 页面装配 → 视觉 QA 的流程边抽取边并行构建。

社区收录技能包web-clonereverse-engineeringfrontendnextjsshadcn-uitailwindcssbrowser-automationmcppixel-perfect

ID: community/clone-website
来源: 社区收录
更新日期: 2026-06-27
上游来源: https://github.com/JCodesMore/ai-website-cloner-template/tree/master/.codex/skills/clone-website
许可证: MIT

适用场景

把落地页、官网或产品页一比一克隆成可运行的 Next.js 项目，而不只是保存截图
同时克隆多个网站，传入多个 URL 后并行处理并把每个站点的抽取产物隔离到各自目录
自动还原真实素材（图片、视频、字体、favicon、内联 SVG）与交互行为（滚动触发、hover、标签切换、滚动吸附、平滑滚动库）
通过浏览器 MCP 逐区块抽取精确 CSS 与多状态样式，写成 spec 文件后派发给并行 builder agent 构建

一键安装上游 Skill

复制命令后在目标项目目录运行，即可通过上游地址安装该社区 skill。

需要本机已安装 Node.js / npm 环境；npx 会临时调用 skills CLI，默认安装到当前项目。

Install from upstreamnpx skills add https://github.com/JCodesMore/ai-website-cloner-template/tree/master/.codex/skills/clone-website

Clone Website

Clone Website 是 JCodesMore 维护的 AI 网站克隆模板仓库（ai-website-cloner-template）中附带的 Codex skill，能让 agent 对一个或多个目标网站做逆向工程，逐像素（pixel-perfect）地复刻成 Next.js + shadcn/ui + Tailwind v4 的可运行前端。它不是一个「先抄再补」的两段式流程，而是像一个巡视工地的工头：一边用浏览器 MCP 逐区块检查页面，一边写出详细规格文件，再把规格派发给并行作业的 builder agent 在独立 worktree 中构建。

来源

上游仓库：https://github.com/JCodesMore/ai-website-cloner-template
Skill 源文件：https://github.com/JCodesMore/ai-website-cloner-template/tree/master/.codex/skills/clone-website
上游 SKILL.md：https://github.com/JCodesMore/ai-website-cloner-template/blob/master/.codex/skills/clone-website/SKILL.md
许可证：MIT

适合什么时候用

想把某个网站（落地页、官网、产品页）一比一克隆成可运行的 Next.js 项目，而不是只存一张截图。
需要同时克隆多个网站：传入多个 URL，skill 会并行处理并把每个站点的抽取产物隔离到 docs/research/<hostname>/ 各自的目录。
想让 agent 自动还原真实素材（图片、视频、字体、favicon、内联 SVG 图标）和交互行为（滚动触发、hover、标签切换、滚动吸附、平滑滚动库等），而不是凭印象手写近似值。

技术栈与前置依赖

依赖	用途
Next.js + shadcn/ui + Tailwind v4	目标克隆项目的基座脚手架（必须先就位，`npm run build` 能过）
浏览器 MCP	必需。Chrome MCP / Playwright MCP / Browserbase MCP / Puppeteer MCP 任一，优先 Chrome MCP
Worktree 并行构建	builder agent 在独立 git worktree 中作业，边抽取边构建

没有可用的浏览器 MCP 时该 skill 无法工作，会先询问用户用哪个浏览器工具、如何连接。

5 阶段工作流

侦察 → 地基搭建 → 组件规格 & 派发 → 页面装配 → 视觉 QA 比对

侦察（Reconnaisance）：桌面 1440px / 移动 390px 全页截图；全局抽取字体、配色、favicon、全局 UI 模式；做强制交互扫描（滚动 / 点击 / hover / 响应式 3 档断点）；产出 BEHAVIORS.md 与 PAGE_TOPOLOGY.md。
地基搭建（Foundation Build）：先更新 layout.tsx 字体、globals.css 设计 token（颜色 / 间距 / 关键帧）、TypeScript 内容结构类型、SVG 图标组件，并批量下载全局素材；每步都验证 npm run build。
组件规格 & 派发：逐区块抽取截图 + getComputedStyle 精确 CSS + 多状态样式 + 真实文本，写成 docs/research/components/<name>.spec.md 规格文件，再按复杂度派发给并行 builder agent。
页面装配：在 src/app/page.tsx 把各区块组件组装，实现页面级滚动吸附、滚动驱动动画、暗色切换、IntersectionObserver、平滑滚动（Lenis 等）。
视觉 QA 比对：逐区块、桌面 + 移动两档与原站并排比对，交互逐项测试，只有过视觉 QA 才算完成。

核心原则

完整性优先于速度：builder 必须拿到一切（截图、精确 CSS、本地路径素材、真实文本、组件结构），少一个属性就算抽取失败。
小任务出完美结果：宁可再花一分钟多抽一个属性，也不要发一段含糊的「把整个区块都建了」的指令；单份 builder prompt 超过 ~150 行就拆分。
真实内容、真实素材：从线上抓真实文本 / 图片 / 视频 / SVG，不编造占位内容；多图层（背景渐变 + 前景 mockup + 覆盖图标）要逐层抽全。
先判断交互模型再动手：先滚动看是否自动变化，再判断是滚动驱动、点击驱动还是时间驱动，避免把滚动驱动的标签页误建成点击切换（最常见、最昂贵的错误）。
规格文件是唯一真相：派发 builder 前必须先写 spec 文件，所有 CSS 值来自 getComputedStyle，不估算；不写 spec 直接派发视为违规。
构建必须始终可编译：每个 builder 收尾前验证 npx tsc --noEmit，合并后验证 npm run build，构建坏了绝不接受。

安装提示

这是社区上游的 skill 目录。本站只收录索引和中文说明，不镜像上游 skill 文件。安装命令指向上游 skill 目录（Codex .codex/skills 体系）：

npx skills add https://github.com/JCodesMore/ai-website-cloner-template/tree/master/.codex/skills/clone-website

该 skill 假设宿主项目已是 Next.js + shadcn/ui + Tailwind v4 且 npm run build 可通过；若没有，需先按上游模板初始化脚手架。

使用注意

浏览器 MCP 是硬性前置，检测不到任何浏览器工具时会停下来询问，请提前接好 Chrome MCP 等。
默认保真度为「像素级精确」，只克隆视觉层：布局、样式、组件结构、交互、响应式与演示用 mock 数据；不含真实后端 / 数据库 / 鉴权 / 实时功能 / SEO / 无障碍审计。需要更高还原度时另行说明。
多 URL 场景默认并行构建以提速；资源紧张时可改为串行避免过载。
抽取产物集中在 docs/research/、docs/design-references/、public/、scripts/，多站点时按 <hostname> 隔离，便于审计。
skill 的具体阶段细节、规格模板与反模式清单以上游 SKILL.md 为准。