用途:Design QA 是内部原型 QA 助手,用于在交付前把原型的设计源与渲染实现进行对比,作为产品级质量审查,而非泛泛的审美批评。它不适用于宽泛的 UX 批评、设计评审、产品审计或流程评审,这些应使用 audit。每次 Product Design 构建交付前都应使用本技能。
前提条件:一次通过的 QA 需要同时具备源视觉目标(Figma 节点、图片、截图、mockup 或源捕获)和渲染实现(本地 URL、已部署 URL、应用界面、组件或截图)。若任一产物无法打开、捕获或对比,需在 design-qa.md 中写明 final result: blocked 并指出阻塞原因,不得让构建技能以完成状态交付。
工作方式:先打开或捕获源设计与实现,再对比实际可见内容,不能凭记忆、代码或文件路径撰写评审。需将源图与实现截图放入同一对比输入,不能把分开的图片视图当作并排对比。对比前需匹配相同的视口、状态、主题、设备密度、路由、内容、认证状态和交互状态,并做裁剪、缩放、设备框对齐。使用全视图对比判断整体构图、层级、布局、密度和响应式结构;细节过小时使用聚焦区域对比。
审查范围:系统检查信息架构、布局、间距、字体排版、颜色、图像质量、图标、文案、可供性、交互状态、响应式、无障碍和打磨度。必须专门检查五个保真面:字体/排版、间距/布局节奏、颜色/视觉令牌、图像质量与资产保真、应用专属文案内容。若 logo、插画、装饰标记、产品图或非标准图标被替换为内联 SVG、手绘 SVG、HTML 元素、div/span 形状、CSS 绘制、渐变、emoji、文字字形或占位形状,则 QA 不通过。
迭代循环:首次对比只有在未发现可操作的 P0/P1/P2 差异且未做视觉修复时才可通过。发现 P0/P1/P2 问题时,需记录发现、保持 blocked、应用修复、在相同视口和状态重新捕获、再次对比。后续通过需说明早前发现、所做修复及修复后视觉证据。构建、依赖、lint、部署和预览排障不算设计 QA 迭代。
严重级别:P0 阻断核心使用、严重无障碍失败、布局损坏或任务无法完成;P1 用户可能注意到的重大设计不匹配或可用性回归;P2 中等视觉漂移、状态不一致、响应式问题或可修复的打磨缺口;P3 提升保真度但不阻断验收的细微改进。隐藏常驻应用控件的视口溢出,以及实质性改变首屏内容、主要区域比例、文本换行或界面密度的不匹配,按 P2 或更高处理。
输出:报告以发现开头,按严重度和用户影响排序,每条包含严重度、位置、差异、证据、影响和具体修复;实现上下文可用时给出精确的 CSS/组件/令牌建议;区分客观不匹配与主观打磨建议;结尾附简明实现清单。结构为 Findings、Open Questions、Implementation Checklist、Follow-up Polish。交付前使用时将最新报告保存为项目根目录 design-qa.md,其中需包含源视觉真值路径、实现截图路径、视口、状态、全视图对比证据、聚焦区域对比证据或无需聚焦的原因、发现、每次 P0/P1/P2 迭代的对比历史(早前发现、所做修复、修复后视觉证据)以及 final result。final result 必须恰为 passed 或 blocked。ChatGPT Work Mode 构建还需包含浏览器渲染的实现截图、视口、测试的主要交互、检查的控制台错误和最终结果;缺少浏览器渲染证据时 final result 为 blocked。最后返回 QA 报告的文件路径。
限制:本技能为内部助手,仅用于原型交付前的设计对比;不用于宽泛设计评审;无法获取源或实现产物时应标记 blocked,不得编造通过结论。