我用 Claude 从零写了一个微信小程序，全程没碰一行代码
前阵子刷到一个 MBTI 测试小程序，觉得挺有意思。
但我有一个更疯的想法：能不能做一个 27 种人格 的测试？不按套路来，每个人格类型都有毒辣的描述、专属的插画、还有一套完整的十五维人格模型。
更疯的是——我想用 AI 来写。
不是让 AI 帮我写几行代码那种，是 从零到上线，全程用 Claude 对话完成。
我自己不写一行代码。
开始：告诉 Claude 我想要什么
我打开 Claude Code，输入了一段话：
帮我做一个微信小程序，是一个趣味人格测试，叫 SBTI（Soul-Based Type Indicator）。
需求如下：
- • 27 种人格类型，每种有名称、一句话介绍、详细描述、核心特质标签
- • 60 道题库，每次随机抽 30 道，每题 4 个选项
- • 结果页展示主人格 + 副人格 TOP3 + 十五维人格落点
Claude 没有问我"你要用什么框架""要不要用 TypeScript"。
它直接开始写代码了。
第一轮：60 道题 + 27 种人格，AI 全部生成
这是整个项目里最让我震撼的部分。
27 种人格类型，每种包含名称、代码、一句话 intro、200 字描述、5 个特质标签。
比如它生成的「吗喽」：
MALO 吗喽intro：人生是个副本，而我只是一只吗喽。描述：你是「吗喽」——社畜打工人的真实写照。嘴上说着不想干了，闹钟一响还是乖乖起床。你累但你忍，你苦但你不说。吗喽的命，吗喽自己扛。特质：打工魂、嘴硬心软、现实主义者、吐槽达人、韧性极强
再比如「装死者」：
ZZZZ 装死者intro：我没死，我只是在睡觉。描述：闹钟响了继续睡，消息来了装没看见。你不是懒，你是在用睡眠逃避现实。你的床是你最后的堡垒。
60 道题目也是 AI 全部创作的，每道题 4 个选项分别对应不同人格类型，题目风格贴近年轻人的日常场景——周末想干嘛、遇到不公平怎么办、收到转账第一反应是什么。
这个文件 sbti-data.js 最终有 896 行，全部由 Claude 生成，我没改过一个字。
第二轮：核心算法，对话式调优
初始版本用的是"原始票数 / 总题数 × 100%"来算匹配度。
问题很快就出现了：27 种人格分 30 票，主人格最多也就 5 票，匹配度只有 17%，看着太低了。
我告诉 Claude：
匹配度显示太低且没有区分度，帮我优化算法
Claude 分析了根因：不是选题算法的问题，是百分比计算方式的问题。27 种类型分 30 票必然分散，线性百分比注定给低数值。
然后它给出了方案——非线性映射：
- • 加权亲和分数（亲和权重从 0.3 调到 0.5，让分数更集中）
改完之后，强倾向显示 80%，中等倾向 50%，分散情况 35%。数字看着舒服多了。
整个过程我只说了两句话："匹配度太低"和"帮我优化"。Claude 自己完成了问题定位、方案设计和代码实现。
第三轮：页面设计，边看边改
首页一开始内容很多：介绍卡片、四大维度详情、步骤引导、底部说明，用户要滑好几屏才能看到"开始测试"。
我说：
首页太复杂了，简化一下，需要直观
Claude 把首页砍到一屏：渐变横幅 + 三个数据标签（30 道题 / 27 种人格 / 3 分钟）+ 一个按钮。干干净净。
结果页也是类似的过程。原始版本有 5 个独立区块平铺，视觉疲劳。优化后变成了：横幅内嵌头像+匹配度条 → 描述和特质合并一张卡片 → 副人格横排三卡片 → 十五维可折叠。
每次我说"太复杂了""这个太小了""能加点这个吗"，Claude 都能精确理解我的意思并给出合理的改动。
第四轮：踩坑和排障
开发过程中遇到几个坑，都是 Claude 帮我排查的。
坑 1：图片在真机不显示
开发者工具里好好的，体验版打开图片全白。Claude 一看就判断出是 WebP 格式的兼容性问题，iOS 对小程序本地 WebP 支持不稳定。它把 27 张 WebP 批量转成了 PNG。
转完发现包体积从 242KB 膨胀到 3222KB，超了微信 2MB 限制。Claude 又把图片从 640px 缩到 320px，最终压到 1.6MB，顺利通过。
坑 2：tab 图标太小
原生 tabBar 的图标大小是系统固定的 81×81，无法调整。我想要更大的图标。Claude 建议换成自定义 tabBar 组件，纯 CSS 绘制图标，完全不依赖图片文件，大小自由控制。
坑 3：人格类型页面图标错位
自定义 tabBar 用 CSS 画四宫格图标时，flex-wrap 布局在小程序里计算出了偏差。Claude 把四宫格从 flex 布局改成了绝对定位，精确控制每个格子的位置，问题立刻解决。
这些 bug 如果让我自己排查，可能每个都要折腾半天。但 Claude 基本上是秒定位、秒修复。
最终成果
整个小程序的最终数据：
三个页面：
- • 首页 — 渐变横幅 + 数据标签 + 开始按钮，一屏搞定
- • 人格类型 — 27 种人格列表卡片 + 底部弹窗详情，支持图片预览
- • 测试页 — 答题流程 + 结果展示（主人格、匹配度、描述、副人格 TOP3、十五维落点）
我的感受
AI 写代码，真正改变了什么
1. 门槛没了
我不会写微信小程序代码。如果按传统方式，我需要先学 WXML、WXSS、小程序 API、项目配置，光是"如何创建一个 tabBar"可能就要查半天文档。
用 Claude，我说"帮我加一个 tab"，它就加好了。配置文件、组件注册、页面跳转，全部自动处理。
2. 想法到成品的距离大幅缩短
从"我想做一个 27 种人格的测试"到"有一个可以跑的小程序"，中间的鸿沟是：27 种人格的文案创作、60 道题目的设计、亲和关系矩阵的构建、匹配算法的实现、15 维人格模型的数据、页面布局、样式设计、交互逻辑、图片处理、包体积优化、兼容性排障。
每一项都是实实在在的工作量。Claude 把这些全部承接下来了。
3. 改需求不再痛苦
传统开发里，改需求是开发者最讨厌的事。但用 AI 开发，改需求就是多说一句话的事。
"首页太复杂了"→ 砍到一屏。"图片太小了"→ 放大。"tab 图标不好看"→ 换成纯 CSS 绘制的自定义 tabBar。"匹配度太低"→ 重写算法。
每次修改，Claude 都能理解意图、给出方案、直接改代码。
AI 写不了什么
说实话，也有 Claude 做不好的部分：
- • 视觉设计：AI 能写 CSS，但审美判断还是得靠人。哪些配色好看、间距舒不舒服，最终得自己看
- • 产品决策：27 种人格叫什么名字、描述怎么写才毒辣有趣，AI 能生成初稿，但最对味的那一版还是需要人去筛选和调整
- • 图片素材：27 张人格插画是 AI 生成的，但风格统一性和质量把控需要人工介入
写在最后
这个项目让我确信了一件事：AI 不是程序员的替代品，而是创意的加速器。
你有想法，AI 帮你实现。你遇到问题，AI 帮你排查。你说"太复杂了"，AI 帮你简化。你说"不好看"，AI 帮你优化。
整个过程就像在和一个非常高效的合作者对话。你只需要知道自己想要什么，剩下的交给 AI。
如果你也想试试用 AI 做一个小程序，打开 Claude，把你的想法告诉它就好。
不用学代码，不用看文档。
直接说你想做什么。
这个小程序从构思到上线，全部代码由 Claude 生成。如果你好奇自己的灵魂类型，欢迎点击下方小程序体验。
