前言
总周期 ：2 个月业余时间（每天通勤 + 周末，平均每天 1.5h）。
总成本 ：≈ 微信认证 30，腾讯云oss服务 9.9一年 + 流量计费。
技术栈 ：pixi.js@6 + matter-js + vite + Supabase，输出微信小游戏单文件 CJS。
AI 工具 ：Claude Code 写代码 / gpt + gemini + 豆包出图 / Claude 写文案 / ElevenLabs、pixabay 音效。
产品状态 ：已上线微信小游戏「开心点连连看 」，无限关卡、好友榜、每日挑战、主题系统、成就系统。
本文给到 ：完整技术栈选型、踩过的 19 个微信小游戏深坑、我抄了 6 个月才稳定的 Claude Code prompt 工作流、真实成本清单。
👀 文末有 3 个开放问题，欢迎在评论区开杠，我会一条一条回。
- *
 
一、为什么是「微信小游戏」而不是 H5 / App？
去年底身边陆陆续续有同事被优化，我也开始焦虑。看了一圈"普通人副业方向"，我列了一张表：
候选| 我的判断
写公众号| 太卷，起号周期 6 个月起
接外包| 没技能、没渠道
摆摊 / 实体| 重资产、占时间
做独立 App| 上架太重，iOS 还要 99 美金
微信小游戏| 0 上架成本、有 12 亿流量入口、单人单干刚好
但真正促使我选小游戏的，是另一个判断：
小游戏的「代码 + 美术」体量，刚好卡在 AI 能稳定 cover 的尺寸里。
太大的项目（比如 SaaS）AI 容易上下文丢失、改坏老逻辑；太小的项目（比如静态页）又不像「正经产品」。5000-10000 行、单仓库、单端、无后端依赖 ——这是 2026 年 AI 编程最甜的区间。
- *
二、技术栈选型：为什么是 PixiJS 6 + Matter.js + Vite？
我让 Claude 给我列了 3 套技术栈对比，最后选的这套：
维度| 选型| 理由
渲染引擎| pixi.js@6 （不是 7+）| 微信小游戏的 WebGL 环境只支持 GLSL 100，pixi 7+ 的某些内置 shader 升级到了 300，会报错
物理引擎| matter-js| 重力下落机制要用；轻量、文档全、AI 熟悉
构建| vite + rollup| 必须输出 CJS 单文件 （微信不支持 ESM、不支持动态 import）
状态| mobx| 一个 observable 跑全场，足够
后端| Supabase （免费额度）| 排行榜 / 同步存档，0 元起步
适配层| @iro/wechat-adapter + @pixi/unsafe-eval| DOM shim + 替换 new Function 用的 shader 编译
触摸| @iro/interaction| 替换 pixi 默认的 DOM 交互插件
Vite 关键配置 （这一段直接抄走能用）： [code] // 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') })
[/code]
入口必须延迟两帧 （不延迟会直接崩，这是我第一周踩的最大的坑）： [code] // src/app.ts function deferInit() { if (typeof requestAnimationFrame !== 'undefined') { requestAnimationFrame(() => requestAnimationFrame(init)) } else { setTimeout(init, 50) } } setTimeout(deferInit, 0)
[/code]
原因是：微信小游戏在 game.js 顶层执行时，__wxConfig.useWebWorker 还没赋值，这时候你访问 wx.getSystemInfoSync() 或者 canvas 就会报错。这条不写在任何官方文档里 ，是我让 Claude 帮我读 @iro/wechat-adapter 源码读出来的。
- *
三、19 个微信小游戏的深坑（这是本文最干的部分）
下面这张表是我整整 6 个月维护的 AGENTS.md（专门给 AI 看的注意事项），现在打包送给你：
| 坑| 解法
1| 入口同步代码访问 wx/canvas 会崩| 延迟 2 帧 + setTimeout(50) 兜底
2| 没有 DOM / window / document| @iro/wechat-adapter 必须第一行 import
3| 微信禁止 eval / new Function| @pixi/unsafe-eval 替换 PIXI 内部 shader 编译
4| 默认 interaction 用 addEventListener| @iro/interaction 替换，注册成 RendererPlugin
5| 触摸坐标直传，不要再做 DOM 偏移| mapPositionToPoint = (p,x,y) => p.set(x,y)
6| canvas 是全局变量，不是 DOM 查询| new PIXI.Renderer({ view: canvas })
7| accessibility 插件会操作 DOM 报错| renderer.plugins.accessibility.destroy()
8| Shader 只能 GLSL 100，不能 300| 自定义 shader 不写版本号；TilingSprite 需手动替换
9| 必须 CJS 单文件 + 内联动态 import| vite 配置见上文
10| process.env.NODE_ENV 运行时不存在| rollup-plugin-replace 注入
11| 不能用 new Audio() / AudioContext| wx.createInnerAudioContext
12| TS 中 Container 没有 interactive 字段| 用 (x as any).interactive = true 断言
13| 用 pointerdown，不要用 click| touch 不触发 click
14| 排行榜要走开放数据域（独立沙箱）| dist/context/ 独立 build，主域 postMessage
15| 开放数据域不能跑 ES5 编译| project.config.json 的 babelSetting.ignore 加 "context/**"
16| 不能用 fetch / localStorage| wx.request / wx.setStorage
17| wx.getSystemInfoSync() 不要重复调用| 启动时取一次，导出常量 windowWidth/windowHeight/safeAreaTopPx
18| 高度不能写死 1334| designLayoutH = round(750 * windowHeight / windowWidth)
19| AnimatedSprite 在纹理未就绪时设宽高会爆炸| 监听 baseTexture.once('loaded') 后再 scale.set
这张表是我真金白银 踩出来的——尤其是第 8、15、19 条，每条都让我卡了不止一天。
💡 看到这里你可能想问：「这些 AI 能自己想到吗？」 答案是：不能 。这就是为什么我下面要讲 prompt 工作流。
- *
四、我用了 6 个月才稳定的 Claude Code 工作流
这是本文第二干的部分。直接给你三段我每个项目都用的「prompt 资产」。
4.1 给 AI 配一份 CLAUDE.md（核心心法）
Claude Code 会自动读项目根目录的 CLAUDE.md。这个文件不是给人看的，是给 AI 看的项目说明书 。我的写法是： [code]
项目类型
微信小游戏（不是 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
[/code]
关键点 ：把"AI 会犯什么错"写进去，而不是把"项目长什么样"写进去。后者它自己会读代码，前者它读不出来。
4.2 把"踩过的坑"沉淀成 AGENTS.md
每踩一个坑、修一个 bug，我都让 Claude 把这个坑总结成一节加进 AGENTS.md。半年下来 19 节，下次再叫它写新功能，它几乎不犯这些错了 。
这才是 AI 编程真正的复利——不是 prompt 写得多花，而是知识被持续地外化到文件里 。
4.3 写功能用「三段式」prompt
[code]
我要在 src/ui/ 下加一个「皮肤选择弹窗」，复用现有 makePanelBg / panelPad / bounceIn 的设计语言。 （参考 src/ui/pvp-modal.ts 的结构）
弹窗宽 PANEL_W = DESIGN_REF_W * 0.84
横向 3 列网格，展示已解锁/未解锁两态
点击未解锁项给 toast 提示
选中后写入 src/game/llk-save.ts 的存档
不准用 click，必须用 pointerdown
不准引入新依赖
不准改 src/core/，那是基础设施
改完之后把新增的资源路径加到 src/ui/home.ts 的 ASSET_URLS 里
[/code]
为什么有效 ：AI 最容易犯的不是写错代码，而是做多 ——给你顺手 refactor 一下不该动的地方。把"不准做什么"写出来比"要做什么"更重要。
- *
五、真实成本明细（我没拿融资也没投广告）
项| 金额
Claude / Cursor 订阅 ¥200/月 × 6| ¥1200
Midjourney 订阅（中途换成即梦免费版）| ¥0
微信小游戏注册（个人主体）| ¥0
域名 / 服务器（Supabase 免费额度）| ¥0
美术外包| ¥0（全部 AI 出图）
音效 / BGM| ¥0（在线音效库 + ElevenLabs 试用）
总计| ≈ ¥1200
便宜过一次 Python 培训班。
- *
六、AI 帮不了你的 4 件事（不吹 AI，反向干货）
写了这么多 AI 的好，必须诚实说说它真的不行 的地方：
1. 产品决策它不会替你做。
「第 1 关该不该难？」「死局要不要自动重排？」「弹窗按钮放左还是右？」——AI 给的是平均答案，平均答案是没记忆点的。
2. 长上下文里它会偷偷改坏老逻辑。
一次给它太多目标，它会"顺手优化"你没让它改的地方。我现在的纪律是：一次只让它做一件事，做完立刻 commit 。
3. 美术风格一定要锁死参考图。
不锁参考图，3 张图能给你 3 种画风。我后来的做法是：固定 1 张主视觉，所有出图都把它作为 style reference 喂进去 。
4. 上架审核它帮不了你。
备案、资质、隐私协议、用户协议、平台审核——这些得自己学。AI 顶多帮你写文案，不能帮你过审。
- *
七、最让我意外的一个发现
做这个项目之前我以为 AI 编程是「我说一句、它写一段」。
做完之后我的看法变了：
AI 编程的本质，是把"项目里所有非显式的约束"全部外化成文档。 你的
CLAUDE.md、AGENTS.md、需求文档、UI 规范——这些不是项目副产物，它们才是 AI 时代的真正源代码 。手写的 TS 代码反而成了"编译产物"。
这件事颠覆了我对"什么是工程"的理解。在 AI 之前，文档是给人看的，写多了浪费时间；AI 之后，文档是生产力 ，写得越好、AI 产出越稳。
我现在每开一个新项目，第一件事不是 pnpm init，是 touch CLAUDE.md AGENTS.md。
- *
八、想试一下成品的话
游戏名叫「开心点连连看 」——
微信里搜「开心点连连看」就能直接玩。
不用关注、不用授权、不用看广告，3 分钟一局，玩完顺手退也没人追你。
如果你玩了之后，觉得"这玩意儿一个人真的能做出来啊"，那就是我写这篇文章最大的收获。
- *
九、给评论区的 3 个开放问题 👇
写到这里我自己也很多想不清楚的事，真心想听听掘金各位的看法 ：
你觉得 AI 编程的天花板，是"小型完整项目"还是"中大型项目的局部加速"？ 我的体感是前者已经稳了，后者还差不少。你呢？
如果让你用 AI 做一个副业，你会选什么方向？ 我筛了一圈选了小游戏，但我猜评论区一定有更骚的方向。
CLAUDE.md / AGENTS.md 这套"外化约束"的思路，你在自己的项目里用了吗？怎么用的？ 想互相抄一抄。
评论区留言我会一条一条回 ，前 50 条留言的同学，我把我这几个月攒下来的 prompt 模板包（含 pixi开发微信小游戏模版 + 出图 prompt 模板，当然还没完全整理好，我做个工具网站，自用的，会逐步往上更新内容）私信发给你 🦫🌿
- *
十、彩蛋：本文目录索引（方便收藏）
一、为什么是「微信小游戏」
二、技术栈选型
三、19 个微信小游戏深坑 ⭐
四、Claude Code 工作流 ⭐
五、真实成本明细
六、AI 帮不了你的 4 件事
七、最让我意外的发现
八、试玩入口
九、3 个开放问题 👇
* *
如果这篇文章帮到你，点赞收藏 + 关注 支持一下，让卡皮巴拉多一个粉丝 🦫 下一篇预告：《我是怎么用 Supabase 给微信小游戏做了一套"零成本好友排行榜"》——感兴趣的同学评论区扣 1，我看人数定优先级。