没有核弹爆炸💥，关于我如何用 Codex 一步步开发 web 游戏这件事...
AI 深度解读
背景
随着大语言模型和 AI 代码生成工具的快速发展，越来越多的人尝试用一句话让 AI 生成完整的 Web 游戏。然而，这类“一句话生成”往往带有随机性（即所谓的“抽卡”机制），不同用户得到的结果天差地别。来自 LINUX DO 社区的作者分享了自己使用 Codex（一款 AI 代码生成工具）开发宠物养成类 Web 游戏《星尘旅伴》的实践经验，总结了一套从需求文档、设计稿生成到美术资源处理、最终代码实现的工作流，并指出常见的误区。
核心内容
作者首先指出，直接让 Codex 根据一句话生成游戏往往不可靠，因为模型会随机发挥，导致界面风格混杂、缺乏图片资源，尤其在游戏开发中，没有设计稿的“自由发挥”很容易使项目失败（作者的第一款游戏因此作废）。为此，他提出了一套分步骤的开发方法：
-
生成需求文档（PRD）：Codex 可以根据需求生成简单的游戏开发文档，也可以先用 ChatGPT 生成更详细的需求文档。但作者不推荐直接让 Codex 根据 PRD 开发，因为前端界面往往混乱。
-
生成设计稿：核心思路是让 Codex 利用其内置的图片生成工具，先输出多个主页面设计稿。作者认为 Codex 的图片生成模型效果很好，设计稿审美在线。从中选出满意的底稿后，再让 Codex 根据底稿生成后续所有页面（或只生成核心页面）。最后，让 Codex 根据这些设计稿页面进行代码复刻。
-
使用官方插件辅助还原 UI：作者推荐使用官方的 Product Design 插件，该插件能更好地辅助还原设计稿的 UI 布局和样式。
-
处理游戏美术资源：
- 大型美术资源（如场景、角色）可以直接用 Codex 的图片生成工具逐一生成。
- 小型美术资源（如技能图标、物品图标、怪物静态图）若逐一生成，风格难以统一。最佳做法是让 AI 将一组图标在同一张图片上生成，并采用绿幕背景（亮绿色或洋红色），生成“精灵图集”（sprite atlas）。
- 得到图集后，让 Codex 移除背景（生成透明 PNG），并按图标边界进行分割。若图标大小不一，可以以透明边界作为抠图依据，提高提取准确度。
- 作者推荐使用官方的 Game Studio 插件辅助美术资源处理。
-
正式开发：拿到 PRD、设计稿和大量美术资源后，让 Codex 进行真正的游戏开发。在有设计图的情况下，Codex 能极大程度还原游戏界面。后续再针对有问题的 UI 或资源应用，逐一向 AI 提出修正。
-
摒弃对像素风格的执念：作者认为很多人习惯要求 AI 开发像素风格游戏，但像素风格的美术资源没有圆滑边界，无法直接用代码复刻（例如像素风的按钮只能靠图片拼接），导致多屏幕适配困难。而 AI 的图片生成工具已经能产出更精细的美术资源，因此建议放弃像素风格，改用更现代的矢量或高分辨率风格。
-
最终成果：作者发布了《星尘旅伴》的纯游戏 Demo（无登录、无引流），网址可直接访问，作为案例展示。
关键要点
- 不要让 Codex 直接根据一句话或 PRD“自由发挥”开发游戏，而是先通过其图片生成工具生成设计稿，再基于设计稿进行代码复刻。
- 设计稿是确保游戏 UI 风格统一、布局合理的关键，Codex 的图片生成模型在审美上优于其直接生成的页面代码。
- 小图标类美术资源应一次性生成在同一张图上（绿幕背景），再通过背景移除、分割等步骤提取，避免风格不一。
- 使用官方插件（Product Design、Game Studio）可以显著提升还原 UI 和处理美术资源的效率。
- 避免使用像素风格：像素风格的美术资源难以用代码直接绘制，且适配不同屏幕尺寸非常复杂，而 AI 生成的精细资源更易处理。
- 整个流程需要多次迭代修正——开发过程中让 AI 逐一修正有问题的 UI 或资源应用。
意义与影响
该工作流为使用 AI 代码生成工具（如 Codex）开发 Web 游戏提供了一套可复用的方法论，显著降低了“一句话生成”的随机性和失败率。通过将设计与开发分离、借助 AI 的图片生成能力、以及合理利用官方插件，即使非专业开发者也能相对系统地完成一个具有统一视觉风格和完整美术资源的游戏 Demo。同时，作者对像素风格的批判提示开发者应顺应 AI 工具的能力特点，选择更适配的技术路线。这篇分享不仅有助于个人开发者快速上手，也为社区探索 AI 辅助游戏开发提供了有益参考，有望推动更多高质量、可交互的 AI 生成游戏作品出现。