一 前言

哈喽，大家好，我是 alien。今天我们来讲一个能够将精美网站一键复制的功能——ai-website-cloner-template 的使用和实现原理。

使用者痛点

• 手动搬运页面代码耗时且易出错：传统方式需要逐层分析 DOM、CSS、交互逻辑，工作量巨大。
• 跨端适配不一致：一次实现往往只能兼顾 PC 或移动端，导致在不同设备上出现布局错位或样式缺失。
• 缺乏可验证的复现流程：即使写出了页面也很难保证生成的代码与原站在视觉和交互上保持基本一致。
• 资源管理繁琐：图片、图标、字体等资产需要逐个下载、去重、重新引用，容易遗漏或重复。
• 团队协作难以并行：单人独立完成整个克隆过程效率低，下游维护成本高。

通过本篇文档，你能收获到哪些内容？

• AI 自动逆向解析网页的新思路；怎么说呢，
• Playwright 使用介绍；
• ai-website-cloner-template 的完整使用流程与内部实现；

快速上手

第一步先：把 GitHub 上的模板下载到本地：

git clone https://github.com/JCodesMore/ai-website-cloner-template.git

接下来：运行 Claude Code，执行 /clone-website。

案例展示：以掘金（) 为例。先看效果对比：

• PC 端对比：
• 移动端对比：
• 多端兼容场景展示：

整体评估：

• UI 还原度不错，实际测得可达%以上；
• 移动端适配细节处理较好；
• 生成代码质量与可维护性尚可。

二 主要实现

主要原理概览

P1 – 摸底 🔎

• 截图采集：Laucher Playwright 在三种标准视口别截取全页图与首屏图，以验证响应式断点。
• D​esign Tokens 抓取：L​在浏览器中执行 JS。值，实现对 CSS 变量、@apply 等高级特性的穿透读取。
• 交互扫描：L​模拟滚动、Tab 切换、Hover 等交互状态，把每种动态渲染结果都抓取成独立截图和对应元数据。
• P​产生的截图 + JSON（{tokens,assets。topology}.json}) 均保存在/docs/research/​ 和 /docs/design‑references/​

*痛点映射：手动收集这些信息往往需要数十分钟甚至数小时而自动化 Phase‑1 能在几分钟内完成全部采集。

P2 – 搭骨架 🏗️

• D​esign Tokens 落地：L​把 Phase‑1 抓取的颜色、字号映射到 Tailwind v4 的 @me 块还有 :root CSS 变量，实现统一类名调用（如bg-primary text-muted‑foreground)。

字​​体策略:根据目标站点使用的字体族决定加载方式。若为 Google Fonts，则直接走 next/font/google；话说回来，若为程序字体，则回退至 system‑font‑stack，省去外部请求。

图标去重:页面中可能出现数十个重复 SVG。怎么说呢，脚本去重后仅保留唯一图标。并封装成 React 组件icons.tsx。

资源下载:批量抓取页面中的图片、logo 与 favicon 到public/images/ 与public/seo/目录。怎么说呢，无法下载时使用基于 ID 的 hash 渐变占位块。保持视觉连贯，怎么说呢，

产出:完成后的全局样式文件。图标库,静态资源目录均已就绪。

* 痛点映射：传统手工收集 design tokens 与资源常常导致漏抓或冗余。这一步骤通过脚本“一键落地”，解决掉资源管理混乱的问题。

P3 –组件生成  ⚙️

• Spec 定义: 每个目标组件对应一套像素级别样式，真实文本内容还有交互模型。所有信息均来源于 Phase‑1 抓取的数据，无需人工猜测。

• 复杂度预算: 单份 spec 长度控制在 ** 行以内**；以掘金首页为例，将多个 section 拆分成 **N** 个 spec。由 **M** 个 Builder Agent 并行处理。拆得越细，单个 Agent 专注度越高，质量随之提高。

• Worktree 并发: 每个 Builder Agent 在独立的 Git worktree 分支上工作，互不冲突。完成后 Orchestrator 按顺序 merge 至 main，并立即执行npm run check 确保“Build Must Always Compile”。

• 产出: 每个 section 对应一个 React 组件文件 + 对应 spec 文件，实现“先写 spec 再写代码”。

* 痛点映射：多人协作时经常出现代码冲突和不一致的 UI 实现。此阶段通过 worktree 与 Spec 驱动，实现真正意义上的并行开发与零冲突合并。

P4 – 拼装与 QA  🔍

• 拼装: 在/pages/page.tsx 中按照 z-index 与响应式断点组合各 component。例如 Header 使用 sticky top。移动端浮动按钮采用 fixed 且层级高于 Footer，但不遮挡 Header。

• 视觉 QA: 脚本同时截取目标站与克隆站三个视口下的全页图，生成对比图。差异判定优先级：

  1. 说到尺寸差异，宽高、padding、gap 是最容易暴露的问题；
  2. 颜色差异这方面，背景色、文字色及边框色是肉眼最敏感的；
  3. 布局差异的观点是，flex方向、grid列数还有 sticky 是否失效。老实说，

* 痛点映射：没有自动化视觉回归测试的话。需要人工逐帧比对，这既耗时又主观。本 QA 流程实现了客观、一键化差异检测。

Playwright 简介 & 常用 API 示例

// 启动浏览器
const { chromium } = require;const browser = await chromium.launch;// 新建隐身窗口
const context = await browser.newContext;// 独立 session
// 基础操作示例
await page.goto;await page.click;
await page.screenshot;// 完整 API 列表请参考官方文档

三 具体实现思路 & 痛点技巧

多视口截图脚本

const viewports =;for {
const ctx = await browser.newContext({
viewport: { width: vp.width,height: vp.height }。locale: 'zh-CN',userAgent:
'Mozilla/5.0 AppleWebKit/... Chrome/... Safari/...'
});const page = await ctx.newPage;await page.goto;老实说，// 掘金等站点有懒加载。需要额外等待
await page.waitForTimeout;// 截全页
await page.screenshot({
path的观点是。`${outDir}/${vp.name}-full.png`,fullPage: true,});await ctx.close;}

Design Tokens 提取

// 在页面内执行 JS 收集所有计算样式
const tokens = await page.evaluate => {
const nodes = document.querySelectorAll;const fonts = new Set。sizes = new Set,colors = new Set;for {
const s = getComputedStyle;fonts.add，sizes.add;if ') colors.add;}
return {
从fonts来看。sizes: .sort,colors:,};})，// 将结果写入 tokens.json
await fs.promises.writeFile(
`${outDir}/tokens.json`,JSON.stringify
);

* 痛点映射：传统 CSS 抽离往往只能拿到源码而非最终渲染值。这里直接获取计算后值，从根源避免了变量解析错误。

强制互扫描

// 滚动 Sweep：记录不同 scrollY 时 header 样式变化
const scrollYPoints =;const scrollSnapshots =;for {
await page.evaluate,y);await page.waitForTimeout;// 等待渲染
const snapshot = await page.evaluate => {
const header = document.querySelector;return {
scrollY: window.scrollY,bgColor: header?getComputedStyle.backgroundColor : null,boxShadow: header?getComputedStyle.boxShadow : null,};})，scrollSnapshots.push;}
// 点击 Sweep：模拟点击“最新” Tab 并获取列表数量变化
await page.evaluate => {
const tab = Array.from)
.find === '最新');if tab.click;})，await page.waitForTimeout;// 等待网络请求完成
const latestCount = await page.evaluate =>
document.querySelectorAll.length
);老实说，console.log;// 将交互数据写入 topology.json
await fs.promises.writeFile(
`${outDir}/topology.json`,JSON.stringify
);

* 痛点映射：如果只靠静态截屏无法捕捉 Tab 切换或滚动导致的 UI 改变，本步骤确保所有动态状态都被记录下来从而避免“看不到却影响功能”的隐形错误。

页面拓扑映射 & Spec 索引生成

Header — 静态
LeftSidebar — 点击
ArticleList — 点击
ArticleCard — hover
CtaBanner — 静态
RightRail — 静态
Footer — 静态
MobileAppPill — 静态
...

json { "sections": }

此文件会被 Builder Agent 用来定位每个 component 的输入输出规范，这样就能实现“一键生成”。

视觉 Diff 自动化

// 对比 target 与 clone 三个视口下的全页截图
for {
// 本地建立产物页面
const ourCtx = await browser.newContext;const ourPage = await ourCtx.newPage;await ourPage.goto;await ourPage.screenshot;话说回来，

// 原始站点页面 const targetCtx = await browser.newContext;老实说，const targetPage = await targetCtx.newPage;老实说，await targetPage.goto;await targetPage.screenshot;

// 可选：调用 pixelmatch 或 Resemble.js 做像素级 diff 并输出 diff.png }

// 差异优先级检查示例： /* 1️⃣ 尺寸差异 → 宽高不匹配或 padding/gap 错误；2️⃣ 色彩差异 → 背景/文字/边框颜色偏差；3️⃣ 布局差异 → Flex/Grid 顺序错误或 sticky 丢失；*/

* 痛点映射：没有自动化 Diff 时需要开发者手工打开十几张图片进行肉眼比对，这一步骤把时间从「数小时」压缩到「几秒」。

四 & 行动教程 🚀

a i - w e b s i t e - c l o n e r - t e m p l a t e  真正价值不在「能复制网站」——这只是 DevTools 的基本功能，而是它把「截图+抄代码」重构为一条"可复用·可验证·可并发" 的工程流水线：

• P1 Reconnaissance : 自动抓取计算后的 design tokens 与交互快照；解决手工审查耗时的问题，
• P2 Foundation : 将 token 落地至 Tailwind/me，使后续编码无需再查找颜色或字号；解决资源管理混乱，
• P3 Spec & Build : 多 Agent 并行基于明确 Spec 建立组件，实现团队协作零冲突；解决单人瓶颈与代码质量波动；
• P4 Assembly & QA : 自动拼装并进行多视口视觉回归，让 UI 一致性有客观依据；彻底消除人工比对成本，

再看关键理念。“先写 Spec，再写代码”。这一步骤倒置是从“AI 玩具”跃升到“AI 工程”的分水岭，也是我们实现大规模网站克隆并保持质量的一把钥匙。

接下来行动建议 🎯

• # 克隆仓库至本地并运行 体验完整流程；话说回来，
• # 挑选一个喜欢的网站做实验。从而熟悉整个 Reconnaissance → Foundation → Spec‑Build → Assembly 流程；
• # 探索自定义 Prompt 与 Multi‑Agent 配置，让项目规模从单页 到整站多语言版本；

---