SuperAPI AI 工具集

ai-suggestions

前端与建站

查看项目

更新于 10-16 05:25

技能介绍

AI Suggestions 是一个 AI 驱动的自动补全与建议 UX 模式,属于 thedaviddias/ux-patterns-for-developers 项目。它的核心目标是在保持用户控制权的同时,为团队提供一种可靠方式来呈现 AI 生成的下一步操作、补全内容或推荐结果。

用途 该模式最适用于需要内联提示补全(inline prompt completion)的场景。相比相邻模式,它应当在不隐藏用户继续操作所需的状态、规则或恢复路径的前提下减少摩擦。

适用场景

  • 内联提示补全
  • 推荐下一步操作
  • 编辑器与表单中的 AI 辅助

不适用场景

  • 当标准非 AI 工作流更清晰、更可靠时,应避免添加 AI 专属 UI。
  • 除非用户确实能从中受益,否则不要暴露高级控制项。
  • 不要仅靠精致的视觉来掩盖模型的不确定性。

实现流程

  1. 在复制示例前,先确认该模式与问题和约束相匹配。
  2. 从 references/pattern.md 中的结构与示例入手,然后选择最小可行的变体。
  3. 在叠加视觉打磨之前,先应用无障碍、性能和交互护栏。
  4. 使用测试指导,在键盘、屏幕阅读器、响应式和失败场景下验证行为。

无障碍护栏 键盘交互:

  • 验证 AI 建议可以仅用键盘完成操作。
  • 当模式打开、更新或显示额外 UI 时,保持焦点顺序合乎逻辑。
  • 保持可见的焦点状态,且在高倍缩放下仍可读。

屏幕阅读器支持:

  • 优先使用语义元素,仅在语义不足时添加 ARIA。
  • 在正确位置以恰当礼貌级别播报错误、加载或完成等状态变化。
  • 在有用时,用 aria-describedby 或结构化标题连接标签、提示和状态文本。

视觉无障碍:

  • 不要仅依赖颜色来传达严重程度、完成或选中状态。

性能护栏

  • 将网络延迟、token 用量和长响应的客户端渲染作为整体预算,而非彼此独立的关注点。
  • 在能提升首次价值时间时对流式或分块内容进行优化,但要稳定布局,避免阅读时抖动。
  • 跟踪长提示、模型切换和重试等昂贵状态,以便基于证据调优体验。

常见错误

  1. 隐藏系统状态 问题:用户无法判断模型是在等待、流式输出、重试还是已完成。 修复:暴露清晰的请求生命周期状态,并让它们保持在受影响内容附近可见。

  2. 把失败当作普通表单错误 问题:AI 失败包括安全拦截、上下文限制、模型不可用和部分输出,而不仅仅是请求失败。 修复:区分不同失败模式,并为每种模式提供匹配的恢复操作。

  3. 忽视 token 与延迟预算 问题:当响应变慢、变短或变贵却没有解释时,体验会显得不可预测。 修复:从一开始就把 token、延迟和提供商约束设计进界面。

相关模式

  • https://uxpatterns.dev/patterns/ai-intelligence/model-selector
  • https://uxpatterns.dev/patterns/ai-intelligence/prompt-input
  • https://uxpatterns.dev/patterns/forms/autocomplete

完整实现细节、示例和测试说明见 references/pattern.md。 模式页面:https://uxpatterns.dev/patterns/ai-intelligence/ai-suggestions