夜雨聆风Vibe Coding 到底是什么感觉？
2025 年，Andrej Karpathy 扔出了一个概念，炸遍了技术圈—Vibe Coding。
不是写代码。是说代码!
你对 AI 描述你想要什么，它写。你看着结果说"嗯，感觉对了"或者"不对，重来"。就像导演对摄影师说"我要那种暖暖的、有点复古的感觉"，而不需要亲自扛摄像机。
听起来很酷。但真的能做出一个有温度的产品吗？
我决定用自己来当小白鼠。
要做什么？一个「会安慰你」的心情打卡小程序
需求很简单，也很贪心：
• 📝 每天记录心情——5 个等级，从 😢 到 🥰
• 📊 看统计——柱状图、折线图，我这一周到底开不开心
• 📜 翻历史——回看过去的每一天
• 🎆 年度报告——深紫色渐变、金色数字、圆环图，仪式感拉满
• 🤖 AI 情绪反馈——打卡之后，不是冷冰冰的"保存成功"，而是 AI 读了你写的原因，给你 2-3 句专属的温暖回复
最后一个功能，是整个产品的灵魂。
这个 AI 反馈是怎么工作的？
每次打卡后，云函数把你选的心情、强度和写的理由，发给 DeepSeek API，举个例子：
心情：比较开心（强度 4/5）
原因：今天终于把拖了一个月的方案交了，客户说很满意
DeepSeek 的 system prompt 是这样的：
「你是一个温暖的情绪陪伴者。根据用户选择的情绪类型、强度和写下的原因，生成 2-3 句个性化的情绪回应。必须基于用户写的具体原因回应。」
然后它会回复：
「拖延一个月的方案终于交了，而且客户还满意——这种如释重负的快乐，太真实了！你值得好好庆祝一下今天。把这份成就感存起来，下次焦虑的时候翻出来看看。」
它不是在敷衍你。它真的读了你写的东西
如果 DeepSeek API 挂了怎么办？我准备了一个 55 条手写文案的本地话语库作为降级方案，每一条都是针对不同心情等级精心写的：
• 很难过时 → 「深呼吸一下。生活总有起落，今天的低谷不代表什么」
• 非常开心时 → 「五颗星的快乐！看得出来今天的你能量满满，继续保持这份光芒」
开发过程：我说，AI 做
第 1 步 — 先做一个 HTML 原型
在写小程序之前，我先让 AI 生成了一个 998 行的单文件 HTML——所有的页面、交互、图表，全部在一个 HTML 文件里跑起来。
不是为了上线。是为了快速验证：这个设计对不对？这个交互顺不顺手？颜色看起来舒不舒服？
改了 3 版，确认感觉对了，才进入正式开发。
这就是 Vibe Coding 的核心方法论：先用最低成本把「感觉」验证了，再正式施工。传统开发是「想清楚再写」，Vibe Coding 是「先跑起来看看」。
第 2 步 — 搭架构
微信小程序原生框架 + 微信云开发（CloudBase），serverless，不用管服务器。
架构出奇的简洁：
miniprogram/
├── pages/—— 4 个页面：打卡 / 统计 / 历史 / 报告
├── components/—— 心情选择器组件
├── utils/—— Canvas 图表绘制 + 文案库
└── app.js—— 全局配置 + 云开发初始化
cloudfunctions/
├── addMood/—— 打卡 + DeepSeek AI 反馈 ✨
├── getMoods/—— 查询历史记录
├── getStats/—— 统计数据聚合
├── getAnnualReport/—— 年度报告数据
└── generateFeedback/—— 独立反馈生成
第 3 步 — 设计系统
这是一个让我惊叹的环节。AI 输出的不是零散的 CSS，而是一套完整的设计规范文档（design-spec.md）：
• 紫色品牌色 #6C5CE7 —— 温暖而不冷淡，有个性但不刺眼
• 4px 基准间距体系 —— --space-xxs: 8rpx → --space-3xl: 80rpx
• 五级心情色 —— 从红（难过）到绿（开心），符合直觉
• 10 级字体层级 —— 从 20rpx 小字到 64rpx 大数字
• 年度报告深色渐变 —— #1A0533 → #2D1B69 → #6C5CE7，金色 #FFD700 点睛
每一个间距、每一个圆角、每一个阴影，都有明确的 token。这不是「随便做做」，这是专业 UI 设计师的水准。
第 4 步 — Canvas 图表，不用第三方库
统计页的柱状图、折线图，报告页的圆环图——全部是 Canvas 2D 手写绘制。
没用 ECharts，没用任何图表库。因为微信小程序的 Canvas API 和 Web 版不一样，大部分库不兼容。AI 直接手写了 utils/charts.js，支持：
• 柱状图（五色柱子 + 顶部数值 + 虚线网格）
• 折线图（渐变填充 + 数据点描边 + 4 条网格线）
• 圆环图（按比例分段 + 中心大字 + 图例）
第 5 步 — 踩坑和修复
没有任何项目是一帆风顺的。这个项目踩过的坑：
🔴 AppID 类型陷阱
现象：开发者工具报 game.json not found
根因：原来用的 appid 是小游戏的，不是小程序的——微信会按 appid 类型强行切换编译模式
🟠 用户数据不可见
现象：历史页查不到打卡记录
根因：客户端 SDK 自动填 _openid，但云函数端 SDK 不自动填——需要手动从 wxContext.OPENID 写入
🟡 云环境错配
现象：数据库读不到数据
根因：wx.cloud.init() 硬编码了旧 appid 的云环境——去掉 env 参数让 SDK 自动解析即可
🟢 报告页重复加载
现象：页面闪烁
根因：onLoad 和 onShow 都调了 loadReport()——加一个 _loaded 标记去重
每一个坑，都是 AI 和我一起排查、定位、修复的。Vibe Coding 不等于 AI 瞎写，它更像是一个「写代码速度极快但有时候会走神的天才搭档」
手写代码行数：0
生成代码总量：约 2,500 行（含文档）
开发周期：2 天（含 HTML 原型验证）
页面数：4
云函数数：5
Canvas 图表类型：3（柱状图 / 折线图 / 圆环图）
设计规范文档：1 份，904 行
AI 反馈降级文案：55 条手写
Git 提交：3 次
总花费：0 元（微信云开发免费额度 + DeepSeek API 白菜价）
Vibe Coding 到底能不能做产品？
做完这个项目，我的真实感受：
✅能做的
• 完整的产品闭环 —— 从前端到后端到 AI 集成到设计规范，全部可以
• 高质量 UI —— AI 输出的设计系统不输初级 UI 设计师
• 快速验证 —— 原型 → 正式产品，可以在一周内完成
⚠️ 做不了的（或者说需要人的）
• 平台特有的坑 —— 比如微信小程序的 appid 类型、_openid 行为差异，AI 不知道这些，需要人来踩
• 产品直觉 —— 「这个功能要不要？」「这个交互顺不顺手？」「这句文案暖不暖？」这些判断只能人来下
• 架构决策 —— AI 能实现你指定的架构，但不能替代你决定架构
我的角色变化
以前写代码时，我的角色是「码农」——思考和精力花在「怎么实现」上。
Vibe Coding 后，我的角色变成了「制作人」——思考和精力花在「做什么」「为什么」「感觉对不对」上。
代码从「手段」变成了「细节」。这是一个深刻的变化。
来试试？
如果你也每天有情绪起伏，想被温柔地回应——扫下面的小程序码，今天就可以开始记录。
打卡之后，DeepSeek 会给你一句专属的、读了你的心情后写下的回复。
也许不完美。但它是真的在读你。
最后，想听听你的想法 💬
这个小程序目前还是一个很初期的实验。我想把它继续打磨下去，但需要你的视角：
• 你用过类似的心情记录工具吗？觉得它们做得好的是什么？做得不好的又是什么？
• 你觉得「AI 情绪反馈」对你来说有吸引力吗？是更喜欢 AI 的个性化回复，还是更信任朋友的一对一倾诉？
• 如果你来设计——你会给这个小程序加什么功能？比如：情绪提醒通知、周报推送、好友匿名鼓励……
直接在评论区留言，每一条我都会认真看。
说不定下个版本，你的想法就会出现在里面!
