Figma AI 提示词测试沙盒与大模型评估工作台系统（AI Prompt Playground & Model Evaluation Sandbox Architecture）组件架构实战：从三栏式响应式工作区、流式打字机插槽、多模型双屏对比（Split View）到 Variables 状态机与 Dev Mode 前端 Vercel AI SDK 交付

2026 年 11 月 15 日

1. 现代生成式 AI 测试沙盒（Prompt Playground）的交互范式变革 #

随着大型语言模型（LLM）与多模态智能体（Agent）在各行各业的全面普及，开发者与提示词工程师（Prompt Engineers）的工作阵地已经从传统的终端命令行转向了集模型调试、参数寻优、批量回归评估与生产交付于一体的 AI 提示词测试沙盒（Prompt Playground & Evaluation Workbench）。无论是 OpenAI Playground、Anthropic Workbench、Google Vertex AI Studio 还是各类开源微调平台（如 Dify、LangSmith），这类产品均具备高度密集的信息交互与极其严苛的工程状态控制。

在 Figma 中构建一套工业级的 AI 测试沙盒系统，设计师面临着全新的组件架构考验：

  1. 多维度超参数输入与微步调节的严密控制：模型的核心推断能力高度依赖 Temperature（随机采样温度）、Top_P（核采样）、Frequency Penalty（频率惩罚）以及 Max Output Tokens（最大输出长度）等参数。这些控件既需要提供丝滑的拖拽滑块（Slider），又必须支持高精度的键盘直接输入与非法数值自动钳位（Clamp）；
  2. 动态变量模板插槽（Template Variable Slots）的高保真还原：现代提示词通常包含 Mustache 风格的动态占位符（例如 、）。组件系统需要将这些占位符解析为可点击配置的“变量实体胶囊（Variable Chips）”，并在侧边或下方动态提取为参数测试表单；
  3. 双模型/多模型并排横向对比（Side-by-Side Comparison）的视口自适应：在模型选型或版本迭代评测时，用户需要将 Prompt 同步下发至两个不同大模型（例如 Claude 3.5 Sonnet 与 GPT-4o），左右双屏同时流式输出，实时对比首字时间延迟（TTFT - Time to First Token）、生成质量评分与 Token 消耗。组件架构必须支持一键从单栏无缝扩展为双栏，且不出现排版撑裂；
  4. 流式打字机（Streaming Typewriter）与代码高亮排版：LLM 的输出是逐 Token 异步流式吐出的。设计稿中需要精准定义流式输出呼吸光标、已生成 Token 数量徽标、流式中止（Stop Generating）CTA 按钮以及 Markdown / 代码块嵌套插槽，并在 Dev Mode 阶段交付清晰的流式通信与 DOM 渲染指导。

本文将深入拆解这套现代 AI 测试工作台的核心架构，通过 Figma Auto Layout 自动布局、组件变体与属性 及 Variables 变量系统，完成从界面高保真设计到工程级代码交付的完整落地。

2. 工作台核心组件拓扑与 Auto Layout 弹性架构拆解 #

AI 提示词沙盒的标准工作区采用自左向右的三栏横向响应式布局：

AI Workbench Workspace (Frame, Auto Layout Horizontal, Fill Container)
├── Left Console: Model & Parameters Panel (Fixed W: 320px, Auto Layout Vertical)
│   ├── Model Selector Dropdown Slot (Provider, Model Family, Context Window)
│   ├── System Prompt Container (Collapsible Card, Dynamic Variable Chips)
│   └── Hyperparameters Form (Temperature, Top_P, Max Tokens, Presence Penalty)
├── Middle Sandbox: Chat & Prompt Execution Canvas (Fill Container, Auto Layout Vertical)
│   ├── Top Action Header (Run Button, Compare Mode Toggle, Share / Export)
│   ├── Split Canvas Container (Auto Layout Horizontal, Fill Container)
│   │   ├── Model Arena Column A (Single Model or Model Left)
│   │   │   ├── Prompt Input Area & Dynamic Template Variables
│   │   │   └── Streaming Response Bubble (Typewriter Cursor, Token Metrics)
│   │   └── Model Arena Column B (Visible in Comparison Mode, Model Right)
│   │       ├── Synchronized Prompt Mirror
│   │       └── Streaming Response Bubble (Candidate Model Output)
│   └── Bottom Status Bar (Active Session Tokens, Latency ms, Estimated Cost)
└── Right Drawer: Test Cases & Model Evaluation (Fixed W: 340px, Slide Over)
    ├── Test Dataset Matrix (CSV / JSON Test Rows)
    ├── Output Evaluator Criteria (Accuracy, Latency, Reasoning Score)
    └── History Run Version Diff

2.1 模型选择与超参数微调控制台（Parameters Console） #

位于最左侧，承载核心模型环境配置：

  1. 模型多态选择器（Model Selector Dropdown）：包含服务商图标（如 OpenAI / Anthropic / Google）、模型系列名称（如 gemini-1.5-pro）、上下文窗口上限标签（2M Tokens）以及模态类型徽标（Text / Vision / Audio）。点击展开包含搜索过滤的下拉树；
  2. 系统提示词容器（System Prompt Card）：这是赋予大模型全局人设与业务约束的核心区域。设计为一个带折叠收起功能的圆角卡片，内部嵌套富文本输入区域。当文本中出现双花括号占位符（如 ）时，系统自动高亮渲染为浅紫色圆角标签（Tag Chip），并在下方自动派生出输入变量赋值槽；
  3. 超参数滑动输入器（Hyperparameter Slider & Stepper）：
    • 包含参数标题、参数释义 Tooltip 问号图标，以及右侧高精度数值输入框；
    • 下方横贯一条高度为 4px、圆角为 999px 的轨道滑条（Slider Track），滑条左侧填充主色指示条，滑块手柄（Slider Thumb）为 16×16px 白色圆钮带微投影。支持步长微调（如 Temperature 步长为 0.01，区间 0.00 ~ 2.00）。

2.2 主测试沙盒与动态提示词模板插槽（Prompt Canvas） #

位于工作台中枢，承载用户与模型的直接对话及流式输出：

  1. 顶部控制栏（Top Action Bar）：
    • 左侧放置“运行测试（Run / Generate）”醒目主操作按钮（支持快捷键标注 ⌘ + Enter）；
    • 中间放置“对比模式开关（Compare Mode Toggle）”分段控件，支持一键在单模型运行与双模型 A/B 对比之间切换；
    • 右侧集成“代码导出（Export Code）”按钮，支持一键将当前 Prompt 转化为 Python、Node.js 与 cURL 调用语句；
  2. 流式输出卡片（Streaming Response Card）：
    • 顶部元数据栏：标明生成状态（Generating... 配合动态旋转加载器，或 Completed 配合绿色勾选徽标）、首字耗时（TTFT: 342ms）、总耗时（1.82s）、输出 Tokens 计数（488 tokens）以及输出速度（42.3 t/s）；
    • 文本生成容器：设置 Auto Layout 纵向排列，内容采用等宽/无衬线排版。末尾拼接一个以 1Hz 频率闪烁的蓝色呼吸光标图元（Cursor Rect: 2×16px）；
    • 底部操作坞：包含一键复制 Markdown、重新生成（Regenerate）、反馈打分（点赞/点踩）与停止生成（Stop Generating）CTA。

3. 单模型沙盒模式 vs 双模型横向对比分屏模式设计规范对比表 #

在 AI 评估场景中，单模型深度调试与双模型水平横向对决（Model Arena）的交互规范存在显著差异：

评估维度 单模型沙盒模式 (Single Model Sandbox) 双模型 A/B 对比分屏模式 (Split Comparison View) 设计系统落地要点与工程约束
核心使用场景 初始提示词打磨、单步链路微调、边界用例验证、长文档处理 多模型选型横向 PK、微调模型与基座模型比对、成本/时延权衡 切换时自动同步当前激活的 Prompt 与变量测试用例
画布视口排版 中间主沙盒宽度为 Fill container 单列流动，最大视觉留白舒适 中间主沙盒采用 Auto Layout 水平并排双列（两列均为 Fill container） 必须为双列设置最小保护宽度（Min W: 400px），防止屏幕过窄折行
Prompt 下发机制 单一输入框直接下发至左侧所选模型 一套公共 Prompt 广播下发，或允许为 Model B 单独覆盖独立提示词 顶部提供“同步提示词（Sync Prompts）”复选框锁链图标
输出渲染与流式 单个打字机卡片纵向延展，支持完整会话气泡嵌套 左右两列各自独立流式吐出，并排展示差异，滚动条互相独立或联动 支持“双屏滚动同步（Synchronous Scrolling）”切换开关
性能与指标呈现 顶部显示单次推断耗时、单次 Token 总量与估算单价 左右分别显示独立耗时面板，并在胜出项（更低延迟/更高评分）打上高光标签 差异指标通过 Semantic Token color-status-success 突出呈现
评审与决策沉淀 单一导出按钮，保存当前版本 Prompt 为预设模板 提供“选择胜者（Pick Winner）”微交互，一键记录至评估数据集 结合右侧 Evaluation Drawer 沉淀结构化评测指标

4. Figma Variables 变量集合与交互原型状态机 #

为了让 AI 测试工作台在原型演示中具备真实的产品体验，我们需要在 Figma 中定义 AIPlayground 变量集合（Collection），实现模型切换、分屏流转与流式状态机联动：

4.1 核心变量类型与命名矩阵 #

遵循标准化设计令牌规范（参考 Design Tokens 标准手册）：

变量名称 (Token Identifier) 变量类型 取值定义 (Values) 作用目标与绑定图层
ai.is_compare_mode Boolean false / true 控制 Model Arena Column B（右侧对比列）的物理显隐
ai.model_a_name String "gpt-4o" / "claude-3-5-sonnet" 控制模型 A 标识徽标文本与卡片表头标题
ai.model_b_name String "gemini-1.5-pro" / "llama-3.3-70b" 控制模型 B 标识徽标文本
ai.temperature Number 0.70 (范围 0.00 ~ 2.00) 控制 Temperature 滑块水平位移与数值输入框文本
ai.is_generating Boolean false / true 控制呼吸光标显隐、Run 按钮变为 Stop 按钮、Loading 动画
ai.output_tokens Number 488 控制生成卡片顶部已用 Token 计数值的动态刷新
ai.cursor_color Color #2563EB (Light) / #60A5FA (Dark) 呼吸打字机光标色值，支持暗色模式动态映射

4.2 原型状态流转联动配置 #

在 Figma 的交互设置面板中，配置以下高保真触发流：

  1. 点击“运行测试（Run）”触发流式生成状态：
    • 触发动作：点击顶部或输入框底部的 Run 按钮；
    • 动作流：将变量 ai.is_generating 设为 true，利用条件判断切换按钮为红色 Stop Generating 状态，同时流式卡片中的 Typewriter Cursor 显示并开启循环透明度动效；
  2. 开启/关闭双模型横向对比模式：
    • 触发动作：点击顶部 Compare Mode 分段开关；
    • 动作流：执行 ai.is_compare_mode = !ai.is_compare_mode；
    • 响应效果：中间主沙盒中的 Column B 图层显隐属性即时响应，以平滑动画展开第二列，主画布自动平分视口宽度；
  3. 滑块拖拽与数值即时联动：
    • 触发动作：在 Temperature 滑条上执行 On drag 交互；
    • 动作流：滑块跟随鼠标水平位移，并将当前滑块相对位置映射赋值给 ai.temperature 变量，右侧输入框文本实时联动回显。

5. Dev Mode 生产级前端代码交付规范（React + Vercel AI SDK） #

在 Figma Dev Mode 下交付 AI 提示词沙盒时，前端工程师最关注的是组件如何优雅接入流式 Server-Sent Events (SSE) 以及参数如何与业界标杆库（如 Vercel AI SDK）深度对接。

以下是 AI 沙盒主生成卡片与参数联动的生产级 React + TypeScript 代码：

import React, { useState } from 'react';
import { useCompletion } from 'ai/react';

export interface ModelConfig {
  id: string;
  name: string;
  provider: 'openai' | 'anthropic' | 'google';
  temperature: number;
  topP: number;
  maxTokens: number;
}

interface PromptSandboxProps {
  modelConfig: ModelConfig;
  systemPrompt: string;
}

export const PromptSandboxCard: React.FC<PromptSandboxProps> = ({
  modelConfig,
  systemPrompt,
}) => {
  // 接入 Vercel AI SDK 流式调用 Hooks
  const {
    completion,
    input,
    handleInputChange,
    handleSubmit,
    isLoading,
    stop,
  } = useCompletion({
    api: '/api/generate',
    body: {
      model: modelConfig.id,
      system: systemPrompt,
      temperature: modelConfig.temperature,
      top_p: modelConfig.topP,
      max_tokens: modelConfig.maxTokens,
    },
  });

  return (
    <div className="flex flex-col h-full rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
      {/* 卡片顶部元数据与模型信息栏 */}
      <div className="flex items-center justify-between border-b border-slate-100 bg-slate-50/60 px-4 py-2.5">
        <div className="flex items-center gap-2">
          <span className="flex h-2 w-2 rounded-full bg-emerald-500" />
          <span className="text-xs font-semibold text-slate-800">
            {modelConfig.name}
          </span>
          <span className="rounded bg-slate-200/70 px-1.5 py-0.5 text-[10px] text-slate-600 font-mono">
            T={modelConfig.temperature.toFixed(2)}
          </span>
        </div>
        <div className="flex items-center gap-2 text-xs text-slate-500">
          {isLoading ? (
            <span className="flex items-center gap-1.5 text-blue-600 font-medium">
              <span className="h-1.5 w-1.5 animate-ping rounded-full bg-blue-600" />
              生成中...
            </span>
          ) : (
            <span>就绪</span>
          )}
        </div>
      </div>

      {/* 流式内容渲染区域 (带呼吸光标与 WAI-ARIA 动态区域通知) */}
      <div
        className="flex-1 overflow-y-auto p-4 text-sm leading-relaxed text-slate-800 font-sans"
        aria-live="polite"
        aria-busy={isLoading}
      >
        {completion ? (
          <div className="whitespace-pre-wrap">
            {completion}
            {isLoading && (
              <span className="inline-block h-4 w-1.5 ml-0.5 align-middle bg-blue-600 animate-pulse" />
            )}
          </div>
        ) : (
          <div className="text-slate-400 italic">
            点击下方运行按钮，观察当前模型的推断生成结果...
          </div>
        )}
      </div>

      {/* 底部提示词输入与控制坞 */}
      <div className="border-t border-slate-100 p-3 bg-slate-50/40">
        <form onSubmit={handleSubmit} className="flex flex-col gap-2">
          <textarea
            value={input}
            onChange={handleInputChange}
            placeholder="输入测试提示词，支持 {{variable}} 动态插槽..."
            rows={3}
            className="w-full resize-none rounded-lg border border-slate-200 p-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
          />
          <div className="flex items-center justify-between">
            <span className="text-[11px] text-slate-400">
              按 ⌘ + Enter 快速执行
            </span>
            <div className="flex gap-2">
              {isLoading ? (
                <button
                  type="button"
                  onClick={stop}
                  className="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-100 transition-colors"
                >
                  中止生成
                </button>
              ) : (
                <button
                  type="submit"
                  disabled={!input.trim()}
                  className="rounded-lg bg-blue-600 px-4 py-1.5 text-xs font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors"
                >
                  运行测试 (Run)
                </button>
              )}
            </div>
          </div>
        </form>
      </div>
    </div>
  );
};

6. 生产落地常见陷阱与避坑指南 #

在大型团队将 AI 提示词沙盒设计落地为生产级应用时，以下是最容易踩坑的三个关键问题与排错方案：

陷阱 1：流式 Token 高频推送引起的 DOM 重排与视口抖动 #

  • 现象描述：在大模型高速流式吐字时（如 60~100 tokens/s），界面频繁微小跳动，导致浏览器 CPU 占用率激增，用户无法平滑向上滚动查看历史内容；
  • 核心成因：每一次接收到 SSE 数据帧均直接触发了外层容器的高度重计算，且没有锁定滚动视口高度；
  • 排错方案：在组件外层容器设置固定的弹性高度（flex-1 min-h-0）与 overflow-y: auto，在前端实现节流渲染（RAF - RequestAnimationFrame 批量更新 DOM），并在用户向上滑动时自动暂停强制吸底滚动行为。

陷阱 2：长代码块与 Markdown 嵌套撑破双屏对比容器 #

  • 现象描述：当双模型对比模式开启时，某一模型输出了未换行的超长单行代码（如宽表格或超长正则表达式），导致该列直接将另一列横向挤出屏幕外部；
  • 核心成因：Auto Layout 子 Frame 未配置 Min W（最小宽度限制），内部文本容器未开启 word-break: break-word 或 overflow-x: auto；
  • 排错方案：在 Figma 中为两列均配置 Fill container 并添加 Min W: 380px；在交付样式中明确规范代码块预设样式为 pre { overflow-x: auto; max-width: 100%; }。

陷阱 3：移动端或小屏下的多栏排版溃缩 #

  • 现象描述：在平板或小屏笔记本（如 13 寸 MacBook）上打开沙盒时，三栏布局互相挤压，中间内容区压缩至无法正常阅读；
  • 核心成因：左侧与右侧面板均采用了固定的绝对宽度，缺乏断点响应策略；
  • 排错方案：建立严格的响应式断点规则：视口宽度 <1280px 时，左侧参数面板与右侧评估面板默认折叠为侧边滑出抽屉（Drawer），中间沙盒占据 100% 视口；双模型对比模式在移动端降级为上下垂直堆叠模式。针对更多异常场景的抢救方案可参考 Figma 常见报错与疑难故障诊断手册。
上一篇 Figma 特性标志与灰度发布控制台系统（Feature Flags & Canary Rollout Management Architecture）组件架构实战：从主干安全熔断开关（Master Kill Switch）、渐进式百分比放量滑块（Canary Rollout Slider）、用户分群规则卡片到 Variables 状态机与 Dev Mode 前端 LaunchDarkly / OpenFeature 代码交付 下一篇 Figma 企业级实时日志查看器与控制台流式终端系统（Log Viewer & Streaming Console Terminal Architecture）组件架构实战：从等宽网格排版（Monospace Grid）、日志等级分级高亮（Log Levels）、实时吸底追踪（Live Tail & Auto-Scroll）、上下文展开抽屉到 Variables 状态机与 Dev Mode 前端虚拟列表代码交付

🔥 相关教程推荐

查看更多教程
Variables 2026-11-15

Figma 表单实时校验与即时错误反馈系统（Form Validation & Real-Time Field Feedback Architecture）组件架构实战：从输入状态六态闭环、行内错误提示（Inline Error）弹性推挤、异步校验加载器（Async Spinner）到 Variables 状态机与 Dev Mode 前端 React Hook Form / WAI-ARIA 规范交付

深入剖析企业级表单设计系统核心难点——输入框实时校验与即时错误反馈系统架构。详解 6 态流转矩阵、Auto Layout...

阅读全文
Variables 2026-11-15

Figma 多维分面筛选与侧边属性过滤面板系统（Faceted Filter & Multi-Criteria Refinement Panel Architecture）组件架构实战：从抽屉/侧栏双模式视口、属性分组手风琴（Facet Group Accordion）、已选胶囊徽标联动（Filter Chips）到 Variables 状态机与 Dev Mode 现代前端交付

深入解析电商与复杂 SaaS 系统的核心数据发现中枢——多维分面筛选（Faceted Search Filter）与属性...

阅读全文
Variables 2026-11-15

Figma 支付收银台与银行卡结算系统（Checkout Cashier & Credit Card Payment Architecture）组件架构实战：从 3D 拟真卡片反光翻转（Card Flipping & Dynamic CVC）、卡组织动态识别、分期折叠面板到 Variables 金额状态机与 Dev Mode 现代支付代码交付

深度拆解高商业价值出海电商与 Fintech 核心结算中枢——支付收银台（Checkout Cashier）与信用卡交互...

阅读全文

🛠️ 核心手册与速查工具

高频手册与实用设计生产力工具直达
📘
Figma 中文用户指南 官方精译
系统化官方中文指南，零基础上手到进阶排版与组件管理。
🎯
FigJam 白板协作指南 团队协作
头脑风暴、敏捷站会、流程图与用户旅程图实战画板。
⌨️
全平台快捷键速查表 效率翻倍
macOS 与 Windows 双平台核心高频快捷键中英文对照。
📐
界面与画布上手指南 基础必读
图层面板、画布工具栏、右侧属性检查器全面图解。
🛠️
浏览器与环境优化配置 故障排查
WebGL 渲染、硬件加速开启与本地字体同步解决方案。
💡
最佳实践精选教程 深度进阶
Auto Layout v5、Variables 设计令牌与 Dev Mode 研发协同。

❓ 常见问题与答疑 (FAQ)

高频疑难解析与避坑指南
A

完全不需要。绝大多数核心功能在免费 Starter 计划中均可完整体验与实操练习，无需额外付费购买付费团队版。