SuperAPI AI Directory

ai-native-ux-design

Design & creation

View repository

Updated 10-15 21:49

About this skill

AI Native User Experience Design Skill

Use Cases

  • The product needs to design an interaction experience where humans and AI collaborate
  • It is necessary to enable users to understand the system, trust the system, and be willing to continuously collaborate with the system
  • It is necessary to design a progressive automation path

Execution Steps

  1. Task chain analysis: Sort out the complete chain from the user expressing a goal to completing the task, and identify the core nodes of human-AI collaboration.
  2. Human-AI division of labor design: For each task node, define AI responsibilities, human responsibilities, and the decision mode (AI automatic/suggested/human decision).
  3. State visibility design: Design how the system displays AI analysis results, confidence, data sources, and risk markers.
  4. Correction mechanism design: Design correction entry points such as quick editing, regeneration, complete rejection, and error marking.
  5. Trust UX design: Design source display, uncertainty prompts, and boundary disclosure to establish reasonable trust.
  6. Feedback accumulation mechanism: Design effective feedback collection methods and turn feedback into system improvements.
  7. Output UX plan: Integrate the human-AI division of labor diagram, state visibility, correction mechanism, trust design, and feedback mechanism.

Core Concepts

  • AI Interaction Experience (AI UX): A product experience designed around human-AI collaboration, visible states, correctable results, and controllable boundaries
  • Prompt UX: Interaction design for how users express goals, supplement information, and correct the system's direction
  • Trust UX: How the system displays sources, uncertainty, and execution boundaries to establish reasonable trust
  • Progressive automation: An experience path that first lets users see and confirm, then gradually increases the degree of automation
  • Human-in-Definition: Humans remain in the lead in goal definition, boundary setting, and declaration of prohibited items
  • Human-in-the-Loop: Humans confirm, modify, and release at key nodes
  • Human-on-the-Loop: Humans monitor AI at runtime, intervene in anomalies, and execute stops and rollbacks

AI UX Process

用户表达目标
  → 系统展示状态
    → 给出建议 / 行动
      → 用户纠偏或确认
        → 结果执行
          → 反馈沉淀

If the system omits "state visibility" and "correction entry points", no matter how smooth the experience is, it will be difficult to form long-term trust.

From Traditional UI to AI Interaction Experience

Traditional software experience mainly revolves around interface efficiency: whether navigation is clear, whether buttons are handy, and whether forms are smooth.

AI Native products add another layer of experience:

  • How users express intent
  • How the system understands goals
  • How results are explained
  • How errors are corrected

What is truly designed is not just interface elements, but the entire process of "after the user proposes a goal, how the system responds, how it advances, and how it is corrected".

Five Core Characteristics of AI UX

1. Prompt UX

  • How users naturally express problems
  • How to guide users to provide sufficient context
  • How to let users know how to correct the system's direction

2. Agent Interaction

  • How the system displays its thinking process
  • How the system displays steps and status
  • How users understand what the system is doing

3. Human + AI Collaboration

  • How users take over, modify, and confirm results
  • Which actions can be executed automatically and which must be confirmed
  • How to make users feel they are still in control

4. Feedback UX

  • How products collect effective feedback rather than just likes and dislikes
  • How to make users willing to provide corrections and improvement suggestions
  • How to turn feedback into system improvements

5. Trust UX

  • How the system lets users know where answers come from
  • Where there is uncertainty
  • Which actions carry risk and require attention

The three levels of human-AI collaboration

Human-in-Definition

  • Humans remain dominant in goal definition
  • Humans remain dominant in boundary setting
  • Humans remain dominant in declaring prohibitions

Human-in-the-Loop

  • Humans confirm at key nodes
  • Humans modify at key nodes
  • Humans approve at key nodes

Human-on-the-Loop

  • Humans monitor AI at runtime
  • Humans intervene when anomalies occur
  • Humans execute stop and rollback

Experience design should revolve around task completion

The experience design of AI products should not stop at "whether the answers look good," but should be designed around task completion efficiency:

  • In analysis systems, the key is not how beautiful the output is, but whether users can quickly understand the cause of anomalies and take action
  • In customer service systems, the key is not how long the reply is, but whether problems can be solved faster and more reliably

Merged Sub-Skill Summary

The following three sub-skills have been archived to .archive/, and their core content has been merged into this section:

p8a: RAX Risk Assessor

Systematically assess the risk, ambiguity, and exposure of AI products based on the RAX framework (Risk, Ambiguity, eXposure), helping product teams identify and manage user experience risks and find UX weaknesses.

p8b: Trust Tier Designer

Design a trust tier system for AI products so that users gradually build trust in AI from "trying" to "relying," reducing users' psychological barriers through a tiered delivery strategy.

p8c: Progressive Disclosure Checklist

Gradually reveal AI features and capabilities according to user maturity, avoiding cognitive overload caused by delivering too much information at once and reducing churn during the novice period.

Deliverable: UX Plan

  1. Human-AI division of labor diagram: at each task node, what AI does and what humans do
  2. State visibility design: how the system shows what it is doing and what the progress is
  3. Correction mechanism design: how users correct, confirm, reject, and escalate to a human
  4. Trust design plan: how to show sources, uncertainty, and boundaries
  5. Feedback accumulation mechanism: how to collect effective feedback and turn it into system improvements

How to use

When users provide a product scenario, automatically execute:

  1. Analyze the task chain and human-AI division-of-labor points
  2. Design a state visibility solution
  3. Design a correction mechanism
  4. Design a trust UX solution
  5. Design a feedback accumulation mechanism
  6. Output the UX solution

Example

Example: AI customer service Copilot UX design

Scenario description: Design the UX of an AI customer service collaborative workbench, so that customer service agents can efficiently use AI suggestions while maintaining control over the service.

User input: "Our AI customer service suggestions are sometimes not adopted, and sometimes after being adopted they need to be modified instead. How can we design a better collaboration experience?"

Skill execution process:

  1. Task chain analysis
用户咨询 → 客服理解 → AI生成建议 → 客服审核 → 发送/修改 → 用户反馈
                    ↓
              人机协作核心节点
  1. Human-machine division of labor design
Task node AI responsibility Human responsibility Decision mode
Intent understanding Identify consultation type and emotion Confirm or correct understanding AI suggests, human confirms
Information query Automatically query orders/logistics Verify data accuracy AI executes automatically
Reply generation Generate candidate replies Review, edit, select AI suggests, human decides
High-risk commitments Flag risks Can only be sent after manual confirmation Human decides
Exception handling Suggest escalation Judge and execute escalation Human decides
  1. State visibility design
界面元素:
  
  AI分析卡片:
    - 意图识别结果(置信度条)
    - 已查询的数据(展开的详情)
    - 情绪检测(中性/着急/愤怒)
  
  候选回复区:
    - 3个备选回复(可切换)
    - 每个回复的风险标记(绿/黄/红)
    - 引用来源(规则第X条、订单#123)
  
  置信度提示:
    - 高置信度(>90%):绿色边框
    - 中置信度(70-90%):黄色边框 + "请确认"
    - 低置信度(<70%):红色边框 + "建议人工处理"
  1. Correction mechanism design
Correction method Interaction design Trigger condition
Quick edit Inline editing, preserving the original meaning The content is basically usable but needs minor adjustments
Regenerate "Rephrase" button The style is inappropriate
Reduce risk Remove sensitive expressions High-risk words detected
Reject completely "Not needed" button + reason selection The suggestion is completely irrelevant
Flag an error "Report issue" button An AI misunderstanding is discovered
  1. Trust UX design
透明度设计:
  
  来源展示:
    - "基于订单 #12345 生成"
    - "引用《退换货规则》第3.2条"
    - "参考历史成功案例 C-8921"
  
  不确定性展示:
    - "预计送达时间:1-2天(基于物流轨迹预测)"
    - "⚠️ 该情况较为少见,建议优先解释政策"
  
  边界提示:
    - "退款涉及金额 > 500元,需主管确认"
    - "此建议不适用VIP客户,已自动切换模板"
  1. Feedback UX design
即时反馈:
  客服采纳建议后:
    - 快捷评价:👍 / 👎
    - 修改追踪:记录人工编辑与原建议的差异
    - 标签选择:准确/冗余/风格差/信息错误
  
  定期沉淀:
    - 每周生成"最佳建议"和"待改进建议"报告
    - 高采纳率建议 → 案例库
    - 频繁修改场景 → 模型优化需求

Output result:

# UX 方案:AI 客服 Copilot

人机分工:
  AI自动执行: [信息查询, 初步意图识别]
  AI建议人决策: [回复生成, 解决方案推荐]
  人权决: [高风险承诺, 投诉处理, 升级判断]

状态可见:
  - AI分析结果实时展示(意图+置信度)
  - 数据来源明确标注
  - 风险等级颜色编码

纠偏入口:
  - 快捷编辑(行内)
  - 重新生成(一键)
  - 完全拒绝+反馈
  - 风险降级(自动移除敏感词)

信任建立:
  - 所有建议标注来源
  - 高不确定性场景主动提示
  - 边界场景明确告知限制

反馈闭环:
  - 采纳行为自动记录
  - 修改内容追踪差异
  - 定期质量报告生成
  - 正向案例入库

渐进自动化路径:
  阶段1: 所有建议人工审核(当前)
  阶段2: 高置信度+低风险建议自动发送(达成90%准确率后)
  阶段3: 仅异常/边界场景人工介入(长期目标)

Example: AI data analysis assistant—progressive disclosure UX design

Scenario description: Design an AI data analysis assistant for business analysts. Novice users are easily intimidated by complex features, while advanced users want to obtain in-depth analysis in one step. A progressive disclosure path needs to be designed so that users with different levels of maturity can all use it efficiently.

User input: "Our AI analysis assistant has many features, but new users don't know where to start when they open it, and experienced users feel they have to click through several layers every time to use advanced features. How can we design the experience to accommodate both?"

Skill execution process:

  1. Task chain analysis
用户打开助手 → 表达分析目标 → AI 理解意图 → 生成初始分析
  → 用户查看结果 → 追加需求 / 深入探索 → AI 扩展分析
    → 用户导出 / 分享 → 反馈沉淀
  1. Human-machine division of labor design
Task node AI Responsibilities Human Responsibilities Decision Mode
Goal Understanding Parse natural language, recommend analysis templates Confirm or correct the analysis direction AI suggests, human confirms
Data Selection Recommend relevant datasets and fields Select data scope and dimensions AI suggests, human decides
Analysis Execution Automatically calculate, generate charts Review analysis logic and conclusions AI automatic, human reviews
Deep Exploration Recommend drill-down dimensions and correlation analysis Decide whether to go deeper and where to go deeper AI suggests, human decides
Conclusion Output Generate summaries and action recommendations Review and approve the final conclusion AI suggests, human decides
  1. Progressive Disclosure Design (Core)
用户成熟度分级:

  Level 1 - 新手引导态:
    界面: 简洁输入框 + 3个推荐问题模板
    功能暴露: 基础问答式分析、单图表输出
    引导方式: "试试问我:上个月销售额怎么样?"
    隐藏内容: 多维分析、SQL编辑、自定义指标

  Level 2 - 进阶探索态(使用5次后解锁):
    界面: 输入框 + 快捷操作栏(对比/趋势/分布)
    功能暴露: 多图表对比、时间范围选择、维度切换
    引导方式: "你可以试试把两个指标放在一起对比"
    隐藏内容: 自定义SQL、API接入

  Level 3 - 专家模式(使用20次后解锁):
    界面: 完整工作台(输入+SQL编辑器+可视化面板)
    功能暴露: 全部功能、SQL编辑、自定义仪表盘
    引导方式: 功能菜单全部展开,提供高级快捷键
    解锁提示: "你已解锁专家模式,所有高级功能已开放"
  1. State Visibility Design
界面元素:
  分析过程展示:
    - 步骤条: "理解目标 → 查询数据 → 生成分析"(实时高亮当前步骤)
    - 数据加载: 已扫描 12,340 条记录
    - 分析进度: "正在计算环比变化..."

  结果展示:
    - 图表 + 一句话结论 + 置信度标签
    - 数据来源标注: "数据截至 2026-05-01"
    - 局限性提示: "该分析未包含退货数据"
  1. Correction Mechanism Design
Correction Method Interaction Design Trigger Condition
Modify analysis direction "Switch perspective: by region/by product line" quick switch Analysis dimension is incorrect
Add constraints "Add filter conditions" overlay Result scope is too large
Regenerate "Calculate again" button Data or logic is incorrect
Roll back to the previous step Step bar click to roll back Intermediate steps need adjustment
  1. Trust UX Design
透明度设计:
  来源展示:
    - "基于 sales_db.orders 表,共 12,340 条记录"
    - "计算方式:SUM(amount) GROUP BY month"
  不确定性展示:
    - "⚠️ 12月数据存在 3% 缺失,趋势可能偏低"
    - "该结论基于历史6个月数据,置信度:中"
  边界提示:
    - "当前分析范围为华东区,其他区域数据未包含"

Output Result:

# UX 方案:AI 数据分析助手——渐进式披露

人机分工:
  AI自动执行: [数据查询, 基础计算, 图表生成]
  AI建议人决策: [分析维度选择, 下钻方向, 对比方式]
  人权决: [结论放行, 对外分享, 行动决策]

渐进式披露:
  Level 1 (新手): 输入框+模板 → 单图+结论
  Level 2 (进阶): 快捷操作栏 → 多图对比+维度切换
  Level 3 (专家): 完整工作台 → 全功能+SQL+自定义

状态可见:
  - 分析步骤条实时展示进度
  - 数据量和来源始终可见
  - 置信度和局限性主动标注

纠偏入口:
  - 快捷切换分析角度
  - 筛选条件浮层
  - 步骤回退
  - 重新生成

信任建立:
  - 数据来源和计算方式透明
  - 数据缺失和局限性主动提示
  - 分析范围边界明确告知

反馈闭环:
  - "这个分析有用吗" 一键评价
  - 追踪用户在哪个披露层级卡住
  - 功能使用频率 → 自动调整披露策略

渐进自动化路径:
  阶段1: 所有分析由用户触发(当前)
  阶段2: 常规周报自动生成,用户审核放行
  阶段3: 异常指标自动预警+根因分析推送

Example: Enterprise Knowledge Base AI Search—Trust Level Classification UX Design

Scenario Description: Design an AI search and Q&A system for an enterprise internal knowledge base. Employees use it to look up policies, find processes, and check technical documentation. AI answers sometimes cite outdated documents, and sometimes give affirmative answers to uncertain questions, causing a decline in user trust. A trust level classification system needs to be designed so that answers with different confidence levels have different display methods and interaction behaviors.

User Input: "Our AI knowledge base search often gives very confident answers, but the cited documents are sometimes outdated, and employees are starting to distrust it. How can it be designed so that users know which answers they can use with confidence and which ones they need to confirm themselves?"

Skill Execution Flow:

  1. Task Chain Analysis
员工提问 → AI 理解问题 → 检索知识库 → 评估答案可靠性
  → 按信任等级展示回答 → 用户判断是否采信
    → 用户验证/采纳/标记 → 反馈沉淀
  1. Human-Machine Division of Labor Design
Task Node AI Responsibilities Human Responsibilities Decision Mode
Question Understanding Parse question intent, identify domain Confirm or supplement context AI suggests, human confirms
Knowledge Retrieval Retrieve relevant documents, rank relevance Determine whether the correct documents are found AI automatic, human reviews
Answer Generation Generate answers, annotate citation sources Evaluate answer credibility AI suggests, human decides
Trust grading Calculate confidence, assign trust level Decide whether to trust based on level AI automatic, human decides
Outdated detection Flag document timeliness Confirm whether update is needed AI prompts, human decides
  1. Trust level design (core)
信任度等级体系:

  🟢 L1 - 高信任(置信度 ≥ 90%):
    条件: 引用3+篇一致文档 + 文档更新于90天内
    展示: 绿色卡片 + "高置信回答" 标签
    交互: 可直接采纳,一键复制或分享
    示例: "根据《2026年差旅报销制度》第4.2条,国内出差住宿标准为..."

  🟡 L2 - 中信任(置信度 60-89%):
    条件: 引用1-2篇文档 或 文档较旧(90-180天)
    展示: 黄色卡片 + "建议验证" 标签
    交互: 展示引用来源列表,鼓励用户点击查看原文
    示例: "根据《报销制度(2024版)》,住宿标准可能为... ⚠️ 该文档已超过6个月未更新"

  🔴 L3 - 低信任(置信度 < 60%):
    条件: 文档之间存在矛盾 或 无直接匹配文档
    展示: 红色卡片 + "需要人工确认" 标签
    交互: 不直接给结论,展示相关片段让用户自行判断
    示例: "找到3篇相关文档,但内容存在差异:[文档A] 说... [文档B] 说... 建议联系行政部门确认"

  ⚪ L4 - 无法回答:
    条件: 知识库中无相关内容
    展示: 灰色提示 + "未找到相关知识"
    交互: 提供转人工入口 + "我要提问"(提交给知识管理团队)
    示例: "知识库中暂无关于海外签证办理的文档,已为您转接行政助理"
  1. Status visibility design
界面元素:
  搜索过程展示:
    - "正在检索知识库... 已扫描 2,847 篇文档"
    - "找到 12 篇相关文档,正在评估答案可靠性"
    - 匹配文档列表(可展开查看)

  答案卡片:
    - 信任等级标签(颜色编码)
    - 引用来源列表(文档名+更新日期+相关度)
    - 时效性标记: "✅ 最新" / "⚠️ 3个月前更新" / "🔴 超过6个月"
    - 一致性标记: "✅ 多篇文档一致" / "⚠️ 文档间存在差异"

  文档溯源:
    - 点击引用 → 高亮原文对应段落
    - 展示文档最后更新时间和维护人
  1. Correction mechanism design
Correction method Interaction design Trigger condition
View original text "View source" button, jumps to highlighted paragraph in document User wants to verify the answer
Supplementary question "Ask in another way" input box Answer is not precise enough
Flag error "This answer is incorrect" button + reason selection Discover that the answer is incorrect
Report outdated "Document may be outdated" button The referenced document has expired
Request human "Transfer to human consultation" button Low-trust answer or complex question
  1. Trust UX design
透明度设计:
  来源展示:
    - 每条回答必须标注引用文档
    - 展示文档最后更新日期和维护责任人
    - 多来源时展示一致性/矛盾性

  不确定性展示:
    - 置信度可视化(颜色+文字双重编码)
    - "该回答基于2024年制度,2025年可能已更新"
    - "不同文档对此问题的表述不完全一致"

  边界提示:
    - "本系统覆盖行政、HR、IT制度类文档"
    - "涉及法律合规类问题建议咨询法务部"
    - "该文档仅适用于中国区,海外政策请咨询当地HR"

Output result:

# UX 方案:企业知识库 AI 搜索——信任度分级

人机分工:
  AI自动执行: [文档检索, 相关性排序, 置信度计算]
  AI建议人判断: [答案采信, 文档时效性判断]
  人权决: [制度解读, 流程确认, 跨部门问题]

信任度分级:
  L1 高信任(≥90%): 绿色卡片 + 可直接采纳
  L2 中信任(60-89%): 黄色卡片 + 建议验证原文
  L3 低信任(<60%): 红色卡片 + 展示多源让用户判断
  L4 无法回答: 灰色提示 + 转人工入口

状态可见:
  - 搜索进度和文档扫描数量实时展示
  - 引用来源含文档名+更新日期+一致性标记
  - 时效性和矛盾性双重标记

纠偏入口:
  - 查看原文(高亮定位)
  - 标记错误 / 报告过时
  - 补充提问 / 转人工

信任建立:
  - 所有回答必须标注来源文档
  - 置信度颜色+文字双重编码
  - 文档时效性主动标注
  - 矛盾信息不强行给结论

反馈闭环:
  - "回答有误" / "文档过时" 按钮收集
  - 高频错误问答 → 知识管理团队待办
  - 过时文档 → 自动触发更新提醒
  - 低信任比例趋势 → 检索模型优化信号

渐进自动化路径:
  阶段1: 所有回答按信任等级展示,用户自行判断(当前)
  阶段2: L1回答自动标记为"已验证",减少用户重复验证
  阶段3: L1回答直接作为官方参考答案,L2/L3仍需审核