核心问题:AI 写的游戏为什么跑不起来
试过的人都有这个体验:AI 给了几百行代码,复制进 HTML 文件,打开是白屏。
原因通常不是模型能力不够,而是输出形态没有被约束。默认情况下 AI 会:
- 引用 CDN 上的外部库(离线或该 CDN 挂了就白屏)
- 拆成多个文件(你只复制了其中一个)
- 用上你环境里不存在的构建工具
- 输出被截断(代码太长,结尾少几个闭合括号)
- 用 ES Module 语法但通过
file://打开(跨域报错)
解决思路:把约束写进提示词
关键是在需求里明确输出形态,而不只是游戏玩法。
一个可用的结构:
帮我写一个单文件 HTML5 小游戏,要求:
【玩法】
(用 3-5 句话描述清楚:玩家控制什么、目标是什么、怎么算输赢)
【输出形态 —— 必须严格遵守】
1. 只输出一个完整的 HTML 文件,所有 CSS 和 JS 都内联
2. 不引用任何外部资源:不用 CDN、不用外部字体、不用外部图片
3. 图形用 Canvas 或 CSS 绘制,不用图片文件
4. 用 <script> 标签而不是 type="module"
5. 代码完整,不要用省略号或注释代替实现
6. 不要用任何需要构建工具的语法
【技术要求】
- 键盘和触摸都要能操作
- 自适应屏幕尺寸
- 在手机浏览器上也能玩
【输出格式】
只输出 HTML 代码,不要额外解释。关键在第 3 条和第 4 条
「不用图片文件」 这一条经常被忽略,但它是最常见的问题来源。AI 会写 <img src="./assets/player.png">,而你没有这个文件。要求用 Canvas 绘制,就能绕开整个素材问题。
「用 script 而不是 module」 解决的是 file:// 打开时的跨域限制。很多人在本地双击 HTML 打不开,就是这个原因。
迭代的时候怎么说
第一版跑起来之后,不要重新描述一遍需求,那样会把已经跑通的代码推翻重来。正确做法是:
这是当前代码:
(粘贴完整代码)
改一件事:把跳跃高度调低 30%。
保持其他所有逻辑不变,输出完整文件。三个要点:
- 一次只改一件事。改多了你不知道是哪一处出的问题。
- 明确说「保持其他不变」。否则 AI 会顺手重构,然后引入新 bug。
- 要求输出完整文件。让它给「补丁」或「只输出改动部分」,很容易上下文对不上。
什么时候该放弃重写
如果同一个问题改了三轮还没解决,就别继续打补丁了。重新生成一份,把这次踩到的坑写进初始需求里。
上下文越长,AI 越容易在旧代码的假设上打转。重开一局成本很低。
最后
这些经验来自我们自己跑通流水线的过程。平台内置了提示词模板库,上面这个结构是其中一类 —— 模板的价值在于它同时约束了玩法和输出形态,让产出天然可被处理。
先在本地把你想要的游戏跑起来,再考虑上架的事。跑不起来的游戏,上架流程再顺也没意义。