OpenAI 内部团队亲自示范！超简单的AI+UI设计工作流

最近，OpenAI 的工程师 Roman 和研究员 Channing 发布了一段演示视频，展示了 Codex 的多模态能力如何彻底改变 UI/UX 设计的工作流程。

整个过程没有手写一行代码，只有白板、草图、拍照和自然语言描述。最终产出的却是一个带有 3D 旋转地球仪、流畅动画和响应式布局的完整交互界面。

一、全文速览图

二、起点：一个普通的旅行应用

演示的起点是一个名为 Wanderlust 的旅行应用（下图）。它已经有了基本功能：一个发现目的地的页面和一个对话式助手，但界面比较平淡：

于是，他和 Channing 走到了白板前。

三、白板上画草图

两人在白板上快速勾勒出了新设计的构想：

• 左侧放一个 3D 旋转地球仪
• 用户可以旋转地球、点击图钉查看目的地
• 右侧展示目的地的详细信息
• 支持键盘左右箭头导航

整个过程就像两个设计师在头脑风暴，随手画、随口说。草图非常粗糙，但这正是重点：你不需要画得精美，Codex 能理解你的意图。

四、拍照 + 自然语言输入

草图画好后，就更加简单了：

• 用手机拍下白板草图
• 打开 ChatGPT，添加一个 Codex 任务
• 附上照片，用自然语言描述需求

Roman 用语音输入的提示词大致是：

"重新设计 Wanderlust 的主屏幕，左侧显示一个 3D 旋转地球仪，右侧显示目的地详情。用户能流畅地在地球仪上导航，点击图钉查看目的地。"

五、顺手再加一个页面

趁 Codex 在后台工作，两人又回到白板，构思了第二个需求：一个叫 Travel Log（旅行日志）的新页面。这是一个统计仪表板，包含：

• 旅行打卡清单
• 喝过的红酒瓶数
• 拍摄的照片数量
• 饼图等可视化呈现

同样的流程：拍照、描述、发送。额外要求是确保移动端响应式，并且设计风格与现有应用保持一致。

六、结果：超出预期

几分钟后，任务完成。

Codex 自动引入了 Three.js，构建了一个真实可交互的 3D 地球仪。地球在旋转，城市图钉可以点击，点击后右侧平滑展示目的地详情。它甚至贴心地加上了一个工具提示，告诉用户“如何探索”。

点击地球上某个图钉，会展示该地详情：

Roman 看到效果后的反应是："Oh my god... That's incredible."

对于 Travel Log 页面，Codex 给出了多个设计方案供选择。最终效果不仅功能完整，而且设计风格与应用其他页面高度一致。

更关键的是，它自动验证了响应式布局，分别截取了桌面端和移动端的截图来“检查自己的工作”。

七、核心能力：模型拥有跟人一样的“视觉”能力

这次演示最打动我的不是最终效果多好，而是背后的工作机制。

Channing 解释说，他们一直在做的核心工作是：让模型能够理解人类视觉，并视觉化地检查自己的输出。

这意味着模型不再是“盲写代码”，界面效果开盲盒，而是拥有了一个视觉反馈回路。

当然，这里的“视觉”，并不只是读懂简单的草图，对于细节丰富的 Figma 设计稿，模型可以精确还原到像素级。甚至可以截取当前效果图，标注“这里我要调整”，进行迭代。

总之，输入的模态和精度完全取决于你的要求。

八、这对我们意味着什么？

让我们回顾一下整个工作流：

白板草图 → 手机拍照 → 自然语言描述 → Codex 自动编码 → 视觉验证 → 输出可运行的原型。

整个过程中，人类的角色开始变成创意决策者：决定“要什么”，而非"怎么做"。技术实现、库的选择（Three.js）、动画逻辑、响应式适配、风格一致性等等，这些全部由 Codex 处理。

这意味着，设计师和前端工程师们，将从“实现”的环节中解放出来，专注于"设计"和产品本身。