用途
UI Diff 的核心用途是把一次界面改动变成可对照、可追溯的视觉说明。它生成的是一张自包含 HTML 页面，把 UI 的两个状态并排放在一起，并把设计或实现理由直接钉到像素上。Before 通常代表当前 UI；After 代表一个计划、一个已经完成的分支，或者一个替代方案。
主要能力
- 生成单页 HTML，左右并排展示两个 UI 状态。
- 按来源忠实渲染：如果两个状态都能运行，各自指向自己的服务器；如果是需要重建的 Web UI，把真实 CSS 和标记放入 <iframe srcdoc>，让两个样式表彼此隔离；原生、移动端、终端等其他情况使用截图。
- 两侧使用相同的内容和数据，确保唯一差异就是本次改动。
- 页面结构包括：标题；一到两句话说明改了什么、什么保持不变；一行仅包含此 diff 所需控制项；两栏 “Before · ” 与 “After · ”；每栏下方的编号注释。
- Before 注释指出问题，After 注释说明修复。每条注释是加粗结论 + 一句原因，并在有具体数值时给出 px、数量、价格等数字。
- 框架上针对每条注释描述的元素放置编号针脚；悬停注释高亮对应针脚，悬停针脚高亮对应注释。
- 控制项按需提供，可能包括：注解开关、布局（并排/堆叠）、视口、长框架同步滚动、能触发本次改动的数据变体。
使用方式
- 将页面输出到 $TMPDIR/<topic>/before-after.html，并在后台浏览器窗口中打开。
- 当字体、资源或 iframe 需要 http 时，用 python3 -m http.server 提供目录服务。
- 完成后回复路径。
- 判定完成：每条注释都在其描述的元素上有针脚，且每一侧都与其标注的来源一致。
适用场景
当用户要求一个 UI diff、一个 before/after 模拟，或想查看某次界面改动时使用。适合展示当前界面与计划、已完成分支或替代方案的差异。
限制
资料中未说明该技能对框架、语言或工具链的限制，也未提供收费、价格或平台支持信息。