从 Figma 到微信小程序：Plocr-chef 的 vibe coding 完整流程

整个开发过程几乎没写什么原创代码——全是和 AI 对话聊出来的。但也不是一键生成，中间有很多手工活。

---

第一步：Figma 画图

所有事情的起点是一张 Figma 设计稿。我在 Figma 里画了首页的布局、卡片样式、配色方案，然后导出 PDF。

为什么是 Figma？因为那时候我还不知道后面会用什么技术栈，Figma 是纯视觉的，不绑定任何实现方式。画出想要的样子，再想怎么实现它。

设计风格是后来贯穿整个项目的「液态玻璃」（Liquid Glass）：温暖的大地色系（主色 #a0522d），半透明毛玻璃卡片，大圆角，柔和的阴影。

---

第二步：把 PDF 丢给 AI，生成文件树

有了设计图之后，我把 PDF 上传给 AI，描述我想要的功能：

• 一个家庭私用的点菜小程序
• 首页展示推荐菜品
• 完整的菜单浏览和搜索
• 购物车 + 下单
• 订单管理 + 食谱查看
• 菜品后台管理（CRUD）
• 数据统计
• 心愿单

AI 根据设计图和需求描述，生成了一整套项目文件树——每个文件叫什么、放在哪里、大致负责什么。这个文件树后来基本没改过，一直用到了项目完结。

Plocr-chef/
├── app.js / app.json / app.wxss
├── custom-tab-bar/          # 自定义毛玻璃 TabBar
├── components/lottie-player/  # Lottie 动画组件
├── utils/
│   ├── supabase.js           # Supabase REST API 封装
│   └── flip.js               # FLIP 动画
├── pages/                    # 11 个页面
│   ├── index/                # 首页
│   ├── dishList/             # 全部菜单
│   ├── cart/                 # 购物车
│   ├── order/                # 订单
│   ├── manage/               # 管理后台入口
│   ├── dishManage/           # 菜品管理
│   ├── addDish/              # 新增菜品
│   ├── editDish/             # 编辑菜品
│   ├── recipe/               # 食谱
│   ├── stats/                # 数据统计
│   └── wishlist/             # 心愿单
└── node_modules/

---

第三步：手工活——建文件、粘贴代码、改 bug

文件树有了，AI 也生成了每个文件的代码。但这里有一个关键步骤：不能一键生成。

我需要：

1. 在微信开发者工具里手动创建每个文件
2. 把 AI 生成的代码逐段粘贴进去
3. 运行看效果——几乎每次都有问题
4. 截图 → 描述问题 → AI 改代码 → 粘贴 → 再看

这个循环重复了无数次。微信小程序的坑特别多：<nav> 标签不支持、CSS 某些属性不认、组件间传值容易丢……每个都是人工发现的。

---

第四步：升级工具——Claude Code + DeepSeek API

项目到中期，手动粘贴代码已经效率太低了。我开始接入 Claude Code 开发模式：让 AI 直接读取项目代码、分析问题、生成 patch。

同时，为了降低 API 成本——Claude 的 API 调用在大量迭代时费用不低——我接入了 DeepSeek API 来做辅助优化。DeepSeek 在代码理解和生成上表现不错，价格却便宜很多。

具体分工是：

• Claude Code：架构设计、复杂逻辑、新功能开发
• DeepSeek API：代码优化、bug 修复、样式调整、小修小改

相当于一个「主力 + 辅助」的双模型工作流。这在 vibe coding 项目里是一个值得记录的模式——不必所有对话都用最贵的模型。

---

第五步：免费方案全家桶

整个项目没有花一分钱（除了 API 调用的零散费用）：

服务	方案	费用
后端数据库	Supabase 免费计划（PostgreSQL + 对象存储）	免费
前端	微信小程序体验版（不发布上架）	免费
AI 编码	Claude Code + DeepSeek API	按量付费（很便宜）
域名/服务器	不需要，小程序不走 HTTP 域名	免费

唯一的潜在成本是 Supabase 免费计划如果超过 7 天不活动会暂停。解决方案是在 App 启动时加了一个 keepWarm() 函数，每 24 小时 ping 一次数据库。

---

回顾

这个项目的开发方式总结下来就是三个词：Figma 定稿 → AI 写代码 → 人工调试。

Figma 负责「我要什么」，AI 负责「怎么写」，人负责「哪里有问题」。三个角色缺一不可。

它不是那种「输入一句话，AI 生成一个完整 App」的魔法——魔法不存在。但它确实是「输入一个设计稿，和 AI 聊几百轮，手工粘贴调试，最终得到一个能用的 App」的可行路径。