Replica albertirgi/replica

能干什么

给编码 Agent（Claude Code 等）装的一个「技能」：你指着一个真实网站、本地页面、一张截图或一段录屏，Agent 把它在你自己的代码库里重建成 UI，然后 Replica 拿原版和克隆版逐元素对比，从四个维度打分——layout（每个可见元素的盒子位置）、style（字体/字号/字重/行高/颜色/圆角/阴影等计算样式）、pixels（感知差异，抗抗锯齿）、motion（动效的分段时序与缓动曲线）。分数不达标就继续改，直到过线为止。关键点是它把「差不多就行」变成一个能量化的数字：不是看截图觉得像，而是每处差多少、改哪一处能涨几分都列出来。

怎么干

• npx skills add albertirgi/replica（或把 skills/replica 拷进你的 Agent 技能目录）
• 装它唯一的依赖：npm install --prefix <技能目录>/scripts，再跑 replica.mjs doctor 自检
• 对 Agent 说人话：「把 https://example.com 的 hero 重建到 app/page.tsx，用我们自己的文案，faithful 档」
• Agent 自动 capture → 按 blueprint 建 → compare → 改最高的几处 → 再 compare，compare 退出码 0 就过

本站怎么用

站长定调（2026-11-13 当面）：**不立项复刻别人的网站**——对方站点的代码、设计排版有著作权，拿真实竞品站当参考去克隆属于侵权，这条明令禁止，工具说明里不写「找精美站来复刻」这类引导。它的合规用途是拿在**自己有权的内容**上做参照基准：① UI 回归——改完样式跑一遍，量化「哪些元素移了、差多少」，替代人眼比对截图；② 设计稿走查——开发实现 vs 自家设计稿的还原度打分；③ 多端一致性——同一页面在不同分辨率/浏览器下的像素漂移。它不替你设计，而是把「像不像」算成数。本地方案里它跑在 Node 20+ + Playwright 的 Chromium 上，不需要 GPU 显存，纯 CPU 就能跑。本站当前暂无 UI 自动化测试，是否引入属技术选型，未立项。

显存口径

不占显存：它驱动的是 Playwright 的 Chromium 做页面渲染与像素对比，CPU 即可；需要 Node 20+，参考是视频/GIF 时另要 ffmpeg，不需要 API key。跟 /capacity/ 的主模型显存档完全无关。