OpenAI工程师实测：白板草图拍照发Codex，几分钟生成可运行界面

设计师和前端之间那道「实现墙」，可能真的在被拆掉。OpenAI的工程师Roman和研究员Channing最近发布了一段演示：全程没有手写一行代码，只有白板、草图、拍照和说话，最终产出的却是一个带3D旋转地球仪、动画流畅、响应式完整的可交互界面。整个过程的核心工具，是Codex的多模态能力。

工作流全貌：五步从草图到原型

演示的起点是一个叫Wanderlust的旅行应用，它已有基本功能，但界面平淡。两人重设计的工作流如下：

1. 白板画草图：在白板上快速勾出新布局——左侧放3D旋转地球仪，用户可旋转地球、点击图钉查看目的地，右侧展示目的地详情，支持键盘左右键导航；
2. 手机拍照：画完直接用手机拍下白板；
3. 自然语言描述需求：打开对话界面，附上照片，用语音说出需求大意，「重新设计主屏幕，左侧3D旋转地球仪，右侧目的地详情，能流畅导航」；
4. Codex后台执行：模型自动引入Three.js，构建真实可交互的3D地球仪；
5. 视觉验证输出：几分钟后任务完成，界面可以直接运行。

值得注意的是，草图非常粗糙——而这正是重点。你不需要画得精美，模型能理解你的意图。人类的角色变成了创意决策者：决定「要什么」，而不是「怎么做」。

顺手加一个页面：Travel Log

趁Codex在后台工作，两人又回到白板，构思了第二个需求：一个叫Travel Log的旅行日志页面，包含旅行打卡清单、喝过的红酒瓶数、拍的照片数量和饼图等可视化内容。

同样的流程：拍照、描述、发送，额外要求移动端响应式并与现有风格保持一致。结果同样超出预期：Codex给出了多个设计方案供选择，最终页面功能完整、风格统一，甚至自动截取桌面端和移动端截图来「检查自己的工作」。

背后的关键：模型拥有了视觉反馈回路

这次演示最值得关注的不是效果多炫，而是工作机制的转变。研究员解释说，他们一直在做的核心工作是：让模型理解人类视觉，并用自己的「眼睛」检查输出。

这意味着模型不再是「盲写代码」、界面效果开盲盒，而是形成了一个视觉反馈闭环：对粗糙的白板草图，能读懂意图；对细节丰富的设计稿，能精确还原到像素级；对当前效果图，可以标注「这里我要调整」进行迭代。

对设计师意味着什么

把这套工作流浓缩起来就是：白板草图 → 拍照 → 自然语言描述 → AI编码 → 视觉验证 → 可运行原型。

对设计师而言，技术实现、库的选择、动画逻辑、响应式适配、风格一致性，这些原本需要前端介入的环节都被AI接管；设计师的价值进一步向「定义问题和判断好坏」集中。对独立开发者和小团队来说，过去需要一个前端才能验证的想法，现在一张白板照片就能出原型。

工具演进的方向已经很清楚：先让想法跑起来，再谈实现细节。真正稀缺的，是知道该做什么的那个人。