19k Star 的网站克隆模板，拆给你看的「工头模式」

大家好，我是若风。

前两天刷 GitHub Trending，一个 2026 年 3 月才开的项目跳到我眼前，19128 stars，2865 forks。三个多月长成这样，背后一定踩中了某个正在爆发的需求。

它叫 ai-website-cloner-template，作者 JCodesMore，README 第一句话写得直接，「Clone any website with one command using AI coding agents」。

把任意网站一条命令克隆成干净的 Next.js 代码。

听起来像不像 v0 或者 bolt.new 的离线开源版？也像不像早年 ThemeForest 抠站党的自动化未来？我点进去把它的 Skill 源码、AGENTS.md、CHANGELOG 全扒了一遍，发现它真正值得讲的不是「能克隆网站」这件事，而是它用来调度 AI Agent 的工头模式（Foreman Pattern）。

这套模式任何在写 AI Agent 编排、做 Skills 工程的人，都该看一眼。

一句话定位，它到底是什么

ai-website-cloner-template 不是一个 SaaS，它是一个仓库模板（Template Repository）。

你点 GitHub 的 Use this template, Fork 出自己的仓库，本地装好依赖，启动 Claude Code（推荐 Opus 4.7），敲一行 /clone-website https://xxx.com，剩下的交给 AI。

底座已经预埋好了，Next.js 16 + React 19 + shadcn/ui + Tailwind CSS v4 + Lucide React，TypeScript strict，干净得像教程项目。AI 只需要往这个底座上「长」出目标网站的血肉。

支持的 Agent 不止 Claude Code 一家，README 列了 12 个，Codex CLI、Cursor、Windsurf、Gemini CLI、Copilot、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider、OpenCode 都在表里。

你想想看，一个 3 月份才开的项目，能把 12 家 Agent 全部纳入兼容矩阵，这背后的工程取舍非常值得拆。

传统「克隆网站」为什么不灵了

我以前也抠过站，那套流程很肌肉记忆。

F12 打开 DevTools，Network 面板筛 Img，把图片一张张另存为。颜色用吸管吸，字体在 Computed 面板里翻 font-family。看到一个酷炫动画，录屏慢放逐帧猜 CSS。

坦白讲，这套手艺的极限，是「看起来差不多」。

问题出在三个地方。

第一，静态克隆站没灵魂。一个网站不是一张截图。Navbar 滚到 100px 突然缩矮、卡片淡入用了 stagger delay、Tab 是 IntersectionObserver 触发而不是点击、整页挂了 Lenis 做平滑滚动。这些「行为」用截图思维是抓不到的。

第二，单 Agent 干整站必然「差不多就行」。你让一个 Agent 把整页从 Hero 到 Footer 一次写完，它就会偷懒。字号猜 16px，行高猜 1.5，padding 全用 4 的倍数。看起来对，一对比全是错。

第三，资产抓不全。一个 Hero 区看着一张图，实际是水彩底图 + UI mockup PNG + 图标 overlay 三层叠出来的。少抓一层，克隆出来就是空的。

ai-website-cloner-template 把这三个洞都补上了，补的方式不是技术突破，是工程哲学。

核心创新，工头模式（Foreman Pattern）

Skill 源码里有一句话，把整个项目的灵魂讲清楚了。

This is not a two-phase process (inspect then build). You are a foreman walking the job site — as you inspect each section of the page, you write a detailed specification to a file, then hand that file to a specialist builder Agent with everything they need.

不是「先勘察再施工」的两阶段流程。你是一个工头，在工地上边走边看，看到一个区域，立刻写一份详尽的施工规格文件，然后把这份文件交给一个专职 builder 去做。

这就是 Foreman Pattern。

把它画成时序图，大概是这样。

Foreman (主 Agent)
   ├── 浏览器侦察 Section A
   ├── 写 A 的 spec 文件
   ├── 派发 Builder-A (在独立 worktree)
   ├── 浏览器侦察 Section B
   ├── 写 B 的 spec 文件
   ├── 派发 Builder-B (在独立 worktree)
   ├── 合并 A、B 的分支
   └── 视觉 QA 对比

工头不停。Builder-A 在它的 worktree 里干活的时候，工头已经开始看下一个区域了。这就是为什么整站克隆能在「合理时间」内跑完，不是靠 Agent 跑得快，是靠并行。

但这里有个最关键的细节，很多人会错过。

Builder 收到的不是「去看看 spec 文件」，而是 spec 文件的全部内容内联在 prompt 里。

Skill 原文写得很直白。

Don’t reference docs from builder prompts. Each builder gets the CSS spec inline in its prompt — never 「see DESIGN_TOKENS.md for colors」.

为什么这么严格？因为 Builder 一旦需要去翻外部文件，它就会偷懒。Inline 进 prompt，它就没借口，只能照着干。

这是 Foreman 模式能成立的底层契约，规格就是合同，必须一次性交付完整。

五阶段流水线，从侦察到 QA

Skill 把整个克隆流程切成五段，每一段的边界都很清楚。

Phase 1 侦察（Reconnaissance）。开浏览器（Chrome MCP 优先），全页截图存到 docs/design-references/，桌面 1440px、移动 390px 各一份。然后做四轮扫描。

滚动扫描，从上往下慢慢滚，记录 Navbar 变化阈值、元素淡入动画、自动切换的 Tab、scroll-snap 锚点、是否有 Lenis 平滑滚动。点击扫描，每个看着能点的东西都点一遍。悬停扫描，记录每个 hover 状态的颜色、缩放、阴影。响应式扫描，1440 / 768 / 390 三档全跑一遍。

输出到 docs/research/BEHAVIORS.md，这是后续所有 Builder 的行为圣经。

Phase 2 基础底座（Foundation Build）。这步由工头亲自干，不派出去。因为它要改的东西横跨多个文件，layout.tsx 改字体、globals.css 注入目标站的颜色 token、src/types/ 写内容结构 interface、src/components/icons.tsx 把页面上的内联 <svg> 抽成命名组件、写 scripts/download-assets.mjs 批量下图片视频 favicon。

底座搭完必须 npm run build 过。底座不通，后面全废。

Phase 3 组件规格 + 派发（Component Spec & Dispatch）。这是核心循环。工头对每个区域做三件事，提取 CSS、写 spec 文件、派发 Builder。CSS 提取用的是项目自带的一段 JavaScript 函数，调用 getComputedStyle()，递归 walk DOM 树四层，把每一层的 fontSize / fontWeight / padding / borderRadius / transition / transform 全部抓出来，输出 JSON。

Phase 4 页面装配（Page Assembly）。所有 Builder 跑完、合并干净之后，在 src/app/page.tsx 里把所有区域组件拼起来，接 Lenis、接 IntersectionObserver、接 scroll-snap，最后再跑一次 npm run build。

Phase 5 视觉 QA Diff。这一步是最反直觉的，也是这个项目可信度的地方。Skill 明确写，「After assembly, do NOT declare the clone complete」。

克隆完不许宣布完成。必须开原站和克隆站，1440px 和 390px 各截一次对比图，从上到下逐区域比。发现问题，先查 spec 对不对，spec 错就回去重抓，spec 对 Builder 错就改 Builder。

这五段加起来，就是一份完整工程作业书。任何想用 AI Agent 做大规模代码生成的项目，都能直接抄这个流水线结构。

九条铁律，每一条都是踩坑换来的

Skill 文档里有一段叫 Guiding Principles，九条原则。这是整个项目最值钱的部分。

我挑三条最反直觉的讲。

第一条，Completeness Beats Speed。每个 Builder 必须拿到一切它需要的东西，截图、CSS 精确值、本地化资产路径、真实文本、组件结构。少一个就算失败。

If a builder has to guess anything — a color, a font size, a padding value — you have failed at extraction.

强吧？失败定义写得这么硬，Agent 就没退路。

第二条，Small Tasks, Perfect Results。Agent 收到「搭整个 features 区域」时一定偷懒。收到「搭一个 16px 字号、12px 内边距的具体卡片」时，每次都对。

项目给了机械化的拆分红线，Builder prompt 超过 150 行 spec 内容就必须拆。不许用「但它们逻辑上是一体的」来 override。

第三条，Identify the Interaction Model Before Building。这是项目自己标注的「最贵的错误」。

This is the single most expensive mistake in cloning, building a click-based UI when the original is scroll-driven, or vice versa.

把滚动驱动的页建成点击切换的 Tab，不是改 CSS 能挽回的，要整个重写。所以 Skill 强制要求，写 Builder prompt 之前，必须先用滚动确定交互模型，不许先点。

这九条原则是项目作者花了无数次「差不多但不对」的失败克隆换来的。 CHANGELOG 显示 0.1.0 是 3 月 28 日发的，到 0.3.1 才一个多月，文档已经打磨到这种程度。这种迭代密度本身就是 Foreman 模式的副产品，每犯一次错，就往 Skill 里塞一条铁律。

多平台兼容，靠的是「单一真源 + 同步脚本」

12 家 Agent 全支持，听起来像 12 套配置地狱。这个项目的解法简洁得让人想鼓掌。

仓库里有两个真源文件（source of truth）。

AGENTS.md 是项目指令的真源，所有 Agent 平台的指令文件都由它生成。.claude/skills/clone-website/SKILL.md 是 /clone-website Skill 的真源。

改完真源，跑两个脚本。

bash scripts/sync-agent-rules.sh    # 再生成所有平台指令文件
node scripts/sync-skills.mjs        # 再生成所有平台的 Skill

各 Agent 平台的配置文件，CLAUDE.md、GEMINI.md、.cursor/、.windsurfrules、.clinerules、.amazonq、.codex、.opencode、.augment、.continue、.aider.conf.yml，全是派生物。

任何平台有差异，只需要改真源加一个 case 分支，一次同步所有平台全部跟上。

这套模式不只对这个项目有用。任何需要把同一套 Skill 分发给多个 Agent 生态的团队，都可以直接抄。我之前写 rf-sync-skills 做的事情是符号链接，这个项目做的是代码生成，两种思路各有取舍，但「单一真源」的核心是对的。

一份 spec 文件长什么样

光说理念没意思，给你看一份 spec 文件的结构。

每个区域对应一份 docs/research/components/<name>.spec.md，模板里有这些段落。

Overview 写目标文件路径、截图位置、交互模型。DOM Structure 画元素层级。Computed Styles 列每个元素的精确值，全部来自 getComputedStyle()，禁止估算。

States & Behaviors 是最重的一节。每个行为必须写清四个字段，Trigger（触发机制，精确到滚动位置或 IntersectionObserver rootMargin）、State A 与 State B 的 CSS 差值、Transition（时长 + 缓动）、Implementation Approach（CSS transition / scroll listener / animation-timeline）。

Per-State Content 段落是给有 Tab 的区域准备的，每个 Tab 都要点过去抓一份内容。Assets 段落要列出所有用到的本地图片，包括 layered overlay。Responsive Behavior 段落必须写 desktop / tablet / mobile 三档的具体差异和断点。

整个模板的本质，是把一个模糊的「克隆这块」拆解成几十个无歧义的字段。Agent 拿到这种 spec，几乎没有自由发挥的空间，只能照做。

减少幻觉的最佳方式不是更好的模型，是更窄的输入。

诚实的边界，是项目可信度的根

这个项目最让我喜欢的，是它不吹。README 里专门有一节叫 Not Intended For，明确列出三个禁止场景。

第一，钓鱼和冒充。第二，把别人的设计当成自己的。第三，违反目标站的服务条款，先去查清楚。

Skill 原文也写，「Customization: None — pure emulation」，克隆阶段不许夹带个人审美，先 1:1 复刻，再自己改。这种克制反而把项目从「灰色地带工具」拉回到「工程模板」的位置。

技术边界也讲得明白。视觉布局、组件结构、响应式、Mock 数据在范围内。后端、数据库、认证、实时功能、SEO、可访问性审计，明确写出范围外。

坦白讲，看到这种边界说明，我对项目的信任度反而上升。一个项目吹能做一切，往往是没人在认真维护。一个项目说清楚自己不做什么，才是有人在长期对它负责。

几个值得偷的工程小细节

除了 Foreman 模式，还有几个小亮点值得记下来。

Worktree 隔离。每个 Builder 在独立的 git worktree 分支里跑，跑完合并到 main。冲突由主 Agent 智能解决，因为它有完整上下文。这个模式比起「所有 Agent 改同一个工作区」要稳健得多，并发度上去了，互相不踩脚。

资产发现脚本。Skill 里给了一段在浏览器里跑的 JavaScript，一次性枚举整个页面的 <img>、<video>、backgroundImage、字体、favicon，并标注每个 img 的父元素 class 和 sibling 数量。这个 sibling 字段就是用来抓 layered overlay 的，一个父元素里有 3 个 img，那就是 3 层叠加，少抓一层就漏图。

Build 必须永远能过。Builder 跑完必须 npx tsc --noEmit 过，合并完必须 npm run build 过。不允许中间态有 broken build。这一条把 Agent 编排工程从「玩具」拉到「工业」。

复用 base-ui 而不是直接 Radix。package.json 里依赖是 @base-ui/react 而不是 Radix 原语。Base UI 是 Radix 团队的下一代无样式组件库，写法更现代，这是技术选型上的早期判断。

我从这门项目里学到的

ai-website-cloner-template 不是终点，它是个模板和起点。

真正的价值，是它把「AI Agent 时代的工程范式」具体化了。 Foreman Pattern、Spec 即合约、Worktree 并行、单真源多平台、9 条铁律、5 阶段流水线，这些模式不只能克隆网站。

你做任何需要 AI Agent 拆解大型任务的系统，都能直接套这套结构。我现在维护的几个 Skill 已经在偷偷抄它的「Single Source of Truth + Sync Script」模式。下次再写复杂 Skill，我会强制自己先把「什么是失败」定义到 prompt 里，逼自己不做模糊派发。

说真的，从 3 月 13 日开仓到 6 月 24 日三个多月，19k stars，2.8k forks，活跃 commit 到上周。一个仓库模板类项目长成这样，不是因为它能克隆网站，是因为它把 AI Agent 编排讲清楚了。

要看源码自己扒一遍，链接在文首的 source_url，Skill 源码 .claude/skills/clone-website/SKILL.md 是最值得反复读的一遍文档。

Clone 完记得改，别拿去钓鱼。