一个人开发 Dice Paradise：我是如何用 ChatGPT、Codex 和 Claude Code 完成整个游戏前端的

摘要

随着 AI 编程工具的快速发展，越来越多的开发工作正在发生变化。从需求设计到代码实现，从 UI 设计到项目架构，AI 正逐渐成为开发者的重要助手。本文以我正在开发的《Dice Paradise》项目为例，分享我如何借助 ChatGPT、Codex 和 Claude Code，从零开始完成一款快艇骰子改编游戏的前端开发，以及在实践过程中获得的经验与思考。

---

一、项目缘起：为什么开发 Dice Paradise

《Dice Paradise》是一款基于传统快艇骰子玩法改编的休闲多人游戏。

最开始接触快艇骰子时，我发现这类游戏虽然玩法简单有趣，但很多产品的界面风格较为传统，视觉表现也比较单一。

因此我萌生了一个想法：

如果将快艇骰子的核心玩法保留下来，同时加入更加年轻化、轻松化的视觉设计，会不会带来不一样的体验？

于是，《Dice Paradise》诞生了。

在设计理念上，我希望它不仅是一款骰子游戏，更像一个充满活力的海岛乐园。

整个游戏围绕海洋与度假主题展开，加入了游艇、海鸥、热气球、金币、星光粒子等元素，希望让玩家在进入大厅时就能够感受到轻松愉快的氛围。

---

二、一个人开发最大的挑战

对于学生开发者来说，独立完成一个项目往往需要同时承担多个角色。

在开发 Dice Paradise 的过程中，我既是：

• 产品设计者
• UI 设计者
• 前端开发者
• 测试人员
• 项目管理者

传统情况下，一个完整项目通常需要多人协作完成。

而对于个人开发者来说，最大的难点并不是写代码，而是如何在有限时间内兼顾设计、开发与维护。

这也是我开始尝试使用 AI 辅助开发的重要原因。

---

三、ChatGPT：我的产品经理与设计顾问

在整个项目中，ChatGPT 更多承担的是需求分析和设计规划的角色。

很多页面并不是直接开始写代码，而是先通过不断讨论确定设计方案。

例如首页大厅的设计。

最初版本虽然功能完整，但整体画面显得比较空旷。

经过多轮讨论后，我决定在页面两侧增加动态装饰元素：

左侧区域：

• 漂浮骰子
• 金币特效
• 星光粒子

右侧区域：

• 海鸥动画
• 热气球动画
• 飞鱼动画
• 小飞艇动画

这些元素不会影响玩家操作，但能够让整个大厅更具生命力。

除了首页之外，排行榜、活动中心、个人中心、房间系统等页面的规划，也都经历了类似的设计过程。

在这个过程中，我逐渐意识到：

AI 不仅能够生成内容，更能够帮助开发者整理思路。

---

四、Codex：将想法快速变成代码

如果说 ChatGPT 更像产品经理，那么 Codex 更像开发搭档。

在项目开发过程中，我经常会遇到以下情况：

刚完成设计方案，马上就想验证实际效果。

过去可能需要花费大量时间手动搭建页面结构，而现在可以通过 AI 快速完成基础代码生成。

例如：

• 页面布局搭建
• React 组件拆分
• TypeScript 类型定义
• 样式代码生成
• 动画效果实现

虽然生成的代码并不一定能够直接投入生产环境，但它大幅缩短了从想法到原型的时间。

很多时候，一个页面的基础框架几分钟内就能够搭建完成。

---

五、Claude Code：帮助项目保持可维护性

随着项目规模不断扩大，新的问题开始出现。

页面越来越多：

• 首页大厅
• 登录注册
• 排行榜
• 活动中心
• 房间系统
• 对局页面
• 个人中心

如果缺乏统一规范，代码很容易变得混乱。

因此我开始尝试通过 Claude Code 结合项目规范进行开发。

为了让 AI 更准确地理解项目，我专门编写了 AGENTS.md 文件。

其中记录了：

1. 项目目录结构

明确每个模块的职责范围。

2. 命名规范

统一组件、文件和变量命名方式。

3. UI 规范

保证整体视觉风格一致。

4. 开发约束

避免 AI 随意修改已有结构。

这样做之后，AI 生成代码的稳定性明显提高，项目维护成本也大幅降低。

---

六、开发过程中踩过的坑

任何项目都不会一帆风顺，Dice Paradise 也一样。

（一）透明背景问题

这是开发过程中出现频率最高的问题之一。

很多时候我的需求是：

“仅边缘透明，中间区域保持不变。”

但 AI 往往会误解成：

“整个面板全部透明。”

因此后来我学会了更加精确地描述需求：

只处理纯黑色区域，其余部分保持完全不变。

这一经验也让我认识到，提示词的准确性会直接影响最终结果。

---

（二）图片比例问题

项目中的背景图基本采用 1920×1080 标准比例。

如果比例发生变化，就可能导致：

• 元素变形
• 页面错位
• 布局失衡

因此后来我几乎每次都会特别强调：

严格保持 16:9 比例，不允许拉伸和裁切主体内容。

---

（三）AI 理解偏差问题

AI 的能力很强，但并不能完全理解开发者的真实意图。

例如：

我只希望删除一个按钮。

AI 却重新设计了整个界面。

因此我逐渐总结出一个原则：

需求描述越具体，生成结果越接近预期。

---

七、AI 给我带来的最大改变

在使用 AI 之前，我更多是按照传统方式开发项目。

一个页面从设计到实现，往往需要经历较长时间。

而现在，很多重复性的工作都能够快速完成。

AI 带来的并不仅仅是代码生成能力。

更重要的是，它降低了个人开发者完成复杂项目的门槛。

过去需要一个团队协作完成的工作，现在一个人也有机会尝试。

对于学生开发者而言，这种变化尤为明显。

---

八、未来规划

目前 Dice Paradise 仍处于持续开发阶段。

接下来计划完善以下功能：

1. 房间匹配系统
2. WebSocket 实时聊天
3. 人机对战模式
4. 成就与勋章系统
5. 游戏数据统计
6. 后端接口联调
7. 排行榜与活动系统优化

希望通过不断迭代，让项目逐渐从一个课程实践项目成长为真正能够运行的完整作品。

---

九、结语

回顾这段时间的开发经历，我最大的感受是：

AI 并没有让开发变得毫不费力，但它确实让开发者拥有了更强的执行能力。

对于个人开发者来说，AI 最重要的价值并不是代替思考，而是帮助我们把更多时间投入到真正有创造性的工作中。

《Dice Paradise》还在不断成长，而我也仍在学习。

希望未来回头看时，这不仅仅是一款游戏项目，更是一段值得记录的开发旅程。

以前，一个人开发游戏像是在独自划船；现在有了 AI，更像是拥有了一支随时待命的船员团队。