用途
ds-design-audit 用于审查一个已经存在的 UI,依据屏幕上实际呈现的内容评分,然后修复影响最大的问题,并证明修复有效。它适合页面或应用界面看起来泛化、杂乱或需要系统性设计检查的场景。
主要能力
该技能的工作流程包括:识别目标文件或 URL 并渲染;如果无法渲染则报告并停止,不单凭源码做审查。它会截取首屏与整页在约 1440px 和 390px 宽度下的截图,并尽量捕获悬停、焦点、空、加载和错误状态。随后读取目标代码中的设计令牌、字体、颜色、焦点样式、媒体查询和文案。
评分维度共七项,每项 1 至 5 分,且必须给出一行证据(可见内容或代码行):层级(3 秒内能看清主要信息与操作,有单一焦点)、字体(有意搭配、尺度一致、行长与行距正确)、颜色(一个主色与一个强调色、使用令牌而非散落十六进制值、无装饰性渐变)、间距(遵循尺度、节奏一致、移动端对齐正确)、状态(悬停、焦点、空、加载、错误和长内容状态齐全)、可访问性(对比度 4.5:1 或更高、焦点环可见、字段有标签、触控目标 44px、尊重减少动态效果)、文案(针对产品具体,无套话与占位数据)。
它还会记录所见到的禁止默认项,例如紫蓝渐变、展示字体使用默认字体、用 emoji 作图标、居中英雄区配三张相同卡片、到处玻璃拟态、灰底灰字和泛化文案。
使用方式
技能按用户影响对修复项排序:损坏的可访问性与不清晰的主操作优先,装饰性修复最后。每个修复给出文件、改动内容和可提升的分数。然后应用前 3 至 5 项修复,尽量在设计令牌或共享组件中修复成因而非逐个实例修改,并保持产品的身份、内容和行为。之后在相同宽度与状态下重新截图,再次评分并展示前后对照。若仍有区域得分不超过 2 或禁止默认项仍存在,重复一次修复与复评,最多两轮。
输出报告包含修复前后分数、证据、已应用的修复和未应用的修复及原因。
适用场景
适合需要对现有页面或应用界面进行可量化设计审查并落地关键修复的团队或个人,尤其是希望获得证据支撑评分而非主观评价时。
限制
不得在没有证据的情况下给分;看不到的区域标记为“未检查”并说明原因。未经询问不得修改事实性文案、价格、声明或功能行为。若需求本身要求该技能会标记的风格,则不算缺陷。若 UI 需要整体重建,技能会建议使用 /ds-design 而非在本技能中重建。审查不依据源码单独进行,必须先渲染目标。