SuperAPI AI 工具集

flutter-visual-qa

设计与创作

查看项目

更新于 10-22 16:15

技能介绍

Flutter Visual QA 是一个面向 Flutter 界面的视觉质量检查技能,核心主张是:渲染输出就是证据,仅凭源码检查无法确定视觉质量。

用途 它用于对已渲染的 Flutter 界面做系统性视觉验证与批评,适合在界面开发或改版后检查视觉质量,也适合对稳定组件建立可回归的 golden 测试基线。

主要能力

  • 建立测试矩阵:选择最小但有代表性的组合,覆盖紧凑与扩展约束、明暗主题(在支持时)、主要与加载、空、错误、破坏性等适用状态、默认与放大文字,以及本地化产品的 LTR 与 RTL。需记录精确的视口、设备像素比、主题、语言和夹具状态。
  • 结构化检查:先审查层级与浏览路径,再检查布局、字体、间距节奏、颜色角色、控件、内容真实感、边缘行为和像素级缺陷;将相关状态并排比较,并区分实现缺陷与主观偏好。
  • 缺陷优先级:优先处理阻碍任务的裁切、重叠、不可见或无法触达的控件;其次是层级、对比度、状态传达或自适应组合问题;再次是一致性与打磨缺陷;最后是可选的美学优化。
  • golden 测试:对稳定组件和确定性夹具使用 golden 测试,控制字体、动画、时间、网络内容和像素比;不建议在未检查差异的情况下批量批准 golden 更新。
  • 闭环验证:对实质性发现要求至少一轮改进,并重新截取受影响状态;报告需包含已检查矩阵、所做修复、未验证组合和产物路径。

使用方式 该技能以操作指引形式组织:先建立测试矩阵并记录环境与夹具信息,再按上述顺序检查渲染结果,必要时补充 golden 测试,最后对发现的问题修复并复验,输出检查报告。资料提到可阅读 references/visual-qa.md;对于连接型或多领域产品,还需阅读 references/connected-product-workflows.md,并把部分来源失败纳入矩阵。

适用场景 适用于 Flutter 应用的界面视觉验收、状态矩阵对比、断点比较、截图与 golden 回归,以及需要结构化视觉批评的设计工程流程。

限制 资料未提供具体安装命令、依赖要求或自动化执行方式;该技能依赖人工或流程化的截图与检查,golden 测试需要可控的确定性环境。定价、平台支持范围等信息暂未提供。