by 运行时依赖
版本
将所有发现追加到BEHAVIORS.md文件中。
安装命令
点击复制技能文档
克隆网站 使用浏览器自动化工具执行完整的网站克隆工作流程：侦察 → 基础设施 → 组件 → 组装 → QA。
预飞检查 在开始之前，确认： 浏览器MCP工具可用（Playwright MCP或Chrome MCP，运行npx playwright install chromium以确保浏览器就绪） 目标URL可访问 项目已初始化：npx create-next-app@latest + Tailwind + shadcn/ui 创建文档目录：mkdir -p docs/research/components 仅在所有检查完成后继续进行第一阶段。
第一阶段：侦察 1.1 截图捕获 使用浏览器工具执行： 桌面全页截图（1440px视口宽度） 移动全页截图（390px视口宽度） 1.2 滚动行为 从顶部到底部逐渐滚动页面，记录到docs/research/BEHAVIORS.md： 导航栏样式是否随滚动变化（固定/粘性、背景颜色、阴影、高度） 进入动画（哪个元素、触发条件、动画效果） 滚动快照行为 视差或粘性元素 1.3 交互测试 点击所有交互元素（按钮、链接、选项卡、手风琴），记录切换/展开/弹出反馈 悬停以测试悬停效果（颜色变化、下划线、缩放、阴影） 切换视口到768px和390px，记录布局断点变化 将所有发现添加到BEHAVIORS.md
第二阶段：基础设施 2.1 字体 // 在浏览器控制台中运行 Array.from(document.styleSheets) .flatMap(s => [...s.cssRules].map(r => r.cssText)) .filter(t => t.includes('@font-face') || t.includes('font-family')) 还要从标签中提取并获取getComputedStyle(document.body).fontFamily。 将字体下载到public/fonts/。
2.2 颜色系统 / 在globals.css中使用CSS变量定义，示例结构： / :root { --background: #...; --foreground: #...; --primary: #...; --primary-foreground: #...; --muted: #...; --muted-foreground: #...; --border: #...; --radius: 0.5rem; } 从关键元素中使用计算样式提取确切的颜色值，不依赖于视觉猜测。
2.3 资源下载
下载所有、到public/images/和public/videos/
将所有内联SVG提取为独立的.tsx组件到components/icons/
使用wget或curl -O进行批量下载，保留原始文件名
2.4 验证 运行npm run build以确认项目在基础设施设置后可以编译。
第三阶段：组件规范 对于每个页面块（导航、英雄、功能、CTA、页脚等），按顺序执行以下操作： 3.1 精确CSS提取 在浏览器DevTools中针对目标元素运行： const el = document.querySelector('selector'); const style = getComputedStyle(el); // 记录所有非默认值 const props = ['padding','margin','border','borderRadius','boxShadow','backgroundColor','color', 'fontSize','fontWeight','lineHeight','letterSpacing','display','flexDirection', 'alignItems','justifyContent','gap','width','height','maxWidth','position', 'top','right','bottom','left','zIndex','opacity','transform','transition','animation']; props.forEach(p => { const v = style[p]; if (v) console.log(p, ':', v); });
3.2 DOM结构记录 提取HTML结构（右键单击复制 → 复制外部HTML） 注意分层：背景层 + 前景层 + 覆盖层可能是3个独立的元素 注意伪元素::before / ::after当它们作为装饰时，单独处理
3.3 状态样式提取 对于每个状态（悬停、活动、焦点、禁用、打开），手动触发，然后通过DevTools强制状态：:hover，然后再次运行getComputedStyle()以提取差异。
3.4 文本转录 复制真实文本内容（不要使用Lorem Ipsum）。
3.5 输出 为每个组件编写规范文档到docs/research/components/.md，包含： 截图参考 CSS属性表 DOM结构 状态样式差异 真实文本内容 响应式断点行为
第四阶段：构建 根据规范文档逐一构建React组件。 一份文件对应一个组件：components/.tsx 在构建每个组件后检查：npx tsc --noEmit 在优化之前完成：不要改进设计，同时编写 将CSS属性映射到Tailwind类，使用style={{}}进行精确值 使用之前提取的图标组件，不要替换为lucide-react
第五阶段：组装和QA 5.1 组装 在app/page.tsx中按照原始网站的顺序组装所有组件。
5.2 构建检查 运行npm run build 修复所有错误，直到编译通过。
5.3 比较验证 运行npm run dev以启动本地版本 同时在浏览器中打开原始网站和克隆网站 逐节滚动以比较，修复不一致 在三个宽度（390px、768px和1440px）验证响应性
关键原则 CSS必须使用getComputedStyle()提取 —— 不要视觉估计，不要猜测 滚动之前