和AI一起搞事情#4. 小白用claude code做游戏究竟能踩多少坑

安垚發表於 2026-4-29 07:40:00

和AI一起搞事情#4. 小白用claude code做游戏究竟能踩多少坑

话接上回，中医游戏第一版惨遭滑铁卢。
我把90%的锅扔给了"需求定义不清楚"，但万万没想到跨过需求的坑，就跳进UI的坑，出了UI的坑又进入测试的坑，总之是花式踩坑。当前项目代码在这里tcm_odssey
<h2 id="先汇报一下进度">先汇报一下进度</h2>
因为把大量时间花在了UI和地图上，导致这周还没做到最核心的对话环节。
目前只是有了： 
✅ 游戏引导 
✅ 外景地图 
✅ 药园和诊所两个核心内景 
✅ 问诊、煎药、配伍的小游戏壳子 
✅ 让玩家走起来了（请先忽略人在房檐上走这件事……毕竟我主机装不了TileMap Editor，除了Linux Shell啥也用不了）
小游戏、NPC对话啥的都还在doing中
<h3 id="药园种田逻辑">药园（种田逻辑）</h3>
药园后续是"种田玩法"，用于种植植物类药物，以及收集从秘境探索回来的动物、金石类药物。
NPC会教授玩家药物炮制技术，玩家需要学习药物的四气五味、升降浮沉才能解锁种子。
<img alt="herb_area.gif" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073705847-188421493.gif" class="lazyload">
<h3 id="诊所问诊配伍煎药">诊所（问诊+配伍+煎药）</h3>
诊所后续会做三个小游戏：问诊、配伍、煎药一条龙服务。同时中医npc会拥有Agent内核，可以自主教授玩家方剂和内科知识。
诊所地图需要无限扩展，每个诊所NPC只教授一类知识，学完就能解锁下一个诊所。
<img alt="clinic_area.gif" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704925-1195334534.gif" class="lazyload">
<h2 id="第一部分需求澄清这次终于学聪明了">第一部分：需求澄清——这次终于学聪明了</h2>
【Brainstorming/grill】不要上来就写计划，先让AI主动刨根问底质疑一切
为什么你的方案AI执行起来总是错误百出？
或许因为你的方案本身就存在很多可以卡的Bug。
说白了，需求没有被完全澄清，所以AI在所有不完整的需求中，自己YY了一部分。
而这个问题可以通过<code>superpowers:brainstorming</code> 技能缓解，它会先了解你的需求，然后ask question one by one，进行需求澄清。
并且在brainstorming阶段，你可以适当引导模型通过视觉HTML直观展现方案对比——在很多前端设计的决策上，视觉效果比文字效果直观太多。
<img alt="图片" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073703873-704019400.jpg" class="lazyload">
有了brainstorm进行需求澄清之后，我成功拥有了比之前丰富、详细N个数量级的设计文档。
然后再用<code>superpowers:writing-plans</code>技能，把已有的设计文档按phase进行工作拆解——这一步才是是大家经常使用的 <code>/plan</code> 功能在做的事情
<img alt="截图_选择区域_20260415083319" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704514-1089108412.png" class="lazyload">
整个项目文字最多的不是代码，而是设计文档和规划文档。
<img alt="图片" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704006-880056175.jpg" class="lazyload">
这一次有了详尽的设计文档和细分的任务计划，直到phase1执行完，我打开浏览器验收一切都非常顺利和丝滑。
对需求花了很久，代码只写了2个小时。
而我万万没想到，迈过"需求设计"的坑之后，还有更大的"UI设计"的坑在等着我。
<h2 id="第二部分开发环节技能解锁指南">第二部分：开发环节——技能解锁指南</h2>
在这个项目开发过程中，我陆续解锁了<code>superpowers</code>和<code>everything-claude-code</code>的多个技能。
而且你会发现，每个优秀的技能，其实都是在日常观测到模型Failure、Diverge的模式后，持续总结迭代出来的。
<h3 id="search-first调研先行别平地起高楼">【search-first】调研先行，别平地起高楼</h3>
多数情况下，在需求阶段单独使用 <code>/brainstorming</code> 已经足够。
但其实在测试计划澄清、开发计划澄清上，也可以引入 <code>/brainstorming</code> 来帮你反复推敲：当前技术方案是否足够全面、合理。
但有时候，受限于模型本身的知识粒度（压缩后的知识更侧重High-Level的技术实现），模型在给出技术方案时，更倾向于平地起高楼的纯手搓方式。
但其实很多时候，在某些开源方案、已有技术上二开，往往能节约很多时间，少走很多弯路。
这时候我推荐 <code>everything-claude-code:search_first</code>,技能包括根据不同问题，分别去搜索github、mcp、skill、npm包等资源，尝试找到已有的解决方案。
<h3 id="sysmetatic-debugging盲目修复是浪费时间的">【sysmetatic-debugging】盲目修复是浪费时间的</h3>
当发现bug时，模型多数情况下第一反应是猜测问题、盲目尝试修复。 
然后反复失败，或者看起来问题解决了，但实际上引入了硬编码、补丁式修复等各类其他问题。 
最开始我在CLAUDE.md中补充了简单的问题排查规则，后面发现 <code>superpowers:/systematic-debugging </code>已经提供了相对全面的技能解决方案。它采用了4步问题修复法：
<ol>
<li>排查问题根源</li>
<li>深入模式分析</li>
<li>提出假设并测试</li>
<li>实施修复</li>
</ol>
但奈何该技能自动触发概率属实不高。很多时候我一个没看见，AI就已经开始无脑修复问题了。所以我在 CLAUDE.md 中增加了直接的技能引用，并补充了问题记录。
尤其在游戏场景，AI会反复陷入同一个问题，每次都要重新进行修复。所以记录问题修复也很重要。
<img alt="图片" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073703894-2070462520.jpg" class="lazyload">
<h3 id="interleave-thinking复杂问题多思考">【interleave thinking】复杂问题多思考</h3>
虽然当前模型都已支持在工具调用之前 
进行思考，但其实大家都能观测到：
在生成最终答案之前和工具调用之前，模型的thinking effort是显著不同的。
那如何动态、在必要时刻提升模型的思考level呢？
其实plan、brainstorming、write-plan这些技能都能提供类似的效果，因为它们强制模型只使用非Coding之外的工具——也就是在执行之前先用更多token进行思考。
但设计都有些重，所以放到整个开发链路中并不太合适。
而 sequential thinking 或者 interleaving thinking 相关的技能，都能提供更轻量化、穿插在工具调用中的深度思考能力。 
<img alt="image.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073706772-1312078445.png" class="lazyload">
<h3 id="refactor-leaner时刻保持工作区整洁">【refactor-leaner】时刻保持工作区整洁</h3>
每个大的task开始或结束，请对当前工作区进行必要清理。不要小看这个看起来只属于强迫症和洁癖的技能。
因为很多次任务中间走偏，竟然是因为用错了测试脚本，或者模型找错了设计文档。
所以保留唯一可用真相，删除所有临时脚本和文档，是非常重要的。
最开始我尝试了<code>everything-claude-code:refactor-cleaner</code>，不过主要针对脚本类文件。
<img alt="截图_20260416080120" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704114-195431611.png" class="lazyload">
后面我在此基础上补充了一个clean-workspace技能，来补充进行文档和其他测试类脚本的清理，无他一个干净的工作区真的太重要了。 
<img alt="图片" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073703809-1904641757.jpg" class="lazyload">
<h2 id="第三部分-测试和问题修复">第三部分：测试和问题修复</h2>
上一版虽然我意识到了测试的重要性，但我给出的指令，仅仅是：
<blockquote>
"请根据当前phase1的开发范围，设计必要的功能测试、端到端测试。"
</blockquote>
然后模型也会象征性地给你一份很丰富的测试规划。但很多次，模型全面测试通过后，一打开网页——崩溃了、黑屏了、啥也没有了。
于是我开始在一次次崩溃后复盘：
<blockquote>
为何测试了但还是不能用？是测试时AI撒谎了，测试不全面，还是怎样？
</blockquote>
后来发现，最严重的测试问题就是这几类：
<ul>
<li>缺少明确的测试目标</li>
<li>或光有目标但缺少验收标准</li>
<li>还包括因为上下文焦虑带来的"测试失败模型选择跳过"</li>
<li>以及部分类型的测试缺失</li>
</ul>
比如在测试地图环节，计划是AI多模态模型对场景拼接后的效果进行测试。 
AI说："很完美了！"
结果我一打开——天塌了。
![截图_选择区域_2026040616122<img alt="image.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073705376-102101551.png" class="lazyload">
后来我看plan，发现AI分别测试了背景和每个建筑瓦片……
所以敲黑板：测试最重要的是要有明确的测试目标和验收标准。
后面我试用了需求文档设计的标准，开启brainstorming，根据当前的开发功能澄清：
<ul>
<li>都有哪些需要设计验收的</li>
<li>验收标准是什么</li>
</ul>
冒烟测试、功能测试、回归测试、UI设计测试、E2E测试，哪个都不能少。
<img alt="图片" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704164-201543488.jpg" class="lazyload">
注意这里要强调：目标和标准是不一样的。二者缺一不可
<ul>
<li>UI测试是目标</li>
<li>你的游戏风格视觉要满足什么要求是标准</li>
</ul>
<h2 id="第四部分做游戏ui好难啊">第四部分：做游戏UI好难啊</h2>
<h3 id="ui一定要抽卡么">UI一定要抽卡么？</h3>
这里采用了纯AI指令生成方案。
我只提供核心建筑布局,然后和Gemini多轮对话对整个页面的元素进行丰富。
以下是小镇外景的AI生图提示词（节选）：
<pre><code>2D像素艺术游戏地图，完全正俯视角度（orthogonal top-down view），严格的横平竖直井字形网格布局，传统中医小镇"药灵山谷"。

【地图整体结构】：采用九宫格井字形布局，横向三条街道（北街、中街、南街），纵向三条街道（东街、中央大道、西街），街道互相垂直交叉。所有道路完全横平竖直，无倾斜。

【河流系统】：河流从北部群山瀑布笔直垂直向下流入小镇，沿中央大道偏东位置南下，在中街下方90度转弯，横向东西流过，形成"十"字形水系。河上有两座木质石栏杆桥：北桥（连接药园和医馆），南桥（连接南街东西两侧）。河水清澈，能看见游鱼。

【道路系统】：主要街道铺设整齐的青色石板路（砖块纹理清晰），次要道路为黄褐色土路，所有道路笔直延伸，路口呈标准直角。道路宽度统一，两侧有明确的边界。

【北部区域】：远处青翠群山云雾缭绕，三叠瀑布银白色，山脚西侧有小型"药王庙"（红墙青瓦，门口挂"药王庙"匾额，香炉冒烟），东侧有采药人茅草小屋（门口堆药篓）。青石台阶山路笔直上山。

【西北象限 - 万柳药园】：位于北桥西侧。方正的院落，木栅栏围墙，大门上方悬挂"万柳药园"木质绿字匾额。院内整齐的梯田式药圃分成方块区域（人参区、草药区、灵花区），小路笔直分割。中央有茅草八角亭配石桌茶具。四周种植成排垂柳（柳枝下垂但不遮挡建筑）。河边有简易木码头，停着竹筏。园丁房（小竹屋）在角落，门口有白鹤。

【东北象限 - 青木医馆】：位于北桥东侧。传统三进四合院，青色瓦片屋顶飞檐翘角。正门上方挂"青木医馆"黑底金字大匾，门口两侧石狮子。前院地面摆放整齐排列的大型竹编晾晒匾（上面是切片药材），屋檐下成串悬挂葫芦。院中有巨大青铜捣药钵。侧院有药浴房（窗口冒蒸汽），后院银杏古树下有石桌凳。墙上挂着"坐诊时辰"木牌。

【中央核心 - 古井广场】：位于中央大道与中街交叉口。正中心是八角形青石古井台，井绳系木桶，井口长满绿色青苔。古井正上方是巨大的千年古樟树（树冠圆形扩展但不影响道路），树干粗壮，挂满红色祈福布条和小风铃。树干上钉着木质告示板（贴着任务纸条）。广场四周铺设规整的青石地面。

【中街集市区】：紧密排列的店铺沿街道两侧，每个建筑都有明确标识。

东侧建筑从北到南：
1. "济世堂"药铺 - 两层木楼，门匾"济世堂"黑底白字，窗口挂整株晾干药草，门口摆药材筐
2. 杂货铺 - 黄色布旗写"货"，门口堆麻袋和算盘
3. 糕点铺 - 门口巨大竹蒸笼冒白色蒸汽，挂着糖葫芦架

西侧建筑从北到南：
1. "醉仙楼"饭馆 - 两层酒楼，红底金字匾"醉仙楼"，屋檐下挂红灯笼，门口堆酒坛子，大黄狗趴门口
2. "听雨轩"茶馆 - 青色布旗写"茶"，竹帘半卷，门外石桌摆棋盘
3. 铁匠铺 - 黑色布旗写"铁"，烟囱冒黑烟，门口摆铁砧和农具

街道中央摆设流动摊位（有序排列）：油布伞药材摊、包子蒸笼摊、活禽竹笼摊、鲜鱼木盆摊、游医地摊布。每个摊位前有摊主NPC。

【南桥下河流横向段】：河水东西流向，桥为木板石栏杆结构，桥两侧河岸有洗衣台阶，村妇在捶洗衣服。河边种植柳树（整齐排列）。

【西南象限】：
- 水车磨坊（河边，巨大木制水车在转动）
- 染坊（门口竹竿晾晒彩色布料）
- "通络汤泉"药浴坊（蓝色布旗写"汤"，冒蒸汽）
- 渔家小屋（晒渔网，木船停靠）
以上建筑沿土路规整排列

【东南象限】：
- 玩家小院（最重要）：方正的竹篱笆围墙，木门门框，院内茅草屋（屋顶烟囱冒炊烟），院子里有杂草的待开垦菜地，生锈的圆形炼丹炉，石头水缸，窗台一盆兰花
- 邻居老宅（青砖房，门口晒咸鱼，挂鸟笼）
- 村长宅院（气派的青瓦大宅，门口石鼓，围墙）
- 公共菜园（篱笆围起，稻草人，黄瓜藤架）
以上建筑沿土路规整排列

【南部田野】：成片方正的金黄色稻田/麦田（格子状），散落几座炊烟袅袅的农舍茅屋，田间有稻草人和水牛。笔直的青石小路通向南方竹林深处（地图边缘）。

【东侧装饰带】：茂密的翠绿竹林（竖直生长的竹子），阳光斑驳，有笔直的石板小径通入，竹林深处若隐若现隐士小屋，地面有竹笋。

【西侧装饰带】：河岸垂柳成排（整齐排列），木质钓鱼台伸入河面（有老翁），六角凉亭供人纳凉，河流拐弯处荷花池（荷叶圆形整齐）。

【视觉风格】：完全正俯视90度角度，所有建筑屋顶可见，街道横平竖直如方格纸，清晰的16位像素艺术风格，色彩温暖明亮，每个建筑轮廓清晰可分割，道路和建筑边界明确，适合游戏引擎导入。宁静而热闹的氛围，中国古典小镇美学，生活气息浓厚，细节丰富但布局规整。

--ar 16:9 --niji 6 --style cute --no isometric, diagonal, slanted perspective
</code></pre>
然后直接生图绘制，我们就观察到了不同模型自带的图像Bias。
最近生图任务做得很多，越发觉得：
<blockquote>
视觉元素足够丰富时，很多时候确实非常难用语言完全限制死。
</blockquote>
同一个画面描述，10个人脑海中能想象到10个不同的风格。
但其实只要你的指令足够严丝合缝，图和图之间的差异没有想象中的大。
"抽卡"有时是因为你的指令本身充满了模糊和不清晰的地方。
<img alt="town_background.jpeg" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073705770-1975817093.jpg" class="lazyload">
<h3 id="如何ai生成遮罩层">如何AI生成遮罩层？</h3>
最崩溃的地方来了。
那怎么让人物在地图上行走呢？或者说，让人物知道哪里能走、哪里不能走呢?
因为坚持纯AI生成，所以我们自动忽略了手工使用TileMap、用瓦片来组装地图的方案。(当然客观原因是这坑爹的笔记本除了linux啥也用不了呀）
<h4 id="第一次尝试网格--多模态判断">第一次尝试：网格 + 多模态判断</h4>
AI先尝试了给背景图划分网格，让多模态模型来判断哪个网格可行走。但是：
<ul>
<li>网格划分得粗了——一个格子里啥都有</li>
<li>网格划分得细了——多模态模型根本看不见里面写的数字</li>
</ul>
<h4 id="第二次尝试图像分层">第二次尝试：图像分层</h4>
我又灵机一动："要不咱做图像分层？"
但只能说，要想切割干净、形成可连接的行走路径，现在的分层模型还做不到。
但是昨天我突然想到分层本身也可以用生图模型来做的，下周有时间再试试。
<h3 id="第三次尝试生成黑白遮罩层终于成了">第三次尝试：生成黑白遮罩层（终于成了！）</h3>
我灵机一动又一动：
<blockquote>
"要不咱让生图模型，针对可行走区域生成黑白二值化的遮罩层？"
</blockquote>
结果无敌的 nanobanana pro，几乎完美地完成了任务！
<img alt="gemini-3-pro-image-preview-2k_a_我正在制作游戏的遮罩层，请生成和当前图片.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073707340-1799864875.png" class="lazyload">
于是黑白二值化的遮罩层和原图叠加，再配合AI给出的近似优化方案——包括保证"道路连通性""瓦片可行走判断阈值"之类——就得到了可行走区域！
但是用起来我才发现：光有行走区域还是不行。还应该有：
<ul>
<li>遮挡区域（避免出现人在墙上走）</li>
<li>场景跳转位置</li>
<li>技能触发位置</li>
</ul>
所以其实还是要安装一个TileMap Editor的???
主包暂时没想到好办法……
先让人在墙上走一会儿吧……心已经累了……得缓口气再来和地图进一步斗智斗勇。
<h3 id="如何ai生成行走帧">如何AI生成行走帧？</h3>
有了地图，接下来就是让NPC在上面走。
我万万没想到，行走姿势的一致性竟然在生图上是个困难事。
为了让人物走起来，我们需要提供前后左右四个方向，每个方向的多个行走帧——最少3帧吧：直立、迈左脚、迈右脚。
为了降低生图成本、保证人物一致性，所以这12帧肯定最好一张图出。
结果呢？
不是没有左边人物侧脸
<img alt="image.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704307-1585427602.png" class="lazyload"><img alt="截图_选择区域_20260419210843.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704310-479533505.png" class="lazyload">
要么就所有人都迈左脚
<img alt="2.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704033-1118758392.webp" class="lazyload">
还有侧着走路，头永远坚定向前方的，眼神坚定的像是要入党
<img alt="3.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073703788-1658672804.webp" class="lazyload">
最离谱的还有人往前走，脑袋在后面的
<img alt="4.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704088-890100947.webp" class="lazyload">
<img alt="5.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073704080-1697433508.webp" class="lazyload">
后来灵机一动又想到可以做个行走视频然后抽帧也行呀为啥非生成图片呀，但是图片生成不出来我不甘心呀！
最终方案：换脸！
把行走姿势底图作为参考图，然后只生成人物形象，就很稳定了！
<img alt="行走姿势.png" loading="lazy" src="https://img2024.cnblogs.com/blog/1326688/202604/1326688-20260429073703950-847350405.jpg" class="lazyload">
虽然行走姿势的底图是人画的……但就这样吧……
<hr>
写在最后，游戏会继续做有灵魂的npc，初步定了hermes的集成方案。UI素材生成太慢了，下一步怎么批量生成素材呢？ 
来源：https://www.cnblogs.com/gogoSandy/p/19948386

頁: [1]

琼殿技术论坛's Archiver

和AI一起搞事情#4. 小白用claude code做游戏究竟能踩多少坑