Clone Website — 网站像素级克隆技能
用 AI 代理将任意网站逆向工程为像素级一致的 Next.js 应用：自动侦察、设计令牌提取、组件规格生成、并行构建与视觉 QA。
技能指令要求通过Chrome MCP自动化浏览任意目标网站、批量下载图片/视频/字体等资产并用git worktree并行改写代码库。目标站点的授权边界、下载内容的使用合规性未被强制校验，也没有明确的用户确认门（如要求确认拥有克隆权）和回滚机制；仅在Guidelines中提示'尊重版权'。过程可见但授权、确认、隔离与恢复不完整，扣分主要在缺少确认门槛与外部效果约束。
指令本身结构良好且自洽：每阶段有验证步骤（npx tsc --noEmit、npm run build），spec文件作为唯一事实来源，交互模型判断有明确顺序。但强依赖Chrome MCP、并行agent和git worktree，异常输入（不可达URL、需登录页面、WebGL动画）仅有零散提示，无测试覆盖、失败反馈模式薄。静态评审上限为10，扣在异常路径与失败反馈薄弱。
适用场景清晰（重建设计、现代技术栈迁移），frontmatter声明了兼容性（Node 20+、Claude Code + Chrome MCP）和使用时机，含两个具体示例。但未声明不适用边界（如SPA需鉴权、复杂动画仅建议简化），无中文支持，核心依赖Chrome MCP与海外站点可达性，对中国大陆网络环境未做说明。扣在边界声明与环境适配证据不足。
文档分层合理（frontmatter、Overview、分阶段指令、示例、Guidelines），有版本号、作者与MIT许可证声明。但metadata.author为'terminal-skills'，与仓库所有者及职业平台主题明显不一致，来源归属可疑；仓库本体是career-pilot平台，该技能与仓库功能无关，缺少changelog、FAQ与维护责任说明。扣在归属矛盾与治理不完整。
声称产出'像素级Next.js克隆'，指令流程详尽但完全依赖AI agent执行质量，示例（Linear、Stripe）仅为示意性叙述而非可验证产出；'像素级'目标在现实中通常需要大量人工修正，静态评审无法确认直接可用性。扣在产出可用性证据缺失、价值主张夸大风险。
全部证据为作者自述指令与两个示意性示例，无测试、无CI覆盖该技能路径（仓库CI仅覆盖frontend构建与部署token检查）、无第三方执行证据。事实与推断未分离。扣在缺乏任何独立可复现证据。
- 克隆任意目标网站涉及版权与商标风险，技能未强制用户确认拥有克隆授权，商用前务必自行替换品牌资产与文案。
- 技能会通过浏览器自动化批量下载目标站资产（图片、视频、字体），请评估目标站点服务条款后再使用。
- metadata.author ('terminal-skills') 与仓库所有者明显不符，归属存疑，建议谨慎核实来源。
- 强依赖Chrome MCP与海外网络可达性，中国大陆用户可能无法正常运行；无中文支持。
- 静态评审未执行任何代码，'像素级克隆'的实际产出质量未经独立验证，预期需大量人工修正。
这个 Skill 能做什么，适合哪些场景？
这是一份位于 .gemini/skills/clone-website/SKILL.md 的技能，属于 career-pilot 仓库（MIT 协议）捆绑的技能集合之一。它驱动 AI 代理通过 Chrome MCP 浏览器自动化对目标网站做全面侦察，提取精确的 CSS 计算值与设计令牌，为每个页面区块生成规格文件，再用 git worktree 派发并行构建代理，最后进行逐区块的视觉 QA。它面向的是'重新设计前的站点复刻'与'迁移到现代技术栈'场景。注意它只管复刻与重建，与 career-pilot 主项目的简历、面试、求职追踪等功能无关。
读取 TARGET.md 中的目标 URL；通过 Chrome MCP 在 1440px 与 390px 截全页图；提取字体、完整调色板、favicon、全局 UI 模式（含 Lenis 等平滑滚动库）；逐段点击、滚动、悬停以捕捉全部交互状态并写入 BEHAVIORS.md 与 PAGE_TOPOLOGY.md；亲自搭建基础层（layout.tsx 字体、globals.css 令牌、TypeScript 类型、SVG 图标、批量下载资源到 public/）；用递归 getComputedStyle 遍历脚本提取每个元素的计算样式，写入 docs/research/components/ 下的规格文件；在 git worktree 中派发并行构建代理并逐个合并（每步跑 npx tsc --noEmit 与 npm run build）；最后并排截图对比原站与克隆站，测试全部交互后才宣告完成。
- 前端开发者想把自己喜欢的产品官网（如 linear.app）作为设计参考，重建为可控的 Next.js 代码库
- 团队接到'照着这个站点风格重做'的重设计需求，需要先拿到像素级精确的基线
- 设计迁移项目：把陈旧网站搬到 Next.js + shadcn/ui + Tailwind v4 的现代技术栈
- 自由职业者为客户做网站翻新，希望先复刻原站再在其上迭代
- 学习场景：通过完整复刻复杂页面（如 Stripe 定价页的多状态交互）来研究成熟的交互模型
这个 Skill 有哪些优点和局限？
- 强制提取精确的 CSS 计算值而非凭感觉估算，克隆保真度高
- 先判定交互模型（滚动驱动 vs 点击驱动 vs 时间驱动），避免整页返工
- 每个组件先有规格文件再派发构建，过程可审计、可回溯
- 每步都跑 tsc --noEmit 与 npm run build，构建始终可编译
- 明确的多响应断点（1440/768/390px）提取，而非只看桌面端
- 强依赖 Chrome MCP 浏览器自动化，没有它技能完全无法工作
- WebGL、Three.js、Lottie 等复杂动画只能简化或手动重做，技能自身不覆盖
- 未提供自动化测试套件，视觉 QA 依赖截图对比与人工判断
- git worktree 并行派发与子代理编排是 Claude Code 特有机制，移植到其他客户端需要改写
- README 与技能职责不匹配：仓库主页讲的是求职平台，技能相关文档极少
- 版权边界需自行把握，技能只提醒'用于学习与灵感，上线前必须定制'
如何安装这个 Skill？
仓库未提供针对该技能的独立安装命令。按 Agent Skills 惯例，需将仓库中 .gemini/skills/clone-website/ 目录放入你的 Claude Code 技能目录（如 .claude/skills/ 或项目的 .gemini/skills/）。前提条件：Node.js 20+、已配置 Chrome MCP 的 Claude Code，以及一个含 shadcn/ui + Tailwind v4 的 Next.js 脚手架项目。仓库 README 描述的是整个 career-pilot 应用集体的 Docker/npm 安装流程，与单独使用此技能无关。
如何使用这个 Skill？
在已就绪的 Next.js 脚手架项目里，创建 TARGET.md 写入目标 URL 与范围，然后触发该技能，例如：/clone-website https://linear.app。技能会先验证 Chrome MCP 可用，随后依次执行侦察、基础构建、组件规格与并行派发、页面组装和视觉 QA 五个阶段。仓库未说明在无 Chrome MCP 环境下的降级用法。
这个 Skill 与同类方案有什么区别？
SKILL.md 将自身定位为'用 AI 代理复刻站点'的工作流，与手工使用 DevTools 逐页抄样式相比，其差异在于自动侦察、规格化提取与并行构建；但来源材料未点名任何具体竞品，故不做额外对比。