UI Audit Skill
Evaluate interfaces against proven UX principles. Based on Making UX Decisions by Tommy Geoco.
When to Use This Skill
- - Making UI/UX design decisions under time pressure
- Evaluating design trade-offs with business context
- Choosing appropriate UI patterns for specific problems
- Reviewing designs for completeness and quality
- Structuring design thinking for new interfaces
Core Philosophy
Speed ≠ Recklessness. Designing quickly is not automatically reckless. Recklessly designing quickly is reckless. The difference is intentionality.
The 3 Pillars of Warp-Speed Decisioning
- 1. Scaffolding — Rules you use to automate recurring decisions
- Decisioning — Process you use for making new decisions
- Crafting — Checklists you use for executing decisions
Quick Reference Structure
Foundational Frameworks
- -
references/00-core-framework.md — 3 pillars, decisioning workflow, macro bets - INLINECODE1 — 7 foundational mindsets for design resilience
- INLINECODE2 — Psychology, economics, accessibility, defaults
Checklists (Execution)
- -
references/10-checklist-new-interfaces.md — 6-step process for designing new interfaces - INLINECODE4 — Component states, interactions, scalability, feedback
- INLINECODE5 — Spacing, color, elevation, typography, motion
- INLINECODE6 — 5 levels of originality spectrum
Patterns (Reusable Solutions)
- -
references/20-patterns-chunking.md — Cards, tabs, accordions, pagination, carousels - INLINECODE8 — Tooltips, popovers, drawers, modals
- INLINECODE9 — Steppers, wizards, minimalist nav, simplified forms
- INLINECODE10 — Typography, color, whitespace, size, proximity
- INLINECODE11 — Testimonials, UGC, badges, social integration
- INLINECODE12 — Progress bars, notifications, validation, contextual help
- INLINECODE13 — Form validation, undo/redo, dialogs, autosave
- INLINECODE14 — Keyboard nav, ARIA, alt text, contrast, zoom
- INLINECODE15 — Dashboards, adaptive content, preferences, l10n
- INLINECODE16 — Tours, contextual tips, tutorials, checklists
- INLINECODE17 — Breadcrumbs, sitemaps, tagging, faceted search
- INLINECODE18 — Priority nav, off-canvas, sticky, bottom nav
Usage Instructions
For Design Decisions
- 1. Read
00-core-framework.md for the decisioning workflow - Identify if this is a recurring decision (use scaffold) or new decision (use process)
- Apply the 3-step weighing: institutional knowledge → user familiarity → research
For New Interfaces
- 1. Follow the 6-step checklist in INLINECODE20
- Reference relevant pattern files for specific UI components
- Use fidelity and visual style checklists to enhance quality
For Pattern Selection
- 1. Identify the core problem (chunking, disclosure, cognitive load, etc.)
- Load the relevant pattern reference
- Evaluate benefits, use cases, psychological principles, and implementation guidelines
Decision Workflow Summary
When facing a UI decision:
CODEBLOCK0
Macro Bet Categories
Companies win through one or more of:
| Bet | Description | Design Implication |
|---|
| Velocity | Features to market faster | Reuse patterns, find metaphors in other markets |
| Efficiency |
Manage waste better | Design systems, reduce WIP |
|
Accuracy | Be right more often | Stronger research, instrumentation |
|
Innovation | Discover untapped potential | Novel patterns, cross-domain inspiration |
Always align micro design bets with company macro bets.
Key Principle: Good Design Decisions Are Relative
A design decision is "good" when it:
- - Supports the product's jobs-to-be-done
- Aligns with company macro bets
- Respects constraints (time, tech, team)
- Balances user familiarity with differentiation needs
There is no universally correct UI solution—only contextually appropriate ones.
Generating Audit Reports
When asked to audit a design, generate a comprehensive report. Always include these sections:
Required Sections (always include)
- 1. Visual Hierarchy — Headings, CTAs, grouping, reading flow, type scale, color hierarchy, whitespace
- Visual Style — Spacing consistency, color usage, elevation/depth, typography, motion/animation
- Accessibility — Keyboard navigation, focus states, contrast ratios, screen reader support, touch targets
Contextual Sections (include when relevant)
- 4. Navigation — For multi-page apps: wayfinding, breadcrumbs, menu structure, information architecture
- Usability — For interactive flows: discoverability, feedback, error handling, cognitive load
- Onboarding — For new user experiences: first-run, tutorials, progressive disclosure
- Social Proof — For landing/marketing pages: testimonials, trust signals, social integration
- Forms — For data entry: labels, validation, error messages, field types
Audit Output Format
CODEBLOCK1
Checks Per Section (aim for 6-10 each)
Visual Hierarchy: heading distinction, primary action clarity, grouping/proximity, reading flow, type scale, color hierarchy, whitespace usage, visual weight balance
Visual Style: spacing consistency, color palette adherence, elevation/shadows, typography system, border/radius consistency, icon style, motion principles
Accessibility: keyboard operability, visible focus, color contrast (4.5:1), touch targets (44px), alt text, semantic markup, reduced motion support
Navigation: clear current location, predictable menu behavior, breadcrumb presence, search accessibility, mobile navigation pattern
Usability: feature discoverability, feedback on actions, error prevention, recovery options, cognitive load management, loading states
UI审计技能
基于经过验证的UX原则评估界面。参考Tommy Geoco的《做出UX决策》（Making UX Decisions）。
何时使用此技能
- - 在时间压力下做出UI/UX设计决策
- 结合业务背景评估设计权衡
- 为特定问题选择合适的UI模式
- 审查设计的完整性和质量
- 为新界面构建设计思维框架
核心理念
速度≠鲁莽。 快速设计并不自动等同于鲁莽。鲁莽地快速设计才是鲁莽。区别在于意图性。
极速决策的三大支柱
- 1. 脚手架 — 用于自动化重复决策的规则
- 决策 — 用于做出新决策的流程
- 执行 — 用于执行决策的检查清单
快速参考结构
基础框架
- - 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 — 用户评价、UGC、徽章、社交集成
- 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了解决策流程
- 判断是重复决策（使用脚手架）还是新决策（使用流程）
- 应用3步权衡：机构知识 → 用户熟悉度 → 研究
新界面设计
- 1. 遵循10-checklist-new-interfaces.md中的6步检查清单
- 参考相关模式文件获取特定UI组件
- 使用保真度和视觉风格检查清单提升质量
模式选择
- 1. 识别核心问题（信息分块、渐进披露、认知负荷等）
- 加载相关模式参考
- 评估优势、用例、心理学原理和实施指南
决策流程总结
面对UI决策时：
- 1. 权衡信息
├─ 机构知识怎么说？（现有模式、品牌、技术限制）
├─ 用户熟悉什么？（惯例、竞品模式）
└─ 研究怎么说？（用户测试、分析、研究）
- 2. 缩小选项
├─ 排除与限制冲突的选项
├─ 优先考虑与宏观赌注一致的选项
└─ 基于待完成工作（JTBD）支持度选择
- 3. 执行
└─ 应用相关检查清单 + 模式
宏观赌注类别
公司通过以下一项或多项获胜：
| 赌注 | 描述 | 设计影响 |
|---|
| 速度 | 更快地将功能推向市场 | 复用模式，在其他市场中寻找隐喻 |
| 效率 |
更好地管理浪费 | 设计系统，减少在制品 |
|
准确性 | 更频繁地做出正确决策 | 加强研究，数据采集 |
|
创新 | 发现未开发的潜力 | 新颖模式，跨领域灵感 |
始终将微观设计赌注与公司宏观赌注对齐。
关键原则：好的设计决策是相对的
一个设计决策在以下情况下是好的：
- - 支持产品的待完成工作
- 与公司宏观赌注一致
- 尊重限制条件（时间、技术、团队）
- 平衡用户熟悉度与差异化需求
没有普遍正确的UI解决方案——只有适合上下文的方案。
生成审计报告
当被要求审计设计时，生成一份全面的报告。始终包含以下部分：
必填部分（始终包含）
- 1. 视觉层级 — 标题、行动号召、分组、阅读流程、字号层级、色彩层级、留白
- 视觉风格 — 间距一致性、色彩使用、层级/深度、排版、动效/动画
- 可访问性 — 键盘导航、焦点状态、对比度、屏幕阅读器支持、触摸目标
上下文部分（相关时包含）
- 4. 导航 — 多页面应用：寻路、面包屑导航、菜单结构、信息架构
- 可用性 — 交互流程：可发现性、反馈、错误处理、认知负荷
- 引导 — 新用户体验：首次运行、教程、渐进披露
- 社会证明 — 落地页/营销页面：用户评价、信任信号、社交集成
- 表单 — 数据输入：标签、验证、错误消息、字段类型
审计输出格式
json
{
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）、替代文本、语义标记、减少动效支持
导航：当前位置清晰、菜单行为可预测、面包屑导航存在、搜索可访问性、移动导航模式
可用性：功能可发现性、操作反馈、错误预防、恢复选项、认知负荷管理、加载状态
