你知道 OpenAI 自己也在「秀」Codex 吗？#

很多开发者用 Codex 写业务代码、修 bug、做重构，但很少有人注意到，OpenAI 官方维护了一个 Codex Showcase 项目展示区。里面放着他们自己用 Codex 构建的完整项目，每个都附带了初始提示词和构建思路。

这不是普通的 demo。这些项目展示了 Codex 在不同场景下的最佳使用方式，也暴露了一些大多数用户不知道的隐藏功能。比如，你可以在 Codex 中用 $imagegen 技能直接调用图像生成，或者用 @Build 插件让 Codex 控制你的桌面应用。

今天我们拆解其中三个项目，看看 OpenAI 自己是怎么「驾驭」Codex 的。

项目一：用 Codex 做一个地牢探索游戏#

OpenAI 的第一个展示项目叫 Swifty Dungeon，一个用 SwiftUI 写的第一人称地牢探索游戏。有贴图、有精灵图、有遥测数据，不是玩具级别的东西。

他们给 Codex 的初始提示词是这样的：

Use $imagegen and @Build macOS apps to build a native macOS first-person dungeon crawler.

First, use $imagegen to generate a screenshot/interface of the ideal app: a native SwiftUI Liquid Glass app with the playable dungeon view in the center, the character and on-screen arrow keys in the bottom area, and player status plus inventory in the right sidebar.

这段提示词里藏着两个关键信息。

第一个是 $imagegen 技能。 在 Codex 应用中，$ 前缀可以显式调用一个技能。输入 $ 后会弹出可用技能的下拉菜单，选择后 Codex 就会在生成代码之前先用图像生成工具做一张界面设计图。这个工作流非常聪明，因为它先用视觉参考锚定了设计方向，减少了后续反复调整 UI 的次数。

第二个是 @Build 插件。 @ 前缀用于手动调用插件。@Build 插件启用了 Computer Use（桌面操控）能力，让 Codex 不仅能写代码，还能直接操作 macOS 应用。这意味着你可以让 Codex 打开 Xcode、点击按钮、切换窗口，真正实现「从零到运行」的全流程自动化。

项目二：用一句话做出高端落地页#

第二个展示项目是一个手表品牌的营销落地页，带有视差滚动效果。当用户向下滚动时，手表的机械零件会逐步组装成完整的设计，每一步配有交替出现在左侧或右侧的文字说明。

提示词如下：

Create a new landing page for a complicated watch design with parallax effects. First generate the concepts using imagegen, then create the visual assets: each one a different piece of the watch mechanical design, and when scrolling, they should assemble into the whole design.

For each piece, there should be an accompanying paragraph on the left or right (alternate), and scrolling brings up the next paragraph and the next piece with a fading animation for the previous paragraph. I want a really smooth, traditional yet modern design - think high end luxury Swiss watchmaking.

这个提示词的亮点在于「分步描述」。它没有笼统地说「做一个好看的落地页」，而是把交互逻辑拆解成了具体的行为：滚动时零件组装、文字交替出现、淡入淡出动画、瑞士高端制表风格。

更重要的是，这个项目揭示了一个经济现实。以前做这种级别的落地页，需要请专业的前端开发和设计师，成本不低。现在，有一定技术基础的人用 Codex 几分钟就能搞定。

文章作者自己也用类似的提示词给 Newsletter 做了一个赞助商落地页，效果让他非常满意，而且是从 Notion 迁移过来的，几乎没花什么力气。

项目三：程序化城市生成器#

第三个项目最复杂，是一个浏览器端的 3D 程序化城市生成器。用户可以实时调整城市布局、密度、天际线和各种视觉参数。

提示词相当长，但结构非常清晰：

Generate a React app to do procedural 3D city generation. Start by generating a mockup of what a beautiful editor for procedural generation might look like, then implement it staying as close as possible to the mockup.

There should be a full screen view of the generation, then a floating control panel on the right with controls for city size, city density, block size, street pattern, commercial vs residential vs industrial balance, and presets like industrial belt or residential area.

Add skyline controls such as average height and height variance. Add city style controls for modern glass, European, Tokyo dense, cyberpunk, and other styles…

Add world controls for river probability, parks percentage, terrain roughness, and terrain style switchers like coastline or mountains…

这段提示词的核心策略是「先设计再实现」。它先让 Codex 用图像生成做一个编辑器的 mockup，然后要求 Codex 尽可能贴近这个 mockup 来实现。

这种「设计先行」的工作流值得学习。如果你要从零开始做一个新项目，不妨先用对话工具（比如 ChatGPT）写一份产品需求文档和线框图，再把这些材料喂给 Codex 的 Plan 模式。这样出来的结果会比直接说「帮我做一个 XXX」好得多。

三个项目的共同启示#

拆解完这三个项目，有几个共性值得注意。

第一，提示词的详细程度和最终质量直接挂钩。 那个地牢游戏的提示词并不长，但每个关键点都点到了。城市生成器的提示词更长，因为它需要描述的功能更多。不要怕提示词太长，Codex 处理长提示词的能力很强。

第二，善用 $ 技能和 @ 插件。 大多数用户只知道在 Codex 里打字描述需求，但 $imagegen 和 @Build 这样的扩展能力才是真正的效率倍增器。前者让 Codex 在写代码前先画设计图，后者让 Codex 能直接操作你的桌面应用。

第三，「先 mockup 再实现」的工作流。 对于 UI 密集型项目，先让 Codex 生成一个视觉参考，再基于这个参考写代码，效果远好于从零开始盲写。这个思路不仅适用于 Codex，也适用于 Cursor、Claude Code 等其他 AI 编程工具。

第四，指定技术栈和约束条件。 城市生成器的提示词明确要求使用 React，手表落地页明确要求了视差滚动和交替布局。越具体的约束，越能帮 Codex 产出符合预期的结果。

写在最后#

OpenAI 的 Codex Showcase 本质上是一份「官方最佳实践指南」。它告诉你的不是 Codex 能做什么，而是 OpenAI 自己认为 Codex 应该怎么用。

如果你还在用最基础的方式和 Codex 交互，不妨去翻翻这个 Showcase，看看那些初始提示词。你可能会发现，Codex 的能力比你想象的要大得多，只是你需要换一种方式和它对话。

想要高效使用 AI 编程工具，核心不是工具本身有多强，而是你能不能把脑子里的需求翻译成工具听得懂的语言。这一点，OpenAI 的工程师们已经给你打了样。

参考来源：OpenAI shows you how to use Codex with their showcase — AugmentedSWE Newsletter, 2026-05-26