ai for designersMay 1, 20269 min read

提示词界面:全新的 UX 原语

提示词输入框就是新的按钮。一份把提示词界面当作一等 UX 原语来设计的实战手册,涵盖构成、模式、失败模式,以及上线前审查清单。

By Boone
XLinkedIn
prompt surfaces

提示词界面就是新的按钮。还把它当搜索栏来做的设计师,是在 2026 年交付一个 2018 年的产品。文本输入已经吞掉了表单、向导和大半个设置面板,而胜出的产品,都是把输入当作一等 UX 原语的,而不是一个挂着纸飞机图标的 textarea。

大多数团队依然在交付那个 textarea。一个光秃秃的矩形,一句写着“随便问点什么”的占位符,一个发送按钮,仅此而已。这就是一个妄想症患者版的搜索栏。真正的提示词界面是一个有构成、有可供性、有状态、有恢复路径的组件。

这篇文章是实操版。提示词界面到底是什么,每个好界面都具备的八个部分,会杀死它们的六种失败模式,当下最好的产品正在使用的六种命名模式,以及一份七问审查清单,三分钟就能告诉你,你的界面是原语还是占位符。

提示词界面不是 textarea

提示词界面是用户输入、围绕它配置、并从中读取结果的整个区域。输入框只是看得见的那部分。组件,是挂在它身上的所有东西。

输入框本身只是一个元素。带建议的空状态、附件槽、模型选择器、工具开关、发送可供性、流式输出区域、重新生成/编辑/分支控件,以及历史界面,才是其余部分。只设计那个框的团队,交付的只是冰山一角。

Cursor、Claude、Linear AI、v0、Lovable、Notion AI、Raycast AI、Vercel AI Playground。这些产品没有一个把输入当 textarea。每一个都交付了结构化的界面,输入只是进入一个可配置、可观察、可撤销交互的入口。这就是标准线。

体素渲染的单个超大提示词界面,被当作建筑来处理,周围漂浮着提及、附件、工具、模型的小标签,以及一个敦实的发送立方体
体素渲染的单个超大提示词界面,被当作建筑来处理,周围漂浮着提及、附件、工具、模型的小标签,以及一个敦实的发送立方体

有效的提示词界面的构成

八个部分。空状态、建议、附件槽、模型选择器、工具开关、发送可供性、流式输出区域、修订控件。少于六个的提示词界面都是不完整的。

空状态必须在不堆砌文字的前提下教会用户这个产品。Cursor 的命令栏展示最近的文件和最近的提示词。Notion AI 的斜杠菜单本身就是空状态,按意图分支。v0 提供一组起始提示词画廊,同时也是效果证明。“随便问点什么”是头号敌人。它逼用户自己发明使用场景。

建议是在半路迎接用户。内联芯片建议、最近提示词历史、上下文感知的补全。Cursor 的 @ 提及选择器是教科书级的例子,一次按键就能把提示词限定到某个文件、函数或文档。

附件槽让输入变成多模态。v0 允许用户粘贴一张截图,然后针对它提问。Claude 接受 PDF、图片和代码文件。Lovable 接受把 Figma 画框作为上下文。附件槽就是契约。

模型选择器、工具开关和发送可供性构成配置层。它们在事情发生之前,就告诉用户即将发生什么。Vercel AI Playground 把模型选择器做成最醒目的控件。Cursor 在提交前切换智能体模式还是内联编辑。把配置藏起来,用户就只能瞎猜。

流式输出区域和修订控件负责闭环。Claude 的 artifact 面板是已上线产品中最干净的例子之一。输出有自己的区域,提示词界面保持可用,用户可以编辑提示词或重新生成 artifact,而不会丢掉任何一边。

体素爆炸图,展示被拆成八个带标签组件块、悬浮在半空的提示词界面,细细的珊瑚色连接线表明它们属于同一个组件
体素爆炸图,展示被拆成八个带标签组件块、悬浮在半空的提示词界面,细细的珊瑚色连接线表明它们属于同一个组件

信任信号是承重细节

提示词界面是用户决定是否信任模型的地方。每一个可见信号,要么赢得信任,要么烧掉信任。

信任来自清晰。模型身份可见。工具调用在运行前列出,或在运行时流式展示。流式反馈是诚实的,而不是假装在干活的伪加载圈。撤销可供性一秒内就能触达。错误路径会说明什么失败了、为什么失败。这和优秀的智能体 UI所要求的功夫一样,只是范围缩到了输入。

最便宜的信任信号是停止按钮。没有可见停止键的流式响应,是一个充满敌意的界面。用户眼看着模型写出一个他们已经知道是错的东西,唯一的出路是关掉标签页。Claude、Cursor 和 v0 都提供了可见的停止键。大多数自研聊天 UI 都忘了。

杀死提示词界面的六种失败模式

如今线上的大多数提示词界面,至少踩中其中一条。修复方法一点都不玄。

空矩形。 一个 textarea,一句“我能帮你什么”的占位符,别无其他。用户得从零发明使用场景。修复:做一个结构化的空状态,配三到五个与真实产品能力挂钩的具体起手式。

无建议输入。 界面接受提示词,却从不提出提示词。高级用户自己摸熟了套路,新用户直接流失。修复:最近提示词、限定范围的建议(Cursor 的 @ 提及、v0 的选区选择器),以及按当前上下文校准的内联补全。

假死的流式加载圈。 模型在后台默默调用了十次工具,界面却只转着一个加载圈,用户完全不知道它意味着什么。修复:把真实的工作流式展示出来。工具调用可见,文件编辑可见,中间输出可见。

无法切换的模型。 产品替用户选了模型,还把选择藏起来。高级用户无法把重活交给更强的模型,在意预算的用户也无法把轻活交给更便宜的模型。修复:把选择器亮出来,给个合理的默认值,并按任务记住选择。

失忆界面。 每个新提示词都重置上下文。用户每一轮都要重新粘贴文件、URL、需求说明。修复:一个记忆芯片、一个固定的上下文槽,或者一个用户看得见、改得了的会话级范围。

破坏性重新生成。 重新生成按钮直接覆盖上一次输出,没有版本历史。用户丢了最好的那条回答,再也找不回来。修复:把重新生成做成分支,而不是覆盖,就像 Claude 的历史记录和 v0 的版本栈已经在做的那样。

提示词界面的模式库

六种命名模式,把感觉像原语的提示词界面和感觉像占位符的区分开来。重新设计任何东西之前,先从这份清单里取材。

限定范围的提示词。 输入框接受一个范围标记,约束模型被允许触碰的内容。Cursor 的 @ 提及选择器是经典例子。用户输入 @layout.tsx,提示词就被限定到那个文件。v0 有类似的由选区驱动的范围,用户点选画布上的一块区域,提示词就作用于该区域。限定范围能让含糊的提示词变精确,还不用用户多写一个字。

选区驱动的提示词。 用户在产品中选中某个东西,提示词界面随即出现,并把这个选区预先绑定为上下文。v0 在画布选区上这么做。Notion AI 在高亮文本上这么做。Linear 的 AI 会自动捕获 issue 范围。不要让用户去描述他们已经指过的东西。

内联工具开关。 界面把工具调用以开关或芯片的形式放在输入框上。Cursor 切换智能体模式、编辑模式和工具集。Raycast AI 暴露命令。Vercel AI Playground 暴露函数调用开关。用户在发送前就知道哪些工具已就绪。

记忆芯片。 一个常驻的可供性,显示模型对当前会话已经知道什么。ChatGPT 和 Claude 都有各自的变体。这个芯片可编辑、可移除、可见,整个诀窍就在这里。隐藏的记忆是披着功能外衣的泄露风险。

体素风两行三列网格,六个小界面方块,分别标着 SCOPED PROMPT、SELECTION-DRIVEN、INLINE TOOLS、MEMORY CHIP、BRANCHING、APPROVAL GATE
体素风两行三列网格,六个小界面方块,分别标着 SCOPED PROMPT、SELECTION-DRIVEN、INLINE TOOLS、MEMORY CHIP、BRANCHING、APPROVAL GATE

分支提示词。 重新生成是给对话分叉,而不是覆盖它。每个分支都是用户可以回去的已保存状态。Claude 的对话历史做到了这一点,v0 保留了生成 UI 的版本栈,Cursor 的聊天线程可以分支。实验变成一棵树,而不是一次赌场转盘。

需审批的工具调用。 在执行破坏性工具调用之前,界面会暂停,请用户批准、修改或取消。Cursor 的 composer 会拦住有风险的 shell 命令。Claude Code 把破坏性操作放在权限系统之后。ChatGPT Operator 在浏览器中拦住支付操作。对无法撤销的时刻要慢下来,并在执行前用大白话把动作展示出来。

这些模式可以组合。一个出色的提示词界面,通常把限定范围、选区驱动、内联工具和审批关卡合成一个连贯的组件。这些模式并不冲突,而是合奏。

七问提示词界面审查

任何 AI 输入在上线前都过一遍。如果有三项或更多不过关,这个界面就还没准备好。

  1. 空状态。 界面是在教用户该输入什么,还是直接甩给他们一个空白输入框?
  2. 建议。 界面是否会根据上下文、最近历史或选区,提出下一条提示词?
  3. 范围。 用户能否在不多写字的情况下,把提示词收窄到某个文件、选区、区块或会话?
  4. 配置可见性。 模型、工具和自主程度,是否在发送前就可见,而不是埋在设置抽屉里?
  5. 流式诚实度。 流式输出展示的是真实的工作,还是一个毫无意义的加载圈?
  6. 停止与修订。 流式过程中是否有可见的停止按钮,之后是否有非破坏性的重新生成?
  7. 记忆透明度。 用户能否看到并编辑模型在整个会话中记住的内容?

七项全过的界面,感觉像原语。三项或更多不过的界面,感觉像搜索栏。这两种结果之间的差距,正是AI 原生产品设计与 AI 外挂式产品的分水岭。

把提示词界面当真正组件来做的团队,在工程侧也往往把提示词当作组件来对待。这种纪律的回报是同一套逻辑。

FAQ

什么是提示词界面?

提示词界面是用户向其中输入提示词、围绕它配置、并从中读取结果的完整 UI 区域。它包括输入框、空状态、建议、附件槽、模型选择器、工具开关、发送可供性、流式输出区域和修订控件。把它当 textarea 是错误。把它当组件才是标准。

提示词界面和聊天输入框有什么不同?

聊天输入框是逐轮发送消息的框。提示词界面是一个可配置、可观察、可撤销的交互组件。聊天 UI 为对话而优化。提示词界面为目标清晰度、模型信任和任务吞吐量而优化。聊天输入框只是提示词界面的一种可能表现形式,而不是它的同义词。

提示词 UI 设计最常见的错误有哪些?

没有建议的空矩形、假死的流式加载圈、无法切换的模型、每次提示词都忘记上下文的失忆界面、会覆盖好输出的破坏性重新生成按钮,以及流式过程中缺失的停止按钮。每一个都能靠小改界面修好。没有一个能靠文案修好。

2026 年哪些产品的提示词界面做得最好?

限定范围提示词看 Cursor,可分支历史和 artifact 面板看 Claude,选区驱动提示词看 v0,嵌入式提示词看 Linear AI,斜杠菜单空状态看 Notion AI,选择器的克制看 Raycast AI,配置可见性看 Vercel AI Playground。没有一家把所有模式都做到满强度,这也是这个品类仍然大有空间的原因。

把输入当成产品来做

提示词界面是任何 AI 原生产品中最重要的组件,而大多数团队仍然把它当事后补丁来设计。一个 textarea,一个发送按钮,一句占位符,发布。从 Cursor 和 Claude 抬高标准的那天起,这套组合就烂掉了。

把输入当原语对待。做齐八个部分。避开六种失败模式。组合六种模式。跑一遍七问审查。最终走出来的产品,感觉像 2026 年,而不是换了新 logo 的 2022 年聊天侧边栏。

如果你想要一支把提示词界面当完整组件而不是 textarea 来交付的团队,雇用 Brainy。我们端到端设计 AI 原生产品 UI,从空状态到流式输出面板,在第一个用户敲下第一个字之前,就把信任信号内置好了。

Want a prompt surface that earns the click instead of explaining itself? Brainy ships AI-native product UI end to end, from the empty state to the streaming output panel.

Get Started

More from Brainy Papers

Keep reading