从指令到落地,五子棋也能玩3D版

引言

Vibe Coding 这一概念,最早可以追溯到 Andrej Karpathy(前特斯拉人工智能总监,OpenAI 创始成员之一)的一条推文。 根据 Karpathy 的描述,Vibe Coding 的核心要点可以概括为:

  1. 忘记代码的存在 (Forget the code even exists),开发者几乎不直接编写代码。
  2. AI 驱动的修复,即使是微小的错误,也交由 AI 修复,而非手动修改。
  3. 放弃代码审查 (Code Review),完全信任 AI 生成的代码,只关注最终结果,不满意则继续通过对话调整。

工作模式介绍

SOLO Coder 模式

SOLO Coder 主要是针对复杂的项目开发,适用于更专业的应用场景。一般情况下,开发者可以通过 Coder 来完成项目迭代、Bug 修复和架构重构等。该模式强调的是对已有项目的进一步完善和优化,提升产品的稳定性与功能扩展性。

Builder 模式

SOLO Builder 模式更具创新性,它是一款典型的 Vibe Coding 产品,与 Lovable 类似,它的特色在于从零开始构建产品 。与 Lovable 侧重于轻量级产品不同,SOLO Builder 能够利用 TRAE 强大的开发环境,真正实现大规模可用的产品,不会停留在简单的小工具上。

实践过程

最初我们设想的五子棋项目只需要一层棋盘,支持基本的功能如放大、缩小和移动。于是,输入了以下需求指令:

  1. 我要实现一个3D五子棋游戏,首先有一张透明的网格棋盘,可以自由移动、放大、缩小。
  2. 需要一些基本的游戏配置信息,如开始游戏、模式选择等。
  3. 游戏结束后,展示一些统计数据。

通过这些需求,我们获得了一个初步的产品需求文档和技术架构图,接下来我们开始逐步实施。

随后我们获得了创建了3D五子棋游戏的完整产品需求文档和技术架构文档。

错误修复与调整

在开发过程中,可能会遇到一些错误或细节问题,我们可以通过对话方式精确定位并解决问题。

还可以通过"选择元素"的方式,来精确问题所在位置,进行修复。

例如,当出现多层棋盘时,可以发出指令要求只显示一层棋盘,并确保其功能正常。如:

再持续对话的过程中,由于LLM框架的问题,他们不会主动删除无用代码,这可能会导致大模型产生幻觉和无法正确的修正正在使用的代码,所以再对话过程中,我们可以增加一些小技巧来规避这类型问题。可以发出指令要求如:

删除项目中没有使用到的 ts 代码。

通过这种方式,我们不断优化代码,确保项目需求与设计一致。

美化与UI设计

初步完成后,我们会对游戏的视觉效果进行进一步的美化。例如,可以通过指令要求棋盘的线条更加清晰,棋子的设计更具立体感,同时增加水波纹效果等。

具体指令如下:

美化棋盘和棋子的样式,棋盘线条更为细致,棋子的样式更有国际象棋的风格,并加入水波纹效果。

这些优化可以让最终产品更具吸引力,提升用户体验。

控制面板优化

为了让用户能够根据个人喜好调整游戏体验,我们添加了多个控制选项,比如阴影开关、纹理强度、清漆强度等。默认情况下,阴影关闭,纹理强度设为中等。

在控制面板增加"阴影开关/纹理强度/清漆强度"等参数,默认关闭阴影并启用中等纹理强度。

通过这种方式,用户不仅可以享受游戏的核心玩法,还能自定义视觉效果,增强互动性。希望在控制面板增加"阴影开关/纹理强度/清漆强度"等参数,也可以加上,默认关闭阴影且启用中等纹理强度。

问题反馈与修复

如果遇到无法通过文字清晰描述的问题,用户也可以上传图片。我们会根据图片反馈具体问题,并迅速做出修正。例如,某个网格样式存在问题时,可以直接反馈并请求修复。

图片中的网格样式有问题,请修复。 在使用过程中,如果无法清晰的描述问题,还可以上传图片。发送指令:图片中的网格样式有问题,修复这个问题。

通过持续的反馈和对话,最终我们得到了一个符合要求的 3D 五子棋游戏。

总结

整个开发过程充分体现了 Vibe Coding 的理念,通过与 AI 的持续对话和优化,开发者能够快速构建出功能完善且具有良好用户体验的产品。通过不断的需求调整和视觉优化,最终完成了这款 3D 五子棋游戏,展示了 Vibe Coding 在项目开发中的巨大潜力。

相关推荐
Lx3527 小时前
用 TRAE Work 排查 Smartbi 报表数据不一致:从 3 小时缩短到 20 分钟
ai编程·trae
zhouzhouya7 小时前
别让PRD榨干你的脑力——我是如何用TRAE Work把文档效率提升的
trae
anyup11 小时前
像这种问题千万别自己动手,否则你可太看不起 AI 了
前端·架构·trae
悟空码字15 小时前
与 AI 共造一件工具:我用 TraeWork 做出「群聊捕手 · AI 社群分析工具」的全过程
aigc·ai编程·trae
每天多多少少写点2 天前
基于 TRAE Skill 的代码到文档自动化实践
trae
豆包MarsCode5 天前
从内容选题到复盘,TraeWork 让 1 个人顶 1 支团队
trae
武雄(小星Ai)6 天前
2026 AI编程工具横评:Trae、Cursor、Copilot、Claude Code实测对比
ai·copilot·cursor·编程工具·trae·claude code·对比评测
豆包MarsCode7 天前
用 TRAE Work,1个人就能编写完一整套课程
trae
咖啡星人k7 天前
AI 编程工具集体变脸:Cursor 漏洞、TRAE 限额、Claude Code 数据收集风波
人工智能·安全·microsoft·cursor·trae·ai编程工具
梦想的颜色11 天前
2026 VibeCoding 工具链精选|IDE + 大模型成套组合推荐,按场景分级收录
ide·trae·ai 编程·vibecoding·国产海外 ai 编程方案·氛围编程成套配置·副业 ai 开发工具栈