gszyboy Clone Website Skill
逆向工程并重建任意网站为像素级克隆。
概述
给定一个目标 URL，自动完成：
- 截图分析 + 设计 token 提取
- 交互行为探测（滚动、点击、悬停）
- 组件规范文档生成
- 并行 AI 构建
- 视觉 QA 对比
输出：Next.js + TypeScript + Tailwind CSS + shadcn/ui 项目
⚠️ 前置要求
必须先检查浏览器自动化工具。按以下优先级检查：
- Playwright CLI -
playwright-cli open <url> - Browser MCP -
skill_mcp(mcp_name="browser", tool_name="...") - 其他浏览器工具
如果没有任何浏览器工具可用，立即告知用户：
"网站克隆需要浏览器自动化工具。请先安装/配置以下之一：
- Playwright CLI: npm install -g playwright-cli
- Browserbase MCP
- 或确认你已配置的浏览器 MCP 工具"
Step 1: 预检（Pre-Flight）
1.1 URL 验证
解析 $ARGUMENTS 为一个或多个 URL，验证格式有效。
1.2 环境检查
npm run build
确保 Next.js + shadcn/ui + Tailwind v4 脚手架已就绪。
1.3 目录准备
创建必要目录：
docs/research/
docs/research/components/
docs/design-references/
public/images/
public/videos/
public/seo/
scripts/
1.4 项目设置
如果项目未初始化，告知用户先执行：
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
Step 2: 侦察阶段（Reconnaissance）
必须用 Playwright CLI 访问目标 URL。
2.1 截图
- 桌面端：1440px 整页截图
- 移动端：390px 整页截图
- 保存到
docs/design-references/
playwright-cli open <url>
playwright-cli resize 1440 900
playwright-cli screenshot --filename=desktop.png
playwright-cli resize 390 844
playwright-cli screenshot --filename=mobile.png
playwright-cli close
2.2 全局信息提取
字体：
- 检查
<link>标签中的 Google Fonts - 用
playwright-cli eval提取关键元素的 font-family - 记录：family, weight, style
颜色：
- 提取页面 CSS 变量中的颜色
- 更新
src/app/globals.css的:root和.dark
Favicon & Meta：
- 下载 favicons, apple-touch-icons, OG images 到
public/seo/ - 更新
layout.tsxmetadata
全局交互模式：
- 检查自定义滚动条
- 检查 scroll-snap
- 检查 smooth scroll 库（Lenis:
.lenisclass） - 检查全局 keyframe 动画
2.3 强制交互探测
滚动扫描：
playwright-cli mousewheel 0 100 # 慢速滚动，记录 header 变化
点击扫描：
playwright-cli click <element-ref>
playwright-cli snapshot # 记录行为
悬停扫描：
playwright-cli hover <element-ref>
# 记录 hover 状态的颜色/阴影/缩放变化
响应式扫描：
playwright-cli resize 1440 900
playwright-cli snapshot
playwright-cli resize 768 1024
playwright-cli snapshot
playwright-cli resize 390 844
playwright-cli snapshot
2.4 页面拓扑
映射页面每个区块：
- 视觉顺序
- fixed/sticky vs flow content
- z-index 层
- 区块间的交互模式
Step 3: 基础构建（Foundation Build）
按顺序执行，自己完成不分派：
3.1 更新字体
在 layout.tsx 配置目标站点的实际字体
3.2 更新全局 CSS
在 globals.css 配置：
- 颜色 tokens
- 间距值
- 关键帧动画
- 全局滚动行为
3.3 创建类型定义
在 src/types/ 创建 TypeScript interfaces
3.4 提取 SVG 图标
查找所有 inline <svg>，去重后保存为 React 组件到 src/components/icons.tsx
3.5 下载资源
写 Node.js 脚本 scripts/download-assets.mjs：
// 发现所有资源
const assets = {
images: [...document.querySelectorAll('img')].map(img => ({
src: img.src,
alt: img.alt,
width: img.naturalWidth,
height: img.naturalHeight
})),
videos: [...document.querySelectorAll('video')].map(v => ({
src: v.src,
poster: v.poster
})),
backgroundImages: [...document.querySelectorAll('*')].filter(el => {
const bg = getComputedStyle(el).backgroundImage;
return bg && bg !== 'none';
})
};
并行下载到 public/（最多 4 个并发）
3.6 验证
npm run build
Step 4: 组件规范与构建
核心循环：提取 → 写规范 → 分派 builder
4.1 提取
每个区块需要：
- 截图：滚动到区块，截取视口截图
- CSS 提取：用
playwright-cli eval获取精确值 - 多状态提取：hover/active/scroll 状态都记录
- 实际内容：textContent 提取所有文本
- 资源识别：该区块使用的图片/图标
提取脚本：
playwright-cli eval "
(function(selector) {
const el = document.querySelector(selector);
if (!el) return JSON.stringify({ error: 'Element not found: ' + selector });
const props = [
'fontSize','fontWeight','fontFamily','lineHeight','letterSpacing','color',
'backgroundColor','background','padding','margin','width','height',
'display','flexDirection','justifyContent','alignItems','gap',
'borderRadius','border','boxShadow','position','top','right','bottom','left','zIndex',
'opacity','transform','transition','cursor'
];
function extractStyles(element) {
const cs = getComputedStyle(element);
const styles = {};
props.forEach(p => {
const v = cs[p];
if (v && v !== 'none' && v !== 'normal' && v !== 'auto' && v !== '0px')
styles[p] = v;
});
return styles;
}
function walk(element, depth) {
if (depth > 4) return null;
const children = [...element.children];
return {
tag: element.tagName.toLowerCase(),
classes: element.className?.toString().split(' ').slice(0, 5).join(' '),
text: element.childNodes.length === 1 && element.childNodes[0].nodeType === 3
? element.textContent.trim().slice(0, 200) : null,
styles: extractStyles(element),
images: element.tagName === 'IMG' ? { src: element.src, alt: element.alt } : null,
childCount: children.length,
children: children.slice(0, 20).map(c => walk(c, depth + 1)).filter(Boolean)
};
}
return JSON.stringify(walk(el, 0), null, 2);
})('SELECTOR')
"
4.2 识别交互模型
在写规范前必须回答：这个区块是点击驱动还是滚动驱动？
判断方法：
- 先滚动：观察内容是否自动变化
- 如有变化：是 scroll-driven，记录 IntersectionObserver 或 scroll 监听
- 如无变化：再测试点击/悬停
4.3 写规范文件
路径：docs/research/components/<component-name>.spec.md
模板：
# <ComponentName> 规范
## 概述
- **目标文件**：`src/components/<ComponentName>.tsx`
- **截图**：`docs/design-references/<screenshot-name>.png`
- **交互模型**：<static | click-driven | scroll-driven | hover-driven>
## DOM 结构
<描述元素层级关系>
## 精确 CSS 值（来自 getComputedStyle）
### 容器
- display: ...
- padding: ...
- maxWidth: ...
### 子元素
...
## 状态与行为
### <状态名称，如 "滚动后">
- **触发**：<精确机制>
- **状态 A（触发前）**：...
- **状态 B（触发后）**：...
- **过渡**：transition: ...
### Hover 状态
- **元素**：<property>: <before> → <after>
## 内容（逐字复制）
<所有文本内容>
## 响应式行为
- **桌面 (1440px)**：...
- **平板 (768px)**：...
- **移动 (390px)**：...
## 资源
- 背景图：`public/images/<file>.webp`
- 图标：`<IconName>` from icons.tsx
4.4 分派 Builder
简单区块（1-2 个子组件）：一个 builder
复杂区块（3+ 个子组件）：拆分，每个子组件一个 builder
每个 builder 收到：
- 规范文件完整内容（内联在 prompt 中）
- 区块截图路径
- 共享组件信息（icons.tsx, cn(), shadcn primitives）
- 目标文件路径
- 验证指令：
npx tsc --noEmit
4.5 合并
builder 完成后：
- 合并到 main
- 验证：
npm run build - 如有类型错误立即修复
Step 5: 页面组装
在 src/app/page.tsx：
- 导入所有 section 组件
- 实现页面级布局（scroll containers, sticky positioning, z-index）
- 连接实际内容到组件 props
- 实现页面级行为（scroll snap, 动画, 过渡）
Step 6: 视觉 QA
必须执行：
- 并排对比原站和克隆站
- 桌面端 (1440px) 和移动端 (390px) 各检查一遍
- 测试所有交互：滚动、点击、悬停
- 如有差异：
- 规范文件错了 → 重新提取，修复组件
- builder 错了 → 直接修复组件
输出格式
克隆完成后报告：
✅ 克隆完成
- 总区块数：X
- 组件数：X
- 规范文件：X
- 下载资源：X 张图片, X 个视频
- 构建状态：✅/❌
- 视觉 QA：通过/有 X 处差异
⚠️ 禁忌事项
- 不要猜测 CSS 值：使用
getComputedStyle()精确提取 - 不要遗漏 overlay 图片：检查每个容器的完整 DOM 树
- 不要用点击驱动实现滚动驱动的交互
- 不要跳过规范文件：每个组件必须有规范
- 不要让 builder 做太多：规范超过 ~150 行说明需要拆分
- 不要近似：16px 和 15.8px 不一样！
- 不要跳过响应式测试：必须在 1440px, 768px, 390px 都测试
适用场景
✅ 适合：
- 从 WordPress/Webflow/Squarespace 迁移到你自己的站点
- 源码丢失的站点重建
- 学习现代网站的布局/动画/响应式实现
❌ 不适合：
- 钓鱼或冒充
- 侵犯商标/版权
- 违反服务条款的站点