website-clonerReverse-engineer and clone any website into a clean Next.js + shadcn/ui + Tailwind v4 codebase using AI coding agents. Multi-phase pipeline: reconnaissance → foundation → component specs → parallel build in git worktrees → assembly → visual QA. Supports Claude Code, Codex CLI, Cursor, Windsurf, Gemini CLI, Copilot, Cline, Roo Code, and more. Trigger keyword…
Independent GitHub snapshot · Automated classification · Original documentation governs
name: website-cloner description: > Reverse-engineer and clone any website into a clean Next.js + shadcn/ui + Tailwind v4 codebase using AI coding agents. Multi-phase pipeline: reconnaissance → foundation → component specs → parallel build in git worktrees → assembly → visual QA. Supports Claude Code, Codex CLI, Cursor, Windsurf, Gemini CLI, Copilot, Cline, Roo Code, and more. Trigger keywords: clone website, copy website, replicate website, reverse engineer website, rebuild website, pixel-perfect clone, make a copy of this site, rebuild this page, 克隆网站, 抄袭网站, 复制网站, 逆向工程网站, 像素级复刻, 网站复刻, /clone-website. allowed-tools:
基于 ai-website-cloner-template by JCodesMore (22.4K ⭐, MIT License)
点对点复刻任意网站为干净的 Next.js + shadcn/ui + Tailwind v4 代码库。多阶段流水线：侦察 → 基础设施 → 组件规格 → 并行构建 → 装配 → 视觉 QA。
当用户请求涉及以下场景时,激活本技能:
用户需提供目标 URL。支持多个 URL 并行处理。
目标 URL 解析到的任何内容都在范围内。除非用户另有指定:
如用户提供额外指示(特定保真度级别、定制化、额外上下文),以用户指示为准。
以下是区分成功克隆和"差不多"的关键原则,必须在每个决策中内化:
每个构建者 agent 必须获得做好工作所需的一切: 截图、精确 CSS 值、带本地路径的已下载资源、真实文本内容、组件结构。如果构建者需要猜测任何东西 — 颜色、字号、padding 值 — 你的提取就失败了。多花一分钟提取一个属性,好过交付不完整的简报。
当一个 agent 拿到"构建整个功能区域"的任务时,它会粗略处理 — 近似间距、猜测字号,做出"差不多"但明显错误的东西。当它拿到一个单独的、有精确 CSS 值的组件时,每次都能做对。
审查每个区域的复杂度。简单的 banner 加 heading 和 button?一个 agent。复杂的区域有 3 种不同的卡片变体,每种都有独特的 hover 状态和内部布局?每种卡片变体一个 agent,再加一个做区域包装器。不确定时,拆得更小。
复杂度预算规则: 如果一个构建者 prompt 超过 ~150 行规格内容,这个区域对一个 agent 来说太复杂了。拆成更小的块。这是机械检查 — 不要用"但它们都相关"来覆盖它。
从真实网站提取实际文本、图片、视频和 SVG。这是克隆,不是模型。使用 element.textContent,下载每个 <img> 和 <video>,提取内联 <svg> 元素为 React 组件。只在内容明显是服务端生成且每次会话唯一时才生成内容。
分层资源很重要。 看起来像一张图片的区域通常是多层 — 背景水彩/渐变、前景 UI 模型 PNG、叠加图标。检查每个容器的完整 DOM 树,列举其中所有 <img> 元素和背景图片,包括绝对定位的叠加层。缺少叠加图片即使背景正确也会让克隆显得空洞。
在所有基础设施存在之前什么都不能构建: 带有目标网站设计令牌(颜色、字体、间距)的全局 CSS、内容结构的 TypeScript 类型、全局资源(字体、favicons)。这是顺序的、不可协商的。之后的所有内容可以并行。
网站不是截图 — 它是活的东西。元素会移动、变化、出现和消失在滚动、悬停、点击、调整大小和时间响应中。如果只提取每个元素的静态 CSS,你的克隆在截图中看起来正确但实际使用时毫无生气。
对每个元素,提取其外观(通过 getComputedStyle() 的精确计算 CSS)和行为(什么变化、什么触发变化、过渡如何发生)。不是"看起来像 16px" — 提取实际的计算值。不是"导航栏在滚动时变化" — 记录精确的触发条件(滚动位置、IntersectionObserver 阈值、视口交叉)、前后状态(两组 CSS 值)和过渡(持续时间、缓动、CSS transition vs. JS 驱动 vs. CSS animation-timeline)。
这是克隆中最昂贵的错误: 当原始网站是滚动驱动时构建基于点击的 UI,反之亦然。在编写任何交互区域的构建者 prompt 之前,你必须明确回答: 这个区域是由点击、滚动、悬停、时间还是某种组合驱动的?
如何确定:
IntersectionObserver、scroll-snap、position: sticky、animation-timeline 或 JS 滚动监听器。许多组件有多个视觉状态 — 标签栏在不同标签下显示不同卡片,页头在滚动位置 0 和 100 时看起来不同,卡片有悬停效果。你必须提取所有状态,不仅是页面加载时可见的。
每个组件在调度任何构建者之前都必须在 docs/research/components/ 中获得一个规格文件。这个文件是你提取工作和构建者 agent 之间的契约。构建者在其 prompt 中内联接收规格文件内容 — 该文件也作为可审计的产物保存。
每个构建者 agent 必须在完成前验证 npx tsc --noEmit 通过。合并工作树后,你验证 npm run build 通过。破损的构建永不可接受,即使是暂时的。
Phase 1: Reconnaissance Phase 2: Foundation Phase 3: Component Spec & Build
┌──────────────┐ ┌──────────────────┐ ┌──────────────────────────┐
│ Screenshots │ │ Update fonts │ │ Extract → Write Spec │
│ Design tokens│──────────────▶│ Update globals │────────▶│ → Dispatch Builder │
│ Behaviors │ │ Create types │ │ → Merge Worktree │
│ Page topology│ │ Download assets │ │ → Verify Build │
└──────────────┘ └──────────────────┘ └──────────────────────────┘
│
▼
Phase 5: Visual QA Diff Phase 4: Page Assembly
┌──────────────────────┐ ┌──────────────────────┐
│ Side-by-side compare │◀─────│ Wire all sections │
│ Section-by-section │ │ Page-level behaviors │
│ Fix discrepancies │ │ npm run build passes │
└──────────────────────┘ └──────────────────────┘
使用浏览器 MCP 导航到目标 URL。
docs/design-references/,使用描述性名称在做任何其他事情之前从页面提取:
字体 — 检查 <link> 标签中的 Google Fonts 或自托管字体。检查关键元素(标题、正文、代码、标签)上的计算 font-family。记录实际使用的每个字体族、字重和样式。使用 next/font/google 或 next/font/local 在 src/app/layout.tsx 中配置。
颜色 — 从页面的计算样式中提取网站调色板。在 :root 和 .dark CSS 变量块中用目标网站的实际颜色更新 src/app/globals.css。在合适的地方映射到 shadcn 的令牌名称(background, foreground, primary, muted 等)。为不适合 shadcn 令牌的颜色添加自定义属性。
Favicons & Meta — 下载 favicons, apple-touch-icons, OG images, webmanifest 到 public/seo/。更新 layout.tsx metadata。
全局 UI 模式 — 识别任何站点范围的 CSS 或 JS: 自定义滚动条隐藏、页面容器上的 scroll-snap、全局关键帧动画、backdrop filters、用作叠加层的渐变、平滑滚动库(Lenis, Locomotive Scroll — 检查 .lenis, .locomotive-scroll 或自定义滚动容器类)。将这些添加到 globals.css 并记录需要安装的任何库。
滚动扫描: 通过浏览器 MCP 从顶部到底部缓慢滚动页面。在每个区域暂停观察。
点击扫描: 点击每个看起来可交互的元素: 按钮、标签、卡片、链接。记录会发生什么。
悬停扫描: 悬停在每个可能有悬停状态的元素上: 按钮、卡片、链接、图片、导航项。
响应式扫描: 通过浏览器 MCP 在 3 种视口宽度下测试: 桌面 1440px, 平板 768px, 移动端 390px。
将发现保存到 docs/research/BEHAVIORS.md。
从顶部到底部绘制页面每个不同区域的映射。给每个区域起一个工作名称。记录:
保存为 docs/research/PAGE_TOPOLOGY.md — 这成为你的装配蓝图。
这是顺序的,自己完成(不委托给 agent):
layout.tsx 中匹配目标网站的实际字体src/types/ 中为观察到的内容结构创建类型<svg> 元素,去重并保存为 src/components/icons.tsx 中的具名 React 组件scripts/download-assets.mjs)下载所有图片、视频和其他二进制资源npm run build 通过这是核心循环。对页面拓扑中的每个区域(从上到下),做三件事: 提取, 编写规格文件, 然后调度构建者。
对每个区域,使用浏览器 MCP 提取一切:
docs/design-references/getComputedStyle(),运行完整的 DOM 树遍历提取脚本为每个区域(或子组件)在 docs/research/components/ 中创建规格文件。不可跳过。
模板包含: Overview, DOM Structure, Computed Styles (精确值), States & Behaviors (触发条件、前后状态、过渡), Per-State Content (如适用), Assets, Text Content (逐字), Responsive Behavior。
根据复杂度,在工作树中调度构建者 agent:
每个构建者 agent 接收:
npx tsc --noEmit 在完成前必须通过不要等待。 一旦为一个区域调度了构建者,立即继续提取下一个区域。构建者在工作树中并行工作。
当构建者 agent 完成:
npm run build所有区域构建并合并后,在 src/app/page.tsx 中连接一切:
npm run build 干净通过装配后,不要宣布克隆完成。进行并排比较截图:
只有在此视觉 QA 通过后,克隆才算完成。
调度任何构建者 agent 之前,验证每项都可打勾。如不能,回去提取更多:
docs/research/components/<name>.spec.md,所有部分已填写getComputedStyle(),不是估算<video>、Lottie 或 canvas。完成后,报告:
npm run build 结果)| Agent | 状态 |
|---|---|
| Claude Code | 推荐 — Opus 4.7 |
| Codex CLI | 支持 |
| OpenCode | 支持 |
| GitHub Copilot | 支持 |
| Cursor | 支持 |
| Windsurf | 支持 |
| Gemini CLI | 支持 |
| Cline | 支持 |
| Roo Code | 支持 |
| Continue | 支持 |
| Amazon Q | 支持 |
| Augment Code | 支持 |
| Aider | 支持 |
Original author: JCodesMore · Source: ai-website-cloner-template · License: MIT