微软前端设计审查 | UI 质量管控体系 · 12 项设计维度

官网参考截图

微软前端设计审查（Microsoft Frontend Design Review）是微软面向 AI 辅助界面开发推出的 UI 质量管控体系：用 12 项设计维度系统检查 Agent 生成的页面，揪出字体混乱、间距失调、响应式缺失、无障碍不达标，以及渐变滥用、卡片无意义堆叠等典型「AI 味」问题。适合在 SaaS、作品集、面向用户的产品上线前做最后一道 UI 关。

12 项设计维度（概览）

类别	检查重点	常见问题
字体	字号阶梯、行高、字重层级	标题与正文同号、中英文混排失衡
间距	8pt 网格、内外边距一致性	元素贴边、区块呼吸感缺失
色彩	对比度、语义色、品牌一致性	渐变堆砌、无意义高饱和背景
布局	栅格、对齐、信息层级	卡片堆叠无叙事、主次不清
响应式	断点、触控目标、折叠行为	移动端按钮过小、横向溢出
可访问性	WCAG、焦点、ARIA、键盘导航	仅鼠标可用、对比度不足
组件一致性	与设计系统 / Fluent 对齐	同页多种按钮风格并存
动效	时长、缓动、减少动效偏好	过度动画拖慢感知性能
图标与插图	风格统一、语义清晰	混用多套 icon 库
表单	标签、错误态、必填提示	placeholder 冒充 label
空态与加载	skeleton、错误页、无数据	白屏或直接崩溃文案
反模式	模板感、generic AI 审美	紫粉渐变 + 圆角卡片三板斧

具体条目与权重以微软官方规范为准；实践中可作为 Agent Skill 或 PR 审查 checklist 使用。

专项能力

• 可访问性检测：对照 WCAG 思路检查对比度、焦点顺序、屏幕阅读器友好性
• 设计系统一致性：组件变体、token、间距是否与既定体系一致
• 反低级设计：主动标记渐变滥用、无意义阴影、卡片墙等 Agent 常见输出

适用场景

• SaaS 管理后台、营销落地页、仪表盘
• 作品集与个人品牌站：需要专业观感而非 demo 感
• GStack 设计师角色之后：开发完成、上线前的 UI 验收
• 与 UI Skills 目录中的 baseline-ui、fixing-accessibility 等 Skill 互补

不太适合

• 纯后端 / API / CLI 项目：无用户界面时整套维度无用武之地
• 快速内部工具：只要功能、不追求品牌级 UI 时可做抽样而非全量 12 维
• 已有成熟设计系统且人工设计稿已冻结：审查价值在于 Agent 生成物与设计稿的偏差

与其他工具的关系

微软前端设计审查是 UI 质量层 的增强，不替代 Figma 或设计系统本身，也不替代编码 Agent。常与 GStack 的设计师角色、Karpathy Guidelines 的精准改动、Superpowers 的交付前 verification-before-completion 串联：代码逻辑过关后，再用 12 维扫一遍界面。

下一步

• UI 项目在 merge 前增加「设计审查」步骤，输出按维度分组的修复清单
• 可与 UI Skills 站点中的无障碍、动效类 Skill 一起安装
• 完整组合路径见 AI 开发五大核心技能工具组合打法（待发布）