AI 交互设计库
界面组件与状态
查看提示词输入框、任务卡等组件演示。
09 / 09S1 · INPUT LAYER
输入层
用户将意图传递给 AI 的所有界面入口。从基础文本框到多模态触发器。
Prompt Input Box
提示词输入框
Slash Commands
斜杠命令菜单
/summarize
总结选中内容或当前文档
/translate
翻译到指定语言
/fix
修复代码中的 Bug
/explain
解释这段代码或概念
S2 · OUTPUT LAYER
输出层
AI 将结果呈现给用户的各种渲染形式。
Streaming Text Output
流式文本输出
待机
Code Block
代码块渲染器
TYPESCRIPT
async function streamChat(prompt: string) { const res = await fetch('/api/chat', { method: 'POST', body: JSON.stringify({ prompt }), }); // 逐行读取 SSE 流 for await (const chunk of res.body) { render(chunk); } }
Tool Call Card
工具调用卡片
web_search
完成
▾
query
"AI interaction design 2025 best practices"
results
12 条结果已返回
read_file
运行中
▾
path
./src/components/Chat.tsx
S3 · STATE LAYER
状态层
生成中、中断、出错——AI 的每一种运行状态都需要明确的视觉反馈。
Loading Dots
加载指示器
bounce
pulse
typing
spinner
Stop Generation
停止生成
按下「开始」体验停止生成交互
S4 · ACTION CONTROLS
操作控件
附着在 AI 消息上的一组轻量操作——复制、反馈、重新生成。
Copy · Thumbs Feedback
复制 · 拇指反馈
设计师转型 AI 产品经理,最核心的能力迁移是用户研究 → 行为数据分析,以及交互规范制定 → Prompt 规范制定。前者让你理解用户真实意图,后者让你控制 AI 输出质量。
S5 · AGENT ORCHESTRATION
Agent 编排
多步骤任务、工具调用确认、执行进度追踪——Agent 时代的专属组件。
Task Progress Stepper
任务进度步进器
读取项目文件
已完成 · 14 个文件
分析依赖关系
运行中…
生成重构方案
等待中
输出执行计划
等待中
Confidence Badge
置信度标签
Claude 4 于 2025 年 3 月发布,支持 200K token 上下文窗口,在代码生成和推理任务上超越了同期竞品。
高置信
来源 ↗
根据目前趋势,2026 年底 AI 编程助手市场份额可能超过传统 IDE 插件。
中置信 · 推测
该公司 Q3 营收预计将达到 48 亿美元。
低置信 · 需核实