AI时代的产品如何做？IBM都在用的3大设计系统终于公开了！

摘要：UI/UX 设计师的本职工作之一，是为数字产品和服务匹配上合理的界面和交互。那么随着 AI 在各个领域产品的深入，让我不由得想问一个问题，那么 AI 时代的 UI 设计要怎么做？有没有可靠的设计系统？是否有设计师或者设计团队系统性地思考过这个问题？今天来自 A

编者按：UI/UX 设计师的本职工作之一，是为数字产品和服务匹配上合理的界面和交互。那么随着 AI 在各个领域产品的深入，让我不由得想问一个问题，那么 AI 时代的 UI 设计要怎么做？有没有可靠的设计系统？是否有设计师或者设计团队系统性地思考过这个问题？今天来自 Allie Paschal 的这篇文章，就是你要的答案。有，而且有好几个，但是，效果如何？看下去，你就知道。

随着 AI 在网站与 APP 体验中的整合程度日益加深，明确区分 AI 与非 AI 功能区域将会变得至关重要。

此前多数产品通过聊天机器人（Chat-bot）的形式引入 AI，用户需主动发起交互。但是现在情况发生了很大的变化，当前的产品趋势已将 AI 整合至操作系统内部，深入到仪表板、任务流与搜索功能当中，用户无需主动触发，即可接触 AI 功能。

由于用户不再掌控 AI 使用和触发的时机，身为设计者，必须明确告知用户何时接触到 AI 生成的内容或功能，以便评估有效性与质量。欧盟《人工智能法案》（2026年生效）更是强制要求用户知晓与 AI 系统的交互状态。这个时候，设计系统的价值就开始显现了——通过专门视觉处理方案持续区分 AI 与非 AI 的内容。

Google Material设计系统展示按钮与分段式按钮等组件（图片来源：Material设计系统文档）

虽然目前能够玩转 AI 的绝大多数是大型企业，但是 AI 注定要广泛、深入地进入各种数字产品的，对于设计师和企业而言，如何有效地将 AI 的功能、状态、体验纳入到日常产品设计当中，几乎是必然要解决的问题。

不幸的是，当前仅有少数开源设计系统，明确包含 AI 组件与模式。GitLab 的 Pajamas、IBM的 Carbon 与 Twilio 的 Paste 是目前公开文档中确认整合 AI 相关规范和呈现的三大设计系统。需要说明的是，亚马逊的 Cloudscape 与 Salesforce 的 Lightning 仅包含 AI 聊天机器人相关文档，故未纳入到这次的分析和梳理当中。

接下来，我对比分析了上面提及的 3 大设计系统的 AI 组件与模式优化潜力：

Pajamas 这套系统虽然没有提供具体的 AI 组件，但它的文档深度探讨了 AI-人类的交互伦理。首先建议通过风险分级（高风险/低风险任务）评估 AI 自动化是否真正惠及用户；其次提倡 AI 在使用上应该透明化的原则，通过「GitLab Duo」标识，明确标注 AI 的功能边界与限制。

GitLab Duo 界面标注示例（展示用户与 AI 的交互节点）

针对AI生成内容，Pajamas建议采用「 by AI」格式标注（如「Summarized by AI」，「由 AI 总结」），并附加提醒告知用户去验证提示内容。GitLab 正在开发 AI UX 模式框架，包含四大维度：模式（Mode）、方法（Approach）、交互性（Interactivity）、任务（Task）。该框架旨在构建用户对AI系统的理解与信任。

模式：AI 与人类进行交互的重点、支持方式和综述方法：AI 能够改进什么（自动化或增强任务）交互性：AI 与人类互动的方式（主动或者被动）任务：AI 系统能帮助人类具体做什么（分类、生成或者预测）

他们很早就对 AI 的运作模式进行了探索，其中包括一些非常明确的低保真模型，如何展示 AI，如何将 AI 的呈现和图表等 UI 组件结合起来使用，方便 AI 真正落地应用的时候可供遵循。

集成AI标记的低保真线形图（来源：GitLab AI UX愿景）

AI辅助表单填写示例（来源：GitLab AI UX愿景）

总结

当前 Pajamas 文档尚处概念阶段，因为目前 AI 和已有 UI 的结合程度还没那么高，但它通用的框架具备跨行业的适用性。所以，可以期待它即将发布的 AI 模式库，它们将会成为开源设计系统重要的资源。

Carbon的「Carbon for AI」文档体系最为完善，涵盖组件、界面模式与设计指南三大部分。其通过蓝色辉光与渐变特效标注 12 个AI组件变体，覆盖了模态弹出框（Modal）、数据表（Data Table）与文本输入（Text Input）等常见的重要 UI 组件。

Carbon的12个AI组件列表（含复选框与文本输入变体）

实际应用中，AI 组件因默认状态即呈现蓝色渐变与边框，导致它在状态指示功能上有所欠缺，AI 的激活状态辨识其实是有点困难的，这个可能是 Carbon 目前的设计欠缺。

用户的输入内容覆盖 AI 输入的信息之后，组件将切换至标准版本，并显示「Revert to AI input」操作选项，而在视觉上和 AI 生成的也非常类似。

AI标签弹出框的视觉效果

除了上面的 AI 和用户输入内容的切换之外，IBM 还提供了一个明确的 AI 标签，用来在特定场景下详细解释 AI 的功能，这个被称为Carbon的「AI可解释性」，它会通过弹出框（Popover）来呈现。

总结

尽管Carbon的AI文档体系领先，但其组件视觉方案存在可用性与无障碍（Accessibility）隐患，AI 版变体与正常的输入聚焦状态（Focus State）视觉相似度太高，可能影响低视力用户操作。

Carbon文本输入AI 输入状态与手工输入聚焦状态对比

Paste 在「体验」板块下设有「 AI 」专项文档。Paste 包含在 UX 中应用 AI 的通用文档，同时提供若干可用的 UI 组件。在设计 AI 功能时，Paste 建议用户将AI输出结果与现有体验进行对比，并妥善处理潜在错误与风险。为降低这些风险，Paste主张赋予用户审查与撤销生成结果的权限，以及控制数据源的能力，并且提供向AI系统提供反馈的渠道。

Paste在开发新AI功能时提出核心设计思想是：「如果实现相同功能无需AI，你会如何设计这项功能？」用户使用产品的核心诉求并非与 AI 交互，而是以最高效率完成任务与目标。Paste 提供的 AI UI 套件包含五个组件：AI 图标、徽章、按钮、进度条与界面框架，同时涵盖 AI 聊天记录等专属组件。

Paste文档最具价值的部分在于它们提供的实际案例，包含标识系统（Signposting）、生成式功能（Generative Features）与聊天模块。针对标识系统，Paste建议采用带 AI 图标的装饰性图标来标注 AI 功能（例如 AI 推荐或预测功能）。虽然这类标识不具备交互性，但其按钮式外观可能引发可点击误解。