SuperAPI AI 工具集

pr-screenshot-comparison

通用与其它

查看项目

更新于 10-16 03:40

技能介绍

用途:为 GitHub PR 中的 UI 变更制作清晰、可评审的前后对比截图,让评审者直观评估视觉差异。

主要能力:定义证据范围(base/head 提交、产品路由、数据、CSS 像素视口、缩放、主题、交互状态);捕获并校验稳定状态的无损全视口 PNG;用 scripts/compose.py 生成标准纵向堆叠对比图与预览图;提供标注规范(标签、说明、编号标注、字体与对比度);给出 gh 附件上传与 PR 文案建议。

使用方式:先确定证明目标与所需状态(如 Before、After at rest、After activated),在真实产品路由上按指定提交捕获截图,记录实际像素尺寸并换算像素与 CSS 比例;用清单 JSON 描述视口、裁剪、面板与提交,运行 python3 <skill-directory>/scripts/compose.py /tmp/comparison.json /tmp/comparison.png;检查预览后,用 gh pr edit --attach 等方式上传并复核渲染效果。

适用场景:需要视觉证据的 UI 变更 PR,尤其是控件、菜单、布局等前后差异的评审。

限制:截图必须来自真实产品路由与指定提交,禁止用组件 harness、Storybook、静态重建或模拟数据冒充产品证据;认证或数据受阻时应停止并报告,而非伪造。内部 PR 可用真实数据但须排除凭据等敏感信息,公开 PR 需脱敏。合成器要求 Python 3 与 Pillow,拒绝尺寸不一致、缩放异常、越界裁剪、过长说明及超过 680 CSS px 的裁剪宽度;它无法验证提交来源、内容就绪、隐私或裁剪正确性。gh 附件需 2.99.0 以上且不支持 GitHub Enterprise Server。图片不得提交进仓库或 PR 分支。