企业官网建设流程全解析

ui-audit：Tommy Geoco 出品，让 AI 替你做 UI/UX 审查

当“设计评审”从会议室里的漫长争论，变成了命令行里的一条指令——这就是 ui-audit 试图改变的事情。

如果你曾在深夜对着一个按钮的位置反复纠结，或是在设计评审会上因为“感觉不对”而陷入无休止的辩论，那么你一定会对 Tommy Geoco 的最新作品产生兴趣。这位《Making UX Decisions》的作者、UX Tools 的创始人，最近在 npm 上发布了一个名为ui-audit的 AI skill——它的核心承诺很简单：让 AI 代理（Agent）替你完成 UI/UX 审查，而不是替你画画。

这不是一个 Figma 插件，也不是一个 SaaS 工具。它是一个 AI skill——一段能够被 Claude、Cursor 等 AI 编码助手调用的“技能包”。你可以把它理解为给 AI 装上了一套 UX 专业知识库，让它在生成或审查代码的同时，自动评估界面的视觉效果、信息层级、交互模式和可访问性。

这篇文章将带你深入了解 ui-audit 的设计哲学、工作原理、核心能力以及背后的创作者故事。每个章节都预留了配图位置——你可以用截图来补充本文的视觉叙事。

一、作者 Tommy Geoco：从海军陆战队到 UX 决策框架的构建者

在深入了解 ui-audit 之前，有必要先认识它的创造者。Tommy Geoco 的履历本身就带着强烈的“实战派”气质：四年的美国海军陆战队服役经历，之后转身投入科技行业，拥有超过 11 年的产品设计经验。他曾在 20th Century Fox、Dropbox、Quantcast 等公司从事产品设计工作，涵盖 B2B、B2C 和企业级产品领域。

2015 年，他卖掉了自己的创业公司，随后在硅谷经历了各种角色的切换：从独立设计师到设计运营负责人，从 0 到 1 孵化产品，再到搭建和扩展设计团队。他目前也是 UX Tools 的创始人和所有者——这是一个服务数万设计师的实用工具和内容平台。

但让 Geoco 真正在 UX 领域建立起声誉的，是他的著作和课程《Making UX Decisions》。这门课程定位极其明确：为“务实的设计师”服务，强调“更多结果、更少理论”。课程包含 60 多个深度视频、75 个以上的 UI 模式和检查清单、25 个课程模块以及一份超过 500 页的电子书。2400 多名设计师通过这门课程学习如何在时间压力下做出高质量的 UX 决策。

而 ui-audit，正是将《Making UX Decisions》中的方法论“编码化”——把书中那些经过验证的框架、检查清单和模式库，打包成一个 AI 代理可以直接调用的结构化知识体系。

二、ui-audit 是什么？理解“AI 技能”这种新形态

在讨论功能之前，有必要澄清一个概念：ui-audit不是一个独立的应用。它是一款Agent Skill——一种专门为 AI 代理（如 Claude、OpenClaw 等）设计的技能包。

这个概念可能在 2024 年还比较陌生，但到了 2025-2026 年，Agent Skills 已经成为 AI 辅助开发领域的一种重要范式。简单来说，一个 Skill 就是一份结构化的 Markdown 文件，包含了一套领域知识、操作指令和参考资料。当 AI 代理（比如你正在使用的 Claude）识别到当前任务需要某项特定技能时，它会自动“装载”这个 Skill，按照其中定义的框架和流程来处理任务。

ui-audit 的技能包位于 GitHub 仓库tommygeoco/ui，可以通过 npm 一键安装：

npx skillsaddhttps://github.com/tommygeoco/ui

安装后，AI 代理就获得了一套完整的 UI/UX 审计能力——就像一个资深设计师坐在你旁边，但它的审查过程是完全自动化的。

这种架构的优势在于：它不与特定工具绑定。无论你是在 VS Code 中用 Cursor 写前端代码，还是在命令行中与 Claude Code 协作，只要 AI 代理支持 Agent Skills 标准，就能调用 ui-audit 的能力。你不需要离开开发环境，不需要切换到另一个 SaaS 平台，设计审查就自然地嵌入到编码流程中。

三、设计哲学：速度不等于鲁莽

ui-audit 的开篇第一句核心理念就非常直白：

“Speed ≠ Recklessness. Designing quickly is not automatically reckless. Recklessly designing quickly is reckless. The difference is intentionality.”（速度不等于鲁莽。快速设计并不等于鲁莽。鲁莽地快速设计才是鲁莽。区别在于是否有意图性。）

这段话精准概括了 Geoco 在《Making UX Decisions》中反复强调的核心主张：在 AI 编码工具以惊人速度生成界面的时代，“快”本身不是问题，问题在于快得没有章法。ui-audit 要解决的就是这个“意图性”问题——让 AI 在生成界面或审查界面时，有据可依。

在 AI 编码工具（Cursor、v0、Lovable、Bolt 等）大爆发的 2024-2025 年，这个理念显得尤为必要。Geoco 在 UX Tools 的博客中写道，行业的“下一个鸿沟”不在于 AI 能不能生成界面——它已经可以——而在于如何在高速输出的同时保持设计质量的一致性。ui-audit 就是他对这个鸿沟的回答。

四、三大支柱：Scaffolding、Decisioning、Crafting

ui-audit 的知识体系建立在三个核心支柱之上，这也是 Geoco 在《Making UX Decisions》中提出的“Warp-Speed Decisioning”框架的核心：

① Scaffolding（支架/规则自动化）
针对反复出现的决策类型，建立可以自动化的规则。比如按钮的颜色、间距、字体层级——这些不需要每次都重新思考，而是基于既定规则自动生成。Scaffolding 的目标是把设计师从重复性决策中解放出来。

② Decisioning（决策流程）
对于新的、没有先例的设计选择，提供结构化的决策流程。ui-audit 的决策流程遵循一个三层权衡模型：制度性知识（团队已有的规范）→ 用户熟悉度（用户已有的心理模型）→ 研究数据（A/B 测试或用户研究结果）。这个顺序的设定本身就有深意——它告诉 AI（也告诉设计师）：“先看看团队之前怎么做的，再看看用户已经习惯了什么，最后才去看研究数据。”这避免了“过度研究导致的决策瘫痪”。

③ Crafting（执行检查清单）
一旦做出决策，就需要用详细的检查清单来确保执行质量。ui-audit 包含多份分领域的检查清单，涵盖新界面设计、保真度、视觉风格、创新层次等维度。

这三个支柱构成了一条从“自动化重复决策”到“结构化新决策”再到“精细化执行”的完整链路。它不是“一种”设计方法论，而是“一个”可操作的工作流——这正是它适合被 AI 代理执行的原因。

五、知识结构：一个为 AI 设计的 UX 知识库

ui-audit 的知识库按照三个层级组织，每个层级的文件都有明确的职责分工：

第一层：基础框架（Foundational Frameworks）

• 00-core-framework.md：核心决策工作流和三大支柱
• 01-anchors.md：7 个设计弹性的基础心态
• 02-information-scaffold.md：心理学、经济学、可访问性和默认值规则

第二层：执行检查清单（Checklists）

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

第三层：UI 模式库（Patterns）
这是 ui-audit 最有实战价值的部分——12 个覆盖常见 UI 挑战的模式文件：

这个分类体系的意义在于：当 AI 代理遇到一个具体的 UI 问题时，它不需要“从零开始思考”，而是可以直接引用对应的模式文件。比如当它审查一个表单时，会同时参考26-patterns-error-handling.md（错误处理）和25-patterns-feedback.md（反馈机制）；当它审查导航时，会调用31-patterns-navigation.md和22-patterns-cognitive-load.md。

这种结构化引用确保了审查的全面性和一致性——不会因为 AI “心情不同”而产生不同的审查结果。

六、ui-audit 的应用场景：它适合解决什么问题？

根据 Agent Skills 平台和 Toolify 的介绍，ui-audit 适用于以下典型场景：

1. 时间压力下的快速设计决策
当你需要在短时间内为一个新功能设计界面时，ui-audit 可以提供结构化的决策支持——从信息架构到具体的 UI 模式选择，每一步都有据可依。

2. AI 生成代码的自动化审查
这是目前最有价值的应用方向。当 Cursor 或 Claude 生成前端代码后，ui-audit 会自动检查生成的界面是否符合 UX 最佳实践——包括视觉层级、可访问性、认知负荷、导航模式等。它为“vibe coding”提供了一层质量保障。

3. 设计权衡的客观评估
当团队在多个设计方案之间争论时，ui-audit 提供了一个可供参考的客观框架。它不会说“这个方案更好看”，而是根据既定的 UX 原则和模式库，指出每个方案在视觉层级、认知负荷、可访问性等方面的表现。

4. 新界面的设计思维结构化
对于从零开始设计的新界面，ui-audit 的 6 步检查清单帮助设计师系统性地考虑从信息架构到动效细节的每个环节。

5. 跨团队的设计一致性维护
在多个团队、多个产品线并行开发的场景中，ui-audit 可以作为一个统一的质量基准，确保不同团队产出的界面都符合同一套 UX 标准。

七、ui-audit 的运作原理：AI 如何执行一次审查

一次典型的 ui-audit 审查遵循以下流程：

步骤 1：触发与装载
当 AI 代理识别到任务涉及 UI/UX 审查时（比如用户说“帮我审查这个页面的设计”或“检查这段代码生成的界面”），它会自动装载 ui-audit 技能包。

步骤 2：信息权衡
AI 代理按照三层决策模型收集信息——先检查团队已有的设计规范（制度性知识），再考虑目标用户已有的使用习惯（用户熟悉度），最后参考相关的研究数据和最佳实践。

步骤 3：选项筛选
通过排除与当前技术栈或时间限制冲突的选项，缩小可能的解决方案范围。例如，如果一个复杂的动画效果会显著增加开发时间，而项目又面临 deadline 压力，ui-audit 会建议更简单的替代方案。

步骤 4：引用对应知识库
对于界面中的每个具体元素（按钮、表单、导航、模态框等），AI 代理从模式库中提取对应的最佳实践，逐一进行对照检查。

步骤 5：应用检查清单
执行详细的质量检查清单，覆盖从排版、色彩、间距到状态管理、错误处理、动效的所有维度。

步骤 6：生成审计报告
最终生成一份结构化的审计报告，通常包含：

• 通过项：符合 UX 标准的部分
• 警告项：存在潜在问题但尚不紧急的部分
• 失败项：明确违反 UX 原则的部分
• 优先级排序的修复建议：从最紧迫到可延后的行动清单，每个建议附有对应的参考文件链接

八、如何开始使用 ui-audit

安装方式
ui-audit 的安装非常直接。如果你的 AI 代理支持 Agent Skills 标准（如 OpenClaw 或 Claude），使用以下命令：

npx skillsaddhttps://github.com/tommygeoco/ui

对于 OpenClaw 用户，也可以使用 ClawHub CLI：

npx clawhub@latestinstallux-audit

使用方式
安装后，ui-audit 会在以下场景自动激活：

• 当你要求 AI 审查一个界面的设计质量
• 当 AI 生成前端代码后，自动触发审查
• 当你在两个设计方案之间需要做出权衡决策
• 当你需要为某个具体 UI 问题选择最佳模式

与 uiux-audit 的区别
值得注意的是，Geoco 还发布了一个配套的 npm 包uiux-audit，这是一个基于 Playwright 的命令行工具，可以对真实网页进行自动化审查——包括程序化检查（可访问性、布局）和基于视觉模型的 AI 审查。ui-audit（Agent Skill）和 uiux-audit（CLI 工具）可以配合使用：前者为 AI 代理提供知识和决策框架，后者对真实渲染的页面进行实际检测。

九、ui-audit 的局限：它不是什么

为了客观评价 ui-audit，也需要明确它的边界：

1. 它不替代用户研究
ui-audit 基于经过验证的 UX 原则进行审查，但它不了解你的具体用户。它可以说“这个表单的认知负荷较高，考虑添加步骤条”，但它不能说“你的用户在这个特定场景下会如何反应”。深入的用户洞察仍然需要真实的研究数据。

2. 它不替代设计师的判断
ui-audit 提供的是一个结构化的参考框架，而不是绝对的“正确答案”。某些设计决策需要在 UX 原则和商业需求之间取得平衡——这种权衡仍然需要设计师的经验和判断力。

3. 它的效果依赖 AI 代理的能力
作为一个 Agent Skill，ui-audit 的审查质量受限于其运行的 AI 模型的能力。不同的模型在理解和执行 Skill 中的指令时，可能会有差异。

4. 它不是一个可视化工具
ui-audit 的输出是结构化的文本报告，而不是带标注的截图或可视化的热力图。它告诉你问题在哪里以及如何修复，但它不会直接在截图上画红圈。

十、展望：AI 技能与设计工具的未来形态

ui-audit 代表了一种正在兴起的趋势：设计工具从 GUI（图形界面）向 Skill（技能包）的演进。

在 2024 年之前，设计工具的主流形态是独立的应用程序——Figma、Sketch、Adobe XD。AI 的加入带来了 Figma 插件和各种 AI 设计工具，但它们仍然是“在特定软件中运行”的工具。

Agent Skills 改变了这个范式。像 ui-audit 这样的技能包不绑定于任何特定软件——它们可以在任何支持该标准的 AI 代理中运行，无缝嵌入到开发者已经在使用的工作流中。一个开发者在 Cursor 中写前端代码的同时，ui-audit 就在后台自动审查生成的界面；一个产品经理在 Claude 中讨论新功能时，ui-audit 就提供 UX 决策的结构化参考。

Geoco 在 UX Tools 的博客中将这个趋势描述为行业“下一个鸿沟”。他观察到，AI 编码工具已经能够以惊人的速度生成功能完整的界面，但质量的一致性仍然是一个巨大的挑战。他认为答案不在于“更慢地使用 AI”，而在于“更智能地指导 AI”——这正是 ui-audit 试图填补的空白。

如果说《Making UX Decisions》是将 Tommy Geoco 的设计决策方法论写成了书和课程，那么 ui-audit 就是将这套方法论直接嵌入到了 AI 的设计流程中。它本质上是一种“知识传递”的新范式：过去设计师要阅读一本书、参加一门课程、然后在实践中逐渐内化这些知识；现在，这些知识变成了 AI 可以直接执行的工作流。

这可能就是 AI 时代“设计教育”和“设计质量保障”的新形态——不是教人记住规则，而是让 AI 在需要的时候自动应用规则。人需要做的，是判断和权衡那些无法被结构化的部分。

ui-audit 目前已在 npm 和 Agent Skills 平台发布，版本 1.0.2。详情可访问：https://agentskills.so/skills/tommygeoco-ui-audit-ui-audit 或 GitHub 仓库 https://github.com/tommygeoco/ui。