name: ui-audit
description: "自动化UI审计的AI技能。依据成熟的UX原则评估界面，涵盖视觉层次、可访问性、认知负荷、导航等方面。基于Tommy Geoco的《Making UX Decisions》。"
author: Tommy Geoco
homepage: https://audit.uxtools.co
logo: logo-light.png
logoDark: logo-dark.png

UI审计技能

依据成熟的UX原则评估界面。基于Tommy Geoco的《Making UX Decisions》。

使用场景

• 在时间压力下做出UI/UX设计决策
• 结合业务背景评估设计权衡
• 为特定问题选择合适的UI模式
• 审查设计的完整性与质量
• 为新界面构建设计思维框架

核心理念

速度 ≠ 鲁莽。 快速设计不等于鲁莽。鲁莽地快速设计才是鲁莽。区别在于意图性。

极速决策的三大支柱

1. 脚手架 —— 用于自动化重复决策的规则
2. 决策流程 —— 用于做出新决策的过程
3. 执行清单 —— 用于执行决策的检查清单

快速参考结构

基础框架

• references/00-core-framework.md —— 三大支柱、决策流程、宏观战略
• references/01-anchors.md —— 构建设计韧性的7种基础思维模式
• references/02-information-scaffold.md —— 心理学、经济学、可访问性、默认设置

检查清单（执行）

• references/10-checklist-new-interfaces.md —— 设计新界面的6步流程
• references/11-checklist-fidelity.md —— 组件状态、交互、可扩展性、反馈
• references/12-checklist-visual-style.md —— 间距、色彩、层级、排版、动效
• references/13-checklist-innovation.md —— 原创性的5个层级

模式（可复用解决方案）

• references/20-patterns-chunking.md —— 卡片、标签页、手风琴、分页、轮播图
• references/21-patterns-progressive-disclosure.md —— 工具提示、弹出框、抽屉、模态框
• references/22-patterns-cognitive-load.md —— 步骤条、向导、极简导航、简化表单
• references/23-patterns-visual-hierarchy.md —— 排版、色彩、留白、尺寸、邻近性
• references/24-patterns-social-proof.md —— 用户评价、用户生成内容、徽章、社交集成
• references/25-patterns-feedback.md —— 进度条、通知、验证、上下文帮助
• references/26-patterns-error-handling.md —— 表单验证、撤销/重做、对话框、自动保存
• references/27-patterns-accessibility.md —— 键盘导航、ARIA、替代文本、对比度、缩放
• references/28-patterns-personalization.md —— 仪表盘、自适应内容、偏好设置、本地化
• references/29-patterns-onboarding.md —— 引导流程、上下文提示、教程、检查清单
• references/30-patterns-information.md —— 面包屑、网站地图、标签、分面搜索
• references/31-patterns-navigation.md —— 优先级导航、侧滑菜单、粘性导航、底部导航

使用说明

用于设计决策

1. 阅读 00-core-framework.md 了解决策流程
2. 判断是重复决策（使用脚手架）还是新决策（使用流程）
3. 应用三步权衡法：机构知识 → 用户熟悉度 → 研究

用于新界面设计

1. 遵循 10-checklist-new-interfaces.md 中的6步检查清单
2. 参考相关模式文件以获取特定UI组件指导
3. 使用保真度和视觉风格检查清单来提升质量

用于模式选择

1. 识别核心问题（信息分块、渐进披露、认知负荷等）
2. 加载相关的模式参考文件
3. 评估其优势、用例、心理学原理和实施指南

决策流程摘要

面对UI决策时：

1. 权衡信息
   ├─ 机构知识怎么说？（现有模式、品牌、技术限制）
   ├─ 用户熟悉什么？（惯例、竞争对手模式）
   └─ 研究怎么说？（用户测试、数据分析、研究）

2. 缩小选项
   ├─ 排除与限制冲突的方案
   ├─ 优先考虑与宏观战略一致的方案
   └─ 根据“待完成工作”支持度进行选择

3. 执行
   └─ 应用相关检查清单和模式

宏观战略类别

公司通过以下一个或多个方面取胜：

始终将微观设计决策与公司的宏观战略对齐。

关键原则：好的设计决策是相对的

一个设计决策之所以“好”，是因为它：
- 支持产品的“待完成工作”
- 与公司宏观战略保持一致
- 尊重约束（时间、技术、团队）
- 在用户熟悉度和差异化需求之间取得平衡

不存在普遍正确的UI解决方案——只有适合特定情境的方案。

生成审计报告

当被要求审计一个设计时，生成一份全面的报告。始终包含以下部分：

必选部分（始终包含）

1. 视觉层次 —— 标题、行动号召、分组、阅读流、字体比例、色彩层次、留白
2. 视觉风格 —— 间距一致性、色彩使用、层级/深度、排版、动效/动画
3. 可访问性 —— 键盘导航、焦点状态、对比度、屏幕阅读器支持、触摸目标

情境部分（相关时包含）

4. 导航 —— 针对多页面应用：寻路、面包屑、菜单结构、信息架构
5. 可用性 —— 针对交互流程：可发现性、反馈、错误处理、认知负荷
6. 新手引导 —— 针对新用户体验：首次使用、教程、渐进披露
7. 社会认同 —— 针对着陆页/营销页面：用户评价、信任信号、社交集成
8. 表单 —— 针对数据录入：标签、验证、错误信息、字段类型

审计输出格式

{
  "title": "设计名称 —— 界面/流程",
  "project": "项目名称",
  "date": "YYYY-MM-DD",
  "figma_url": "可选",
  "screenshot_url": "可选 - 截图URL",

  "macro_bets": [
    { "category": "velocity|efficiency|accuracy|innovation", "description": "...", "alignment": "strong|moderate|weak" }
  ],

  "jtbd": [
    { "user": "用户类型", "situation": "情境（不含‘当’）", "motivation": "动机（不含‘我想要’）", "outcome": "结果（不含‘以便我能’）" }
  ],

  "visual_hierarchy": {
    "title": "视觉层次",
    "checks": [
      { "label": "检查项名称", "status": "pass|warn|fail|na", "notes": "详情" }
    ]
  },
  "visual_style": { ... },
  "accessibility": { ... },

  "priority_fixes": [
    { "rank": 1, "title": "修复标题", "description": "修复内容及原因", "framework_reference": "XX-filename.md → 章节名称" }
  ],

  "notes": "可选的整体观察"
}

各部分检查项（每部分6-10项）

视觉层次：标题区分度、主要操作清晰度、分组/邻近性、阅读流、字体比例、色彩层次、留白使用、视觉权重平衡

视觉风格：间距一致性、色彩调色板遵循度、层级/阴影、排版系统、边框/圆角一致性、图标风格、动效原则

可访问性：键盘可操作性、可见焦点、色彩对比度（4.5:1）、触摸目标（44px）、替代文本、语义化标记、减少动效支持

导航：当前位置清晰度、菜单行为可预测性、面包屑存在性、搜索可访问性、移动端导航模式

可用性：功能可发现性、操作反馈、错误预防、恢复选项、认知负荷管理、加载状态