1. 业务痛点与生成式 AI 交互界面的设计工程挑战

随着大语言模型（LLM）与生成式人工智能的深度普及，对话式 AI 与智能助理界面（Conversational AI & Chat Interface Architecture） 已成为当下软件工程与产品体验中最具商业价值（High-CPC）的交互中枢。从通用生产力工具（ChatGPT、Claude、Gemini），到开发辅助工具（GitHub Copilot、Cursor），再到垂直行业 AI Agent（智能客服、法律顾问、医疗辅助诊断），对话框已从传统的点对点即时通信（IM）升级为动态多模态推理与人机协作工作台。

然而在日常 UI/UX 设计与设计系统建设中，对话式 AI 界面极易沦为结构脆弱的“静态原型”：

1. 容器流式拓扑与视口断点混乱：LLM 对话要求在桌面端保持舒适的阅读宽度（如标准 Max-width: 768px 居中流式），同时在移动端自适应撑满（100% width）。若对 Figma Auto Layout 自动布局 的 Hug / Fill / Fixed 与 Min/Max Width 理解不深，文本内容撑多时就会破坏外层容器比例；
2. 多模态与复合富文本插槽解耦缺失：助手的回复不再是纯文本，而是深度思考折叠面板（Thinking / Reasoning Accordion）、带行号与语言标签的代码块（Code Blocks）、引用文献（Citations）、图表卡片（Charts）乃至交互式确认表单的混合体。缺乏原子插槽（Slots）会导致变体爆炸；
3. 流式生成态（Streaming State）与微交互缺失：模型输出具有渐进流式生成的物理特性。若静态设计稿缺少“思考中（Thinking Pulse）”、“流式打字中（Blinking Cursor）”、“停止生成按钮（Stop Generating）”与“重试/多版本分支切换（Branch Pagination: 1/3）”，研发团队就不得不自行臆造交互逻辑；
4. 底部多模态输入中枢（Input Dock）高度死锁：输入框需要随着用户换行自然向上延展（从单行 44px 弹性增至 200px 阈值并出现纵向滚动），同时兼容图片拖拽预览胶囊、快捷提示词（Prompt Suggestion Chips）与麦克风语音输入；
5. 研发交付与前端生态脱节：前端工程师采用现代生成式前端框架（如 Vercel AI SDK 的 useChat、Tailwind CSS、Shiki / Prism 代码高亮器），若 Figma 图层杂乱，开发者无法在 Figma Dev Mode 开发模式 中直接复用语义化 Flexbox 属性与 Tokens。

传统即时通讯（IM）与现代生成式 AI（LLM Chat）界面工程对比

评估维度	传统即时通讯 (IM: 微信/Slack)	现代生成式 AI 界面 (LLM Chat: ChatGPT/Claude)	设计系统工程应对方案
容器排布流向	左右对立气泡（左侧收发，右侧发送）	单列自顶向下居中流动，用户右偏或全居中	配置 Max-width: 768px 居中 Auto Layout 约束
内容复杂度	短文本、表情包、语音条、简单图片	Markdown、多级标题、LaTeX 公式、语法高亮代码块、推理思考链	采用原子插槽（Nested Component Slots）隔离排版
生成时序特征	离散消息帧，发送即完成	持续流式打字输出（SSE/Streaming），伴随思考耗时	设计 4 阶动态状态机（Idle / Thinking / Streaming / Done）
操作控制粒度	撤回、引用回复、转发	复制、重新生成、多分支切换（1/N）、赞踩反馈、编辑重问	消息底部标准化操作栏（Message Action Bar）组件
输入框扩展性	单行输入为主，表情面板弹出层	多模态拖拽上传、多行自适应弹性撑高、上下文提示胶囊	构建底部自适应流体泊坞槽（Adaptive Input Dock）

---

2. 居中流式容器拓扑：双栏 Auto Layout 与最大宽度约束

构建稳固的对话界面的首要步骤是规范“消息流视口与外层包装器”的层级拓扑。

┌────────────────────────────────────────────────────────────────────────┐
│ Main Viewport Wrapper (Fill container, Horizontal Center Alignment)    │
│  ┌──────────────────────────────────────────────────────────────────┐  │
│  │ Chat Thread Container (Max-width: 768px, Fill width, Gap: 24px)  │  │
│  │  ┌────────────────────────────────────────────────────────────┐  │  │
│  │  │ User Message Frame (Right-aligned or Flush-Right Pill)    │  │  │
│  │  ├────────────────────────────────────────────────────────────┤  │  │
│  │  │ Assistant Message Frame (Left-aligned, Full-width Card)    │  │  │
│  │  │  ┌──────────────────────────────────────────────────────┐  │  │  │
│  │  │  │ Thinking Accordion: 💭 Thought for 4.2s  [Collapse] │  │  │  │
│  │  │  ├──────────────────────────────────────────────────────┤  │  │  │
│  │  │  │ Markdown Body: Text paragraph, lists, emphasis       │  │  │  │
│  │  │  ├──────────────────────────────────────────────────────┤  │  │  │
│  │  │  │ Code Block: TypeScript [Copy Code Button]            │  │  │  │
│  │  │  ├──────────────────────────────────────────────────────┤  │  │  │
│  │  │  │ Action Bar: [Copy] [Regenerate] [👍] [👎] [< 1/3 >]  │  │  │  │
│  │  │  └──────────────────────────────────────────────────────┘  │  │  │
│  │  └────────────────────────────────────────────────────────────┘  │  │
│  └──────────────────────────────────────────────────────────────────┘  │
│  ┌──────────────────────────────────────────────────────────────────┐  │
│  │ Sticky Bottom Input Dock (Max-width: 768px, Fixed to Bottom)     │  │
│  └──────────────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────────────────┘

2.1 三层流体容器工程规范

1. 第 1 层：视口总容器（Chat Viewport Wrapper）

   • 布局模式：垂直 Auto Layout（Vertical Direction）；
   • 宽度与高度：宽度 Fill container（自适应 100vw），高度 Fill container（自适应 100vh）；
   • 对齐方式：顶部居中对齐（Top Center）；
   • 滚动属性：在 Prototype 面板勾选 Vertical scrolling，保证超长对话平稳滚动。

2. 第 2 层：消息列居中槽（Thread Centering Column）

   • 布局模式：垂直 Auto Layout，Gap = 24px，Padding: Left/Right = 20px, Top = 24px, Bottom = 140px（底部预留给输入框泊坞槽，避免遮挡最后一条内容）；
   • 宽度约束：宽度设置为 Fill container，并在属性面板高级设置中配置 Max width = 768px。在移动端屏幕（如 390px）下自动收缩为 100%，在大屏（如 1440px）下稳定锁定 768px 黄金阅读视距。

3. 第 3 层：消息项封装器（Message Turn Wrapper）

   • 宽度：Fill container；
   • 布局模式：水平 Auto Layout（Horizontal Direction）；
   • 用户消息对齐：靠右对齐（Right / Top），气泡宽度设置为 Hug contents，最大宽度限制为 Max width = 640px，避免单行极短时撑满整行；
   • 助手消息对齐：靠左对齐（Left / Top），宽度设置为 Fill container，允许 Markdown 渲染引擎自由排版。

---

3. 消息气泡与复杂插槽解耦：思考折叠面板、代码块与操作栏

为了杜绝变体数量失控，我们将助手回复拆解为独立的原子插槽（Atomic Slots）。结合站内 Figma 富文本编辑器与块级文档排版系统实战 的经验，各分区规范如下：

3.1 深度思考折叠面板（Thinking / Reasoning Accordion）

随着 Reasoning 模型的普及，模型输出前的思考链必须具备良好视觉分级：

• 容器结构：垂直 Auto Layout，圆角 8px，背景色填充弱中性底色（如 color-bg-subtle: #F1F5F9）；
• 标题触发栏（Header Trigger）：水平 Auto Layout，两端对齐。左侧包含思考图标（Brain / Sparkle）与状态文案（如 Thinking Process (4.8s)），右侧放置折叠箭头（Chevron）；
• 思考正文插槽（Thought Content Slot）：垂直 Auto Layout，Gap = 8px，文字采用斜体（Italic）中性弱色（color-text-tertiary: #64748B），字号 13px。通过 Boolean 属性 isExpanded 控制折叠隐藏。

3.2 生产级代码块插槽（Code Block Slot）

代码块是技术类对话的核心资产：

• 外层包裹器：垂直 Auto Layout，圆角 8px，背景设为深色代码主题色（如 #0F172A），Clip content = true；
• 代码顶栏（Code Header）：高度 36px，水平 Auto Layout，两端对齐。左侧显示语言标签（如 typescript、python，字号 12px 等宽字体），右侧嵌套“复制全部代码（Copy Code）”轻量图标按钮；
• 代码正文区（Code Body）：水平 Auto Layout，设置 Fill container，开启横向滚动模拟；内嵌行号列（Line Numbers，等宽灰色）与代码文本列（Monospace Syntax Highlighted Text），Gap = 16px。

3.3 消息底部操作工具栏（Message Action Bar）

┌─────────────────────────────────────────────────────────────┐
│ [📋 Copy]  [🔄 Retry]  [👍]  [👎]         [◀ 2/3 ▶]        │
└─────────────────────────────────────────────────────────────┘

位于助手消息正下方，水平 Auto Layout，Gap = 12px，默认透明度设为 0%，在变体 Hover 态下切换为 100% 不透明度，降低视觉噪音。最右侧放置版本分支选择器（Branch Selector），支持多轮重试生成的版本前后翻阅。

---

4. 底部多模态输入中枢（Input Dock）工程架构

底部输入框必须常驻固定在视口底部，并具备灵活的动态伸缩能力。

┌─────────────────────────────────────────────────────────────────────────┐
│ Context Attachment Chips Area (Horizontal Auto Layout, Gap: 8px)        │
│  [📄 specification.pdf ✕]  [🖼️ design_mockup.png ✕]                    │
├─────────────────────────────────────────────────────────────────────────┤
│ Text Input Area                                                         │
│   请根据上传的原型设计，生成对应的 Tailwind CSS 组件代码...             │
├─────────────────────────────────────────────────────────────────────────┤
│ Action Toolbar                                                          │
│  (+) [Attach File]  [Web Search]          (124/2000)  [⬆ Send Button]  │
└─────────────────────────────────────────────────────────────────────────┘

4.1 核心布局参数表

区域模块	容器属性	尺寸策略	关键约束与设计规范
整体泊坞槽 (Input Dock)	Vertical Auto Layout	Width: Fill (Max 768px)	固定贴底，外围带 12px 模糊毛玻璃与双层投影
上下文药丸 (Attachment Bar)	Horizontal Auto Layout	Width: Fill, Gap: 8px	Boolean: hasAttachments 控制显隐，可横向滚动
自适应文本域 (Textarea)	Vertical Auto Layout	Min-height: 48px, Max: 200px	文本垂直居中，超过 200px 时内容自动纵向截断滚动
底部操作条 (Dock Footer)	Horizontal Auto Layout	Width: Fill, Space Between	左侧功能按钮组（上传、网络搜索），右侧字数与发送
发送/停止按钮 (Submit/Stop)	32x32px 变体矩阵	Fixed: 32x32px, Radius: 999px	空白未输入（Disabled）、可发送（Active 向上箭头）、生成中（Stop 红色小方块）

---

5. Figma Variables 变量系统驱动交互状态机与高保真原型

为了在原型评审与可用性测试中呈现真实的 AI 交互反馈，我们在 Local Variables 中定义一套完整状态机。

5.1 变量矩阵定义

在设计系统集合中创建 AI_Chat_Runtime 变量组：

• Chat/isGenerating (Boolean，默认 false)：控制当前是否正在流式响应；
• Chat/streamingText (String)：绑定正在打字输出的文本段落；
• Chat/branchIndex (Number，默认 1)：当前消息分支索引；
• Chat/branchTotal (Number，默认 3)：重试生成的最大版本数；
• Chat/isThinkingExpanded (Boolean，默认 true)：思考过程折叠控制。

┌──────────────────────────────────────────────────────────────────────────┐
│ Variables 状态机条件流转                                                 │
│                                                                          │
│  [User clicks Send Button]                                               │
│    ├── Set isGenerating = true                                           │
│    ├── Switch Submit Button -> Stop Generating Button                    │
│    └── Show Thinking Pulse Accordion                                     │
│                                                                          │
│  [After Delay 1500ms]                                                    │
│    ├── Set isThinkingExpanded = false (Auto collapse after reasoning)    │
│    └── Stream Markdown Text into Assistant Slot                          │
│                                                                          │
│  [User clicks Stop Button or Generation Completed]                       │
│    ├── Set isGenerating = false                                          │
│    └── Reveal Message Action Bar (Copy, Retry, Branch Selector)          │
└──────────────────────────────────────────────────────────────────────────┘

结合 Figma 变量（Variables）与条件逻辑 模块，在原型动作中为发送按钮配置“On click -> Conditional: If isGenerating == false -> Set Variable isGenerating = true”，可实现高逼真度的流式交互演示。

---

6. Dev Mode 研发模式与现代前端 React 代码映射

在 Figma Dev Mode 开发模式 中，规范命名层级（如 Chat-Viewport、Thread-Container、User-Bubble、Assistant-Bubble、Code-Block）可直接无缝映射到前端组件。

前端工程团队基于现代开源生态（@ai-sdk/react + Tailwind CSS）的对应实现如下：

import React, { useState } from 'react';
import { useChat } from '@ai-sdk/react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

export const ConversationalChatInterface: React.FC = () => {
  const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat();

  return (
    <div className="flex flex-col h-screen w-full bg-slate-50 dark:bg-slate-950">
      {/* 消息滚动主视口 */}
      <main className="flex-1 overflow-y-auto px-4 py-6">
        <div className="max-w-3xl mx-auto space-y-6">
          {messages.map((message) => (
            <div
              key={message.id}
              className={`flex w-full ${
                message.role === 'user' ? 'justify-end' : 'justify-start'
              }`}
            >
              {message.role === 'user' ? (
                /* 用户气泡：自适应靠右 */
                <div className="max-w-[85%] rounded-2xl px-4 py-3 bg-blue-600 text-white text-sm shadow-sm">
                  {message.content}
                </div>
              ) : (
                /* 助手气泡：全宽流式排版 */
                <div className="w-full rounded-2xl p-4 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-4">
                  <div className="prose dark:prose-invert max-w-none text-sm text-slate-800 dark:text-slate-200">
                    {message.content}
                  </div>
                  {/* 操作栏 */}
                  <div className="flex items-center gap-3 pt-2 text-xs text-slate-400">
                    <button className="hover:text-slate-600">复制内容</button>
                    <button className="hover:text-slate-600">重新生成</button>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </main>

      {/* 底部输入中枢泊坞槽 */}
      <footer className="w-full px-4 pb-6 pt-2">
        <div className="max-w-3xl mx-auto">
          <form
            onSubmit={handleSubmit}
            className="flex flex-col bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-3 shadow-lg"
          >
            <textarea
              value={input}
              onChange={handleInputChange}
              placeholder="输入问题或提示词..."
              rows={2}
              className="w-full resize-none outline-none text-sm bg-transparent"
            />
            <div className="flex justify-between items-center mt-2">
              <span className="text-xs text-slate-400">{input.length} / 2000</span>
              {isLoading ? (
                <button
                  type="button"
                  onClick={stop}
                  className="px-3 py-1 bg-red-500 text-white text-xs rounded-full"
                >
                  停止生成
                </button>
              ) : (
                <button
                  type="submit"
                  disabled={!input.trim()}
                  className="px-4 py-1.5 bg-blue-600 disabled:opacity-40 text-white text-xs rounded-full"
                >
                  发送
                </button>
              )}
            </div>
          </form>
        </div>
      </footer>
    </div>
  );
};

---

7. 常见报错排障与架构避坑指南

在实际搭建对话式 AI 组件库时，团队常见以下典型缺陷：

1. 代码块横向挤破视口：长代码行在未设置换行或横向滚动时，强行把父级卡片宽度从 768px 撑到数千像素。排障方案：代码容器宽度必须设为 Fill container，并开启 Clip content，在研发代码中配置 overflow-x: auto; white-space: pre；
2. 移动端键盘弹出时视口高度塌陷：移动端输入法弹起会挤压 100vh 容器。排障方案：在设计交付标注中标注 CSS dvh（Dynamic Viewport Height）与弹性滚动锚定（Scroll Anchor）；
3. 多模态预览胶囊折行错乱：一次上传多个图片或文件时破坏了输入框对齐。排障方案：附件预览栏单独设为水平 Auto Layout，并勾选 Wrap 自动换行，且单张缩略图限制固定高度 48px。

更多企业级故障定位与排错技巧，请参阅 Figma 常见报错与疑难故障诊断手册 与 设计系统 Design Tokens 规范速查。