课时

解析 OpenAI 的 ChatGPT Apps 的 UX 方法论：为何要坚持 chat-first，哪些场景下 App 的确更有帮助（结构化、多实体任务、分步向导），如何正确通过 auto‑launch 和 humble handoff 启动 UI，以及如何避免“惊喜小部件”这一反模式。另附：一个用于“意图分类”的 TypeScript 迷你示例、 system‑prompt 规则，以及一个小型 React 引导屏组件。

我们将把 inline 模式作为 ChatGPT Apps 的“默认”，来拆解它的适用场景：什么时候优于 fullscreen，如何在卡片、列表与轮播之间取舍，以及如何设计 CTA，让小部件保持轻量。以 GiftGenius 为例，我们看看数据类型 GiftSuggestion，组件 GiftCard/ GiftGrid/ GiftList/ GiftCarousel，通过 window . openai . actions . call 调用工具的方式，以及那些会把 inline 变成“迷你网站”的常见错误。

讲清楚在 ChatGPT Apps 中，何时以及为何要从 inline 切换到 fullscreen， displayMode 的基础机制是什么，如何通过 requestDisplayMode 安全地请求宿主切换模式，以及为什么 PiP 是一个“娇气”的模式且必须提供回退方案（fallback）。我们将设计一个 fullscreen 向导（wizard），把状态放到更可靠的层中，并讨论“video + chat”的媒体场景、移动端特性，以及常见的 UX 与开发错误。

本讲解如何为 ChatGPT App 设计视觉风格，让它在 ChatGPT 内看起来像“原生”一部分：继承主题（light/dark）、使用设计 token 与 CSS 变量、克制的品牌强调、基础排版与间距栅格。我们将以 Tailwind 与 shadcn/ui 演示实操，讨论自适应（inline/fullscreen）、高度限制（ maxHeight）与 safe-area，以及无障碍要求 WCAG AA，并解释为何正确语义对 screen reader 与语音模式至关重要。

解析当 ChatGPT App 进入语音模式时，UX 与架构思维如何变化：voice 场景与文本场景有哪些差异，微可视的 “glanceable UI” 在小部件中的角色，如何将模型口述内容与界面呈现同步，如何为对话式指令设计工具，以及如何通过 tool_calls、 "pending" 状态与后台 jobId 处理延迟。另行讨论安全的确认流程（confirmation flows）与常见错误。