原文核对：2026-10-13 · 中文正文 · 英文提示词与演示
场景定位
结合 Codex 和 ImageGen 探索视觉方向，实现最小有用原型，并在浏览器中验证。
- 难度
- 中级
- 时间跨度
- 1 小时
适合用于
- 用可运行原型比书面计划更能回答问题的早期创意。
- 实现前需要视觉探索的 Web 应用、仪表盘和工具。
- 希望继续投入前先通过原型验证产品想法的团队。
相关工具
用 gpt-image-2 生成视觉概念、UI 草图、素材方向和变体，再实现选定方案。
在真实浏览器中检查运行中的应用和修改路由，每次小幅 UI 改动后都验证。
Playwright ↗针对新 Web 应用、仪表盘、网站和前端原型，先设计概念，再在浏览器中验证实现。
Build Web Apps ↗浏览器游戏概念验证使用 Game Studio，明确可玩循环、素材流程、HUD、引擎和试玩。
Game Studio ↗起步提示词
英文原文 · 可复制后按实际材料修改
Use ImageGen to generate a high quality UI mockup for the following idea, then use the [Build Web Apps plugin/Game studio plugin] to implement it:
[describe the idea, target user, and the main workflow]从视觉方向开始
GPT Image 2 擅长生成高质量 UI 草图，可以用图像生成探索新想法的视觉方向。
有两条路径：
- 通过 ImageGen 技能迭代视觉，满意后让 Codex 按图构建原型。此时选择 Codex，创建新对话并上传最终图片，不要直接沿用原 ChatGPT 对话；用户附件能帮助 Codex 更好地参考。
- 使用插件直接描述想法，让插件生成视觉方向并处理后续步骤。
使用插件
如果实现前不需要先反复调整视觉，可以直接向插件描述想法。
Web 应用、仪表盘、创意网站和以前端为主的工具使用 Build Web Apps：先生成设计、在代码中匹配，再通过浏览器对照概念。
浏览器游戏使用 Game Studio：扩展游戏前先明确玩家动作、首个可玩循环、引擎、素材流程、HUD、控制和浏览器测试。
迭代流程
概念验证应聚焦能快速实现、供团队验证的 MVP。可以使用 Playwright interactive，让 Codex 检查实际效果。
首版运行后，在同一对话中提出范围明确的修改，持续迭代：
官方提示词
英文原文 · 可复制后按实际材料修改
Add a new [feature/bug fix/etc.]. Use Playwright interactive to verify your changes.
Feedback to apply:
[paste comments, screenshots, or review notes]展开英文原文对照
Use Codex with ImageGen to turn a rough idea into a visual direction, implement the smallest useful prototype, and verify it in a browser.
Start with a visual direction
GPT Image 2 is great at generating high quality UI mockups. Instead of starting from scratch when exploring new ideas, you can leverage image generation to get a visual direction.
You can do this in two ways:
- Iterate on the visual direction using the ImageGen skill, and once you are satisfied with the proposed UI, you can ask Codex to build a prototype matching the visuals. In that case, select Codex, start a new chat, and attach the final image you want to implement rather than continuing the ChatGPT chat directly. Codex does better when it can reference a user attachment.
- Use a plugin and simply describe your idea: the plugin will generate the visual direction for you and handle next steps.
Leverage a plugin
If you do not need to iterate on the visual direction before starting the implementation, you can use a plugin and describe your idea.
Use the Build Web Apps plugin for web apps, dashboards, creative websites, and frontend-heavy tools. Its workflow pushes Codex to generate a design first, match it in code, and use the browser to compare the result back to the concept.
Use the Game Studio plugin when the proof of concept is a browser game. That path should define the player verbs, first playable loop, engine, asset workflow, HUD, controls, and browser test before expanding the game.
Iteration workflow
A good proof of concept is scoped to an MVP that can be implemented quickly and validated with the team. If you want to make sure the MVP is working as expected, you can use Playwright interactive to let Codex verify its work.
Once you have a first version working, you can iterate on it by asking for scoped changes in the same chat:
官方提示词
英文原文 · 可复制后按实际材料修改
Add a new [feature/bug fix/etc.]. Use Playwright interactive to verify your changes.
Feedback to apply:
[paste comments, screenshots, or review notes]