AI微信小游戏上线，独立开发实战经验

先说几个核心判断：整个项目断断续续花了2个月业余时间，每天通勤加上周末，平均下来一天1.5小时。总成本不算时间的话，微信认证30元，腾讯云OSS服务一年不到10块钱，再加上一些流量费。技术栈选了pixi.js@6配合matter-js、vite和Supabase，最终输出成微信小游戏需要的单文件CJS格式。AI工具方面，代码主要靠Claude Code生成，图片由gpt、gemini和豆包搞定，文案交给Claude，音效来自ElevenLabs和pixabay。

产品已经上线微信小游戏，叫“开心点连连看”，包含无限关卡、好友榜、每日挑战、主题系统和成就系统。这篇文章会完整分享技术栈选型、踩过的19个微信小游戏深坑、稳定运作的Claude Code prompt工作流，以及真实的成本清单。

一、为什么是“微信小游戏”而不是H5/App？

去年年底，身边陆陆续续有同事被优化，说实话，那种焦虑感我也有。于是花了一些时间琢磨副业方向，最后整理了一张表：

不过真正促使我选择小游戏的，是另一个判断：太大的项目（比如SaaS）AI容易上下文丢失、改坏老逻辑；太小的项目（比如静态页）又不像一个“正经产品”。5000到10000行代码、单仓库、单端、无后端依赖——这个规模恰好是AI编程最舒服的区间。

二、技术栈选型：为什么是PixiJS 6 + Matter.js + Vite？

让Claude列了三套技术栈做对比，最后选了这套配置：

Vite关键配置可以直接拿走用：

// vite.config.ts
build: {
  lib: {
    formats: ['cjs'], // 必须CJS，不能ESM
    fileName: () => 'game.js' // 固定输出
  },
  rollupOptions: {
    output: { inlineDynamicImports: true } // 必须内联所有动态import
  }
}
// 插件里必须替换 process.env.NODE_ENV
replace({ 'process.env.NODE_ENV': JSON.stringify('production') })

入口必须延迟两帧，否则会直接崩——这是第一周踩到的最大的坑：

// src/app.ts
function deferInit() {
  if (typeof requestAnimationFrame !== 'undefined') {
    requestAnimationFrame(() => requestAnimationFrame(init))
  } else {
    setTimeout(init, 50)
  }
}
setTimeout(deferInit, 0)

原因是微信小游戏在game.js顶层执行时，__wxConfig.useWebWorker还没赋值，这时候访问wx.getSystemInfoSync()或者canvas就会报错。这条注意事项在任何官方文档里都找不到，是让人费了不少功夫才从源码里挖出来的。

三、19个微信小游戏的深坑（这是文章最干的部分）

下面这张表，是花了6个月时间维护的AGENTS.md文件中的核心内容，现在直接打包分享出来：

这张表是用真金白银踩出来的——尤其是第8、15、19条，每一条都让人卡了不止一天。

四、用了6个月才稳定的Claude Code工作流

这是文章第二块值得收藏的部分。直接分享三段在项目中反复使用的prompt模板。

4.1 给AI配一份CLAUDE.md（核心心法）

Claude Code会自动读取项目根目录的CLAUDE.md。这个文件不是给人看的，是给AI看的项目说明书。写法是这样的：

## 项目类型
微信小游戏（不是H5），pixi.js@6 + matter-js + vite，单文件CJS。
## 必读
AGENTS.md 是微信小游戏的非显式坑清单。改下面任一类代码前必读：
- 入口/初始化（§1-2）
- PIXI集成（§3, 5-9）
- 构建配置（§8）
- 坐标系（§4, 10）
- 音频（§11）
- 交互（§12）
- 开放数据域（§13）
- 禁用Web API（§15）
## 路径别名
~/* → src/*，@/* → 仓库根
## 约定
- UI区域必须加中文注释（// 砖块区域、// 顶部菜单栏）
- 游戏逻辑变更必须同步更新 docs/需求文档.md

关键点在于：把“AI会犯什么错”写进去，而不是把“项目长什么样”写进去。后者AI自己会读代码，前者它读不出来。

4.2 把“踩过的坑”沉淀成AGENTS.md

每踩一个坑、修一个bug，就让Claude把这个坑总结成一节加进AGENTS.md。半年下来一共19节，下次再叫它写新功能，它几乎不会再犯这些错了。这就是AI编程真正的复利——不是prompt写得有多花哨，而是知识被持续地外化到文件里。

4.3 写功能用“三段式”prompt

# 上下文
我要在 src/ui/ 下加一个「皮肤选择弹窗」，复用现有 makePanelBg / panelPad / bounceIn 的设计语言。（参考 src/ui/pvp-modal.ts 的结构）
# 需求
1. 弹窗宽 PANEL_W = DESIGN_REF_W * 0.84
2. 横向3列网格，展示已解锁/未解锁两态
3. 点击未解锁项给 toast 提示
4. 选中后写入 src/game/llk-sa ve.ts 的存档
# 约束
- 不准用 click，必须用 pointerdown
- 不准引入新依赖
- 不准改 src/core/，那是基础设施
- 改完之后把新增的资源路径加到 src/ui/home.ts 的 ASSET_URLS 里

为什么这个模式有效：AI最容易犯的不是写错代码，而是做多——它会顺手给你refactor一下不该动的地方。把“不准做什么”写出来，比“要做什么”更重要。

五、真实成本明细

算下来，比参加一期Python培训班还便宜不少。

六、AI帮不了你的4件事（不吹AI，反向干货）

聊了这么多AI带来的便利，也得诚实地说说它真正不行的地方：

1. 产品层面的核心决策，AI确实帮不上忙。“第1关该不该难？”“死局要不要自动重排？”“弹窗按钮放左还是右？”——AI给的是平均答案，而平均答案往往没有记忆点。

2. 长上下文里它会偷偷改坏老逻辑。一次给它太多目标，它会“顺手优化”你没让它改的地方。现在的纪律是：一次只让它做一件事，做完立刻commit。

3. 美术风格一定要锁死参考图。不锁参考图，3张图能给你3种画风。后来的做法是：固定1张主视觉，所有出图都把它作为style reference喂进去。

4. 上架审核它帮不了你。备案、资质、隐私协议、用户协议、平台审核——这些都得自己学。AI顶多帮你写文案，但不能帮你过审。

七、最让人意外的发现

在做这个项目之前，不少人以为AI编程就是“我说一句、它写一段”那么简单。做完之后发现，事情远不止如此。这件事碘伏了对“什么是工程”的理解。在AI之前，文档是给人看的，写多了浪费时间；AI之后，文档成了生产力，写得越好、AI产出越稳。现在每开一个新项目，第一件事不是pnpm init，而是touch CLAUDE.md AGENTS.md。

八、试玩入口

游戏名叫“开心点连连看”，在微信里直接搜这个名字就能玩。不用关注、不用授权、不用看广告，3分钟一局，玩完顺手退也没人追你。如果你玩了之后，觉得“这玩意儿一个人真的能做出来啊”，那就是这篇文章最大的价值所在。

九、给读者的3个开放问题

写到这里，其实自己也有不少想不清楚的地方，很想听听各位的看法：

1. 你觉得AI编程的天花板，是“小型完整项目”还是“中大型项目的局部加速”？个人体感是前者已经比较稳了，后者还有不少差距。你呢？
2. 如果让你用AI做一个副业，你会选什么方向？筛选了一圈选了小游戏，但相信评论区一定有更妙的思路。
3. CLAUDE.md和AGENTS.md这套“外化约束”的思路，你在自己的项目里用了吗？怎么用的？想互相借鉴一下。

十、彩蛋：本文目录索引（方便收藏）

• 一、为什么是“微信小游戏”
• 二、技术栈选型
• 三、19个微信小游戏深坑 ⭐
• 四、Claude Code工作流 ⭐
• 五、真实成本明细
• 六、AI帮不了你的4件事
• 七、最让人意外的发现
• 八、试玩入口
• 九、3个开放问题

来源：互联网