复制忍者卡卡西

解决什么问题

在前端开发中，“看起来像”和“一模一样”之间往往隔着巨大的调试成本。直接参考竞品或开源项目时，常见的痛点是元素层级错乱、装饰图被裁切、字体渲染存在偏差，或是间距使用框架默认值导致整体视觉节奏不对。Copy Ninja Kakashi 提供了一套严谨的 SOP，旨在通过工程化手段实现“指纹级”的组件复刻，而非简单的外观模仿。

核心方法与流程

这套方法论将复刻过程拆解为三个关键阶段：

• 侦察（Reconnaissance）：使用 Playwright 截取基准图，通过 DevTools 拆解 DOM 树。强调抓取 Computed 面板的计算后样式，而非直接看 CSS 源码，确保拿到的是真实渲染值。
• 实现（Implementation）：遵循“先结构后样式”的原则。先搭建 DOM 骨架，再通过 CSS 变量统一管理设计 tokens。对于无法用工具类精确表达的尺寸，强制使用 inline style 写入精确像素值。
• 对齐（Alignment）：利用半透明截图叠加比对，将元素位置偏差控制在 ≤2px 以内，并修复常见的 z-index 层级失效问题。

关键铁则

• 单一数据源：轮播图与列表内容必须共用同一数组，避免数据不一致。
• 图片本地化：禁止引用外部 URL，所有资源需下载至 public 目录。
• 精细控制：合理利用负 margin 处理覆盖对齐，精确设置 overflow-x/y 避免意外裁切。