SuperAPI AI 工具集

taste-design-review

设计与创作

查看项目

更新于 10-18 16:13

技能介绍

taste-design-review 是一个设计审计技能,其流程固定为“审计 → 排序 → 修复 → 验证”。它要求先截图,再审查,最后修复,且修复必须在完整审计之后进行,不能边审边改。

用途

该技能用于对现有界面(落地页、SaaS 应用、作品集等)进行结构化视觉与可用性审计。它不负责从零设计,而是诊断现有设计的问题,并按严重程度排序,帮助团队优先解决最关键的问题。

主要能力

技能包含五个审查维度:品味检查(视觉质量)、启发式检查(Nielsen 十大可用性原则)、无障碍检查、转化检查(仅在要求改进时使用),以及报告输出。

品味检查

识别“默认智能体生成”的痕迹(如紫色渐变、居中主视觉加三张卡片、emoji 图标、仅用 Inter 字体、圆角过大、浏览器边框截图等),每一项都是 P1 问题。同时检查层级、字体、颜色、对齐、深度等视觉要素。例如:每个视口是否只有一个主导元素;正文是否小于 10px;颜色是否超过约 3 种;强调色是否在每个视口使用超过 4 次;对比度是否满足 4.5:1(正文)/ 3:1(大文本)/ 3:1(UI 组件);间距是否遵循统一尺度;阴影是否是唯一的深度来源等。

启发式检查

应用 Nielsen 十大原则,检查系统状态可见性(2-3 秒内反馈)、语言是否匹配用户世界、用户控制与自由(退出路径、撤销)、一致性、错误预防、识别优于回忆、灵活性、美学与极简、错误信息质量、帮助与文档等。

无障碍检查

包括 Tab 键遍历检查焦点可见性、无焦点陷阱、逻辑顺序;每个输入有标签;每个按钮/链接有文本;图片替代文本有意义或为空;对比度抽查;处理 prefers-reduced-motion;暂停自动播放内容。

转化检查

仅在要求改进时执行:首屏一个主 CTA;价值主张在 8 秒内传达;摩擦清单(字段、步骤、点击)每项合理;信任信号出现在决策点附近。

使用方式

  1. 捕获:对每个视口(桌面 1440、平板 768、移动 390)截取全页截图。
  2. 首读(8 秒):判断页面是否清晰传达产品、受众和主要行动。
  3. 结构化检查:按上述维度逐项检查。
  4. 排序:将发现分为 P0(损坏/法律/阻塞)、P1(严重损害质量)、P2(打磨)、P3(偏好)。
  5. 修复:按排序进行原子化修改,每次修改后重新截图验证。
  6. 报告:固定格式,包含发现表格(截图引用、严重级别、一句话修复)和结论段落(指出一个最重要的改进点)。

适用场景

适用于设计评审会议前的自查、可用性测试后的整理、转化优化前的诊断、设计系统一致性检查等。尤其适合需要客观、可重复的审计流程的团队。

限制

该技能明确要求必须基于截图审查,不能仅凭代码审计。如果未截图,审计失败。发现必须带有严重级别和截图引用。不能将“默认智能体生成”模式视为风格偏好而忽略(它们是 P1)。不能在完整审计之前修复任何内容。结论必须指出一个最重要的改进点,否则视为未找到真正问题。P3 项在同一会话中不与 P1 一起修复。