ds-design-audit

根据屏幕上显示的内容评估 UI，修复最严重的问题，并展示修复效果。

步骤

1. 确定目标文件或 URL 并渲染。如果无法渲染，请报告并停止。不要只根据源代码进行审查。
2. 在宽度约为 1440px 和 390px 时，截取首屏和完整页面的截图。在可能的情况下，也截取悬停、焦点、空状态、加载和错误状态。
3. 阅读目标代码：设计令牌、字体、颜色、焦点样式、媒体查询和文案。
4. 为各个方面打 1 到 5 分。每项评分都要用一行证据说明：可见内容或代码行。
   • 层级：主信息和操作在 3 秒内清晰可见，并且只有一个视觉焦点。
   • 排版：字体搭配经过有意设计，字号层级一致，行长和行距合适。
   • 颜色：有一种主色和一种强调色，颜色使用设计令牌而非零散的十六进制值，并且没有装饰性渐变。
   • 间距：间距遵循一套尺度，节奏一致，移动端对齐正确。
   • 状态：悬停、焦点、空状态、加载、错误和长内容状态均已实现。
   • 无障碍：对比度不低于 4.5:1，焦点环清晰可见，表单字段有标签，触控目标为 44px，并且遵循减少动态效果的设置。
   • 文案：文案针对具体产品，没有陈词滥调或占位数据。
5. 记录发现的每一项禁用的默认设计：紫蓝渐变、用于展示的默认字体、用表情符号充当图标、居中 Hero 搭配三张相同卡片、到处使用玻璃拟态、灰底灰字，以及通用文案。
6. 按对用户的影响排列修复优先级。将无障碍问题和主操作不清晰的问题放在最前，将装饰问题放在最后。每项修复都要说明文件、改动内容和提升的评分。
7. 应用排名前 3 到 5 项修复。应在设计令牌或共享组件中修复根本原因，而不是逐个修改实例。保留产品的标识、内容和行为。
8. 在与步骤 2 相同的宽度和状态下重新截图。再次为各项打分，并并列展示修复前后的分数。
9. 如果某项评分仍为 2 分或更低，或者仍存在禁用的默认设计，则再重复步骤 6 到 8 一次。最多进行两轮。

停止条件

• 完成两轮，或所有方面的评分均达到 3 分或更高且不再存在禁用的默认设计。
• 报告应展示修复前后的评分、评分依据、已应用的修复，以及未应用的修复和原因。

规则

• 没有证据就不要打分。如果某个方面无法查看，请标记为“未检查”并说明原因。
• 未经询问，不要更改事实性文案、价格、声明或功能行为。
• 如果简报要求使用此技能会标记为问题的风格，则这不算缺陷。
• 如果 UI 需要全面重建，请建议使用 /ds-design。不要在此技能中重建 UI。