AI 原生界面AI-Native UI
以对话与生成为核心：流式输出、打字指示、上下文卡片、建议追问。界面需要表达「正在思考」与「可被修正」，而非假装即时准确。
典型场景AI 助手 · Copilot · 生成式工具
编号43
年代2020s AI-Era
复杂度Low
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
以对话与生成为核心：流式输出、打字指示、上下文卡片、建议追问。界面需要表达「正在思考」与「可被修正」，而非假装即时准确。
关键词
Chatbotconversationalvoiceassistantagenticambientminimal chromestreaming textAI interactions
效果与动效
Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals
设计系统变量
--ai-accent#6366F1--user-bubble-bg#E0E7FF--ai-bubble-bg#F9FAFB--input-height48px--typing-dot-size8px--message-gap16px配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)
辅色 / Secondary
Status indicators, streaming highlights, context card colors, subtle accent variations
强调色在页面底色上的对比度约 4.2:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- AI products
- chatbots
- voice assistants
- copilots
- AI-powered tools
- conversational interfaces
避开 / Do Not Use For
- Traditional forms
- data-heavy dashboards
- print-first content
框架兼容
tailwindreact
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Chat layout responsive,
- Typing indicator smooth,
- Input always visible,
- Context cards styled,
- AI responses distinct,
- User messages aligned right
CSS / 技术关键词
chat bubble layout (flex-direction: column), typing animation (3 dots pulse), streaming text (overflow: hidden + animation), input: sticky bottom, context cards (border-left accent), minimal borders
AI 提示词
Design an AI-native interface. Use: minimal chrome, conversational layout, streaming text area, typing indicators (3-dot pulse), context cards, subtle AI accent color (#6366F1), clean input field, response bubbles.