SuperAPI AI 工具集

design-review-workflow

测试与质量

查看项目

更新于 10-18 18:01

技能介绍

用途

该技能用于在每次发布接近尾声时执行一次端到端的设计审查,而不是在每个任务中逐屏评审。审查在构建门禁全部通过、npm run verify 为绿色的提交上运行,目标是一次性覆盖整个应用,捕捉只有靠眼睛、耳朵和手才能发现的问题。

主要能力

审查计划(plan)由应用自身事实决定:覆盖屏幕契约中的每个屏幕和状态,覆盖用户界面样式展示的每种主题,包含一个 ltr 和一个 rtl 语言环境,在每台最小手机上使用默认字号与最大字号,每个平台各有一台最小手机和一块大屏(大屏为横屏)。采集时每个组合对应一张 PNG,文件名包含屏幕、状态、主题、语言、字号和设备;记录中保存其哈希。动效按平台分别在全动效和减弱动效下录制视频。发现按 BLOCKER、FIX、NOTE 分级,无障碍底线问题一律为 BLOCKER。修复只进行一轮,每项修复必须在新截图上验证。真机检查在真实低价手机上按步骤记录结果。最后写入带日期的签署记录,签署后若用户可见文件发生变化,发布门禁失败。

使用方式

技能以命令行脚本配合配置文件工作。先复制设计审查计划模板及其 schema 到 contracts/ 目录,填写设备、各状态的打开链接和硬件信息,运行 check-review-plan.mjs 直到显示 PASS。用 new-review.mjs 创建审查记录和截图文件夹,把模板中的 review-cells.ts 和 device-settings.ts 及其测试复制到应用中,按示例构建采集运行器。采集完成后运行 check-review.mjs --in-progress 检查。阅读每张截图和每段视频并按评分标准分级,记录真机检查结果,执行修复轮并重新采集相关单元格。最后写签署,运行 check-review.mjs 直到 PASS,再用 check-signoff.mjs 作为发布门禁,并在 CI 中可配合 --changed-from 检查自签收以来的改动。

适用场景

适用于 React Native 应用发布前的最终设计验收,尤其关注屏幕覆盖、暗色与亮色主题、从右到左布局、大字号裁剪、动效与减弱动效、无障碍底线,以及真实廉价设备上的表现。技能还列出相关技能,如屏幕契约、无障碍代码化、Maestro 端到端流程、模拟器与模拟器构建、RTL 与国际化等,用于前置条件和审查维度。

限制

该技能要求已有屏幕契约、调试链接、动效时刻清单和语言目录等文件;这些文件未创建时,计划检查会输出对应 SKIP 行。审查只在发布构建上运行一次,不按任务评审,不评审调试构建或共享模拟器。不允许缩减采集矩阵、降低字号或软化记录来换取通过。动效必须通过视频判断,静态截图无法证明跳过、点击受阻或减弱替代。真机检查需由人完成,且应使用真实低价手机而非设备农场或旗舰机。价格、平台支持和具体效果等资料未提供,暂未提供。