作者发布 pixel-text-motion-clone Skill，用三重 diff 闭环复刻网站前端

前几天闲着没事干复刻了deep的前端源码
https://wwavi.lanzouv.com/idx6P4ctl4xe
密码:2bd7 地址大家有兴趣看看
根据这个我写了一份skill

name: pixel-text-motion-clone
description: 当用户提供一个已授权或自有网站的 URL，要求“标题一模一样、页面文字一模一样、动画一模一样”地复刻前端代码时触发。捕获 DOM/计算样式/文本内容/动画参数，重建前端代码，用像素 diff、文本 diff、动画参数 diff 三重自动比对，并通过“测量→修复→再测量”的闭环收敛到目标分数。不用于未授权网站、不用于仅要求“风格相似”的复刻。

像素级文本与动画复刻

这个 Skill 解决什么

大多数“网站复刻” Skill 只做到“看起来像”：布局对、配色接近、动效大概有。但用户真正的验收标准往往是三件事同时成立：标题一字不差、页面文字一字不差、动画的时长和缓动曲线可测量地一致。

这个 Skill 把这三件事变成三个可执行的验证门，并且不允许“验证一次就宣布完成”。它要求 Agent 在“测量 → 修复 → 再测量”的闭环中收敛，直到分数达到目标或迭代耗尽。差异要么修掉，要么登记为“不可复现”，不允许用“大概”糊过去。

触发条件

触发：用户提供一个已授权或自有网站的 URL，要求“标题、文字、动画一模一样”或“逐像素一致”地复刻前端代码。

不触发：未授权网站；只要求“风格相似”；没有可验证的 URL，只凭截图或文字描述。

核心协议

规则一：捕获必须是运行时证据，不是截图猜测

规则：所有用于重建的值，必须来自源站的运行时测量——getComputedStyle 的计算样式、Web Animations API 的动画时间参数、DOM 的文本内容节点。不允许从截图中“目测”颜色、从视频中“估计”时长。

必须捕获的最小集：

• 标题与文本：document.title、所有可见文本节点的 textContent（保留空白和换行结构）。
• 计算样式：getComputedStyle 的颜色、字体族、字重、字号、行高、字间距、边框、圆角、阴影、变换矩阵。
• 动画参数：Web Animations API 返回的 duration、delay、easing、iterations、direction、fill；CSS transition 的对应属性；JS 驱动动画（GSAP、anime.js、手写 rAF）通过逐帧采样拟合的 cubic-bezier 曲线和时长。
• 编排关系：动画之间的时序关系（如 stagger group 的元素数量、间隔毫秒数），不是只捕获单条动画。
• 交互状态：默认、hover、focus、active 的计算样式差异。
• 动态区域标记：在捕获阶段记录时间戳、轮播图、广告位、用户计数等动态内容的位置，供噪声掩码使用。

规则二：重建必须逐 token 映射，不做“近似取整”

规则：重建代码中的每一个视觉值，必须能追溯到捕获数据中的一个具体 token。颜色不允许“取个近似的”、间距不允许“四舍五入”、动画缓动不允许“用 ease-in-out 代替”。

映射要求：

• 标题文本：逐字符一致，包括大小写、空格、标点。
• 页面文字：逐节点一致，不删减、不改写、不“优化文案”。
• 动画：每条动画的 duration、easing、transform 起止值必须来自捕获数据；JS 动画的缓动必须来自拟合曲线，而不是预设动效库的近似值。
• 字体：必须本地化所有 @font-face 的 src、font-weight、font-style、unicode-range，不允许回退到系统字体冒充。

规则三：三重验证门 + 闭环收敛

规则：重建完成后，必须依次通过三组自动比对。任何一组不通过，回到重建阶段修复，然后重新验证。这不是一次性检查，而是一个循环。

闭环的强制结构：

1. 测量：跑完三重验证门，计算一个 0–100 的综合分（视觉、布局、样式、内容、资产、动画加权）。
2. 归因：把不通过的差异归类为“可修复差异”和“噪声/不可复现差异”。可修复差异必须附带 selector、property、原值、当前值四个字段。
3. 修复：只根据可修复差异生成修复动作，不重新生成整个页面。
4. 回滚：如果一轮修复后综合分下降，自动回滚到上一轮的代码状态，而不是继续在变差的方向上迭代。
5. 再测量：回到第 1 步。

最大迭代轮次：默认 max_iterations: 5。达到上限时，输出 FAILED_WITH_RESIDUALS 和完整的残余差异清单，不允许无限循环。

第一门：文本 diff

• 比对 document.title 和所有可见文本节点。
• 输出字符级 diff，标出新增、删除、修改的位置。
• 通过标准：标题和页面文字与源站完全一致，零差异。

第二门：像素 diff

• 在三个视口（桌面 1440px、平板 768px、移动 390px）分别截图比对，不能只测首尾两个断点。
• 比对前先应用噪声掩码：遮蔽捕获阶段标记的动态区域、用纯色覆盖时间戳/广告位/轮播图。
• 使用像素 diff + SSIM + pHash 三种方法交叉验证：像素 diff 抓严格偏差，SSIM 抓感知差异，pHash 抗抗锯齿噪声。
• 通过标准：排除噪声后的有效差异像素比例不超过阈值（默认 0.5%）。

第三门：动画参数 diff

• 对每一条动画，比对 duration、delay、easing、关键帧起止值。
• 对 JS 驱动动画，比对逐帧采样后拟合的 cubic-bezier 控制点，以及拟合置信度。
• 对 stagger group，比对元素数量、间隔毫秒数、触发顺序。
• 辅助指标：motion-energy similarity，衡量整体“动态感”是否一致，而不是只看单条参数。
• 通过标准：时长容差 ±10ms、缓动控制点容差 ±0.02、编排间隔容差 ±5ms。

规则四：差异只有三种合法归宿——修掉、掩码、或登记

规则：验证中发现的任何差异，只能归入以下三类之一。不允许用“大致一样”“视觉上接近”来解释未处理的差异。

第一类：修掉（repair）

差异有明确的 selector/property/value 可定位，且属于可复现的视觉偏差（颜色差一个色阶、字号差 8px、动画时长差 50ms）。必须进入闭环修复。

第二类：掩码（mask）

差异来自动态内容或非确定性渲染（时间戳、轮播图、广告位、随机推荐、抗锯齿噪声）。在捕获阶段标记，在比对阶段遮蔽，而不是把整张截图标记为“通过”。掩码必须记录在 noise_mask.json 中，写明区域坐标和遮蔽原因。

第三类：登记（register）

差异无法修复也无法掩码（源站使用私有字体、依赖不可获取的 3D 模型、硬件相关的动画性能差异）。写入 deviations.md，每条必须归入预定义类别之一：

• asset-unavailable：资产不可得（私有字体、授权图片、专有模型）
• engine-difference：浏览器引擎渲染差异（抗锯齿、子像素布局）
• hardware-dependent：动画或渲染依赖特定硬件性能
• legal-restriction：版权或授权限制导致不能复制

每条登记必须附带影响范围（哪个区块、哪个交互）和替代方案（字体回退栈、静态降级）。

规则五：综合评分与收敛判定

规则：闭环的停止条件不是“某一轮感觉差不多了”，而是综合分达到目标或迭代耗尽。

评分维度与权重：

收敛判定：

• READY_FOR_REVIEW：综合分 ≥ 90，且文本门零差异、动画门无超差条目。
• CONDITIONAL_PASS：综合分 ≥ 80，文本门零差异，但存在已登记的不可复现差异。
• FAILED_WITH_RESIDUALS：达到 max_iterations 后综合分仍 < 80，或文本门存在未修复差异。

生成时的执行顺序

1. 捕获源站：在 instrumented browser 中打开源站 URL，提取标题、文本节点、计算样式、WAAPI 动画、JS 动画逐帧采样、编排关系、交互状态、动态区域标记。
2. 生成规格：整理为 spec/text.json、spec/tokens.json、spec/motion.json、spec/noise_mask.json、spec/assets.json。
3. 重建代码：按规格逐 token 生成前端代码。每生成一个区块，立即与规格做局部比对。
4. 进入闭环：跑三重验证门 → 计算综合分 → 归因 → 修复可修复项 → 回滚变差轮次 → 再测量。重复直到 READY_FOR_REVIEW、CONDITIONAL_PASS 或迭代耗尽。
5. 输出验收报告：综合分、各维度得分、三门状态、残余差异清单、掩码清单、登记清单。

输出格式要求

最终输出一份验收报告，格式如下：

复刻验收报告
源站: https://example.com
复刻侧: http://localhost:3000
最终状态: CONDITIONAL_PASS
综合分: 87.3 / 100
迭代轮次: 4 / 5

[维度得分]
文本 100 ｜ 视觉 82 ｜ 布局 91 ｜ 样式 88 ｜ 动画 76 ｜ 资产 95

[文本门] PASS
- 标题一致: yes
- 文本节点一致: 47/47

[像素门] CONDITIONAL PASS
- 桌面 1440px 有效差异: 0.31%（阈值 0.5%）
- 平板 768px 有效差异: 0.44%（阈值 0.5%）
- 移动 390px 有效差异: 0.48%（阈值 0.5%）
- 已掩码动态区域: 3 处（时间戳、轮播图、用户计数）

[动画门] CONDITIONAL PASS
- 动画条目: 8/8 参数在容差内
- stagger group: 1 组，元素 5 个，间隔 80ms（源站 80ms）
- motion-energy similarity: 0.94（阈值 0.90）

[残余差异] 见 deviations.md（2 项，均为 asset-unavailable）
[噪声掩码] 见 noise_mask.json（3 个区域）

正文之前放置验收报告，正文中说明捕获和重建的关键决策，以及每一轮闭环中被回滚的轮次和原因。

最小演示设计

输入：一个已授权的单页网站 URL，页面包含一个标题、一段文字、一个 hover 触发的按钮动画、一个由 GSAP 驱动的卡片 stagger 入场动画。

不用本 Skill：凭截图和肉眼重建，标题少了一个感叹号，按钮 hover 的颜色差了一个色阶，GSAP 动画被写成了 CSS transition，stagger 间隔从 80ms 变成了 100ms，移动端布局直接崩掉。

用了本 Skill：

复刻验收报告
最终状态: READY_FOR_REVIEW
综合分: 94.1 / 100

[文本门] PASS（标题含感叹号，12/12 文本节点一致）
[像素门] PASS（三视口有效差异均 < 0.2%）
[动画门] PASS
- hover: 200ms / cubic-bezier(0.4, 0, 0.2, 1) / #1A73E8 → #1557B0
- GSAP stagger: 5 元素 / 80ms 间隔 / 拟合曲线置信度 0.97
- motion-energy similarity: 0.96

闭环轮次: 3（第 2 轮分数下降，已自动回滚）

演示落点：左边是“看起来像但移动端崩了、动画参数全错”，右边是“三视口 + 动画编排 + 综合分证明一致，且第 2 轮变差被自动回滚”。标题的感叹号、色阶差值、stagger 间隔、回滚记录，都由报告直接指出，不需要人眼判断。

不做的事

1. 不对未授权网站执行复刻。使用前必须确认用户拥有复刻权限。
2. 不把“风格相似”当作“精确一致”来交付。
3. 不从截图或视频中“目测”值——所有值必须来自运行时测量。
4. 不在差异未修复、未掩码、也未登记的情况下宣布完成。
5. 不复制源站的私有资产（付费字体、授权图片、专有 3D 模型）。资产替换必须在 deviations.md 中登记。
6. 不在综合分下降时继续迭代——必须回滚到上一轮代码状态。

可选参数

• target_score：默认 90。闭环停止的目标综合分。
• max_iterations：默认 5。最大闭环轮次。
• pixel_threshold：默认 0.5。排除噪声后的有效像素差异百分比阈值。
• motion_tolerance_ms：默认 10。动画时长容差（毫秒）。
• motion_tolerance_bezier：默认 0.02。缓动曲线控制点容差。
• viewports：默认 [1440, 768, 390]。用于像素比对的视口宽度列表。
• noise_mask_auto：默认 true。是否自动遮蔽捕获阶段标记的动态区域。