开源项目一键变身智能菜谱！Trae SOLO如何让空配料表起死回生？

我们的菜谱数据来自于开源项目「像老乡鸡那样做饭」，这是它的 GitHub 地址：github.com/Gar-b-age/C…

动手

我们选择好技术栈之后就可以开始开发，由于我们使用 Supabase 作为服务，所以后端开发无需操心，只需要让 Trae SOLO 来建表、处理数据就好了。

数据处理

我们将菜谱的 markdown 和相关图片放到了 cook-book 目录下，然后让 Trae SOLO 开始处理吧！

Trae SOLO 开始处理需求，生成 tasks 列表，并执行

不过它也不是一步到位了，我发现导入的数据有的配料字段是空的，有的步骤是空的，于是让它重新检查了下（后面我自己检查了下发现是部分菜谱的 markdown 文件的标题不对，这里我就自己处理了）。

最终，Trae SOLO 帮我将全部的菜谱数据处理完毕，并插入到 Supabase 的数据库中了，接近 200 道菜，足够每天吃一道了。

小结

“干净”的数据能达到事半功倍的效果，从上面纠错的过程可以印证这一点，在让 AI 处理前，花点时间做基础的数据清洗（统一文件命名规范、检查必要字段是否存在、清理异常字符）是非常值得的投入。

小程序开发

我们开发前，有一些准备工作，由于 wot-starter 中包含暗黑模式等相关的配置，我们本次暂不需要，故需要移除，以免干扰 AI 对项目的理解（这里我们要明确一个点，要尽量提供有用的语料给 AI，因为过大的上下文会导致它天马行空）。

我们向 Trae SOLO 提出以下需求，先实现一个简易版：

开发一个像老乡鸡那样做饭小程序，基于现有表结构实现以下核心功能：
1. 分类浏览功能：按照菜品分类展示菜谱列表
2. 首页推荐功能：在首页展示精选推荐的3-5个菜谱
3. 菜谱详情页：点击可查看完整菜谱信息
要求：
- 保持现有表结构不变
- 界面设计简洁直观
- 确保数据加载流畅
- 适配移动端显示
- 使用unocss编写样式，使用rpx做单位

经过一轮开发后，项目结构如下：

不过此时项目还是跑不起来的，控制台报错了，我们直接将控制台报错发送给 Trae SOLO。

解决之后，我们的小程序启动起来，效果就已经差不多达到了文章开头的样子了。

当然还有一些小问题，都可以让 Trae SOLO 来处理

后续完善

初版完成后，我们群里的好朋友 FliPPeDround 提醒我说，「像老乡鸡那样做饭」项目的 Github 上有 PR 提供了做菜的手绘流程图。那太好了，我们这就给加上。

首先还是让 Trae SOLO 将新增的手绘流程图上传到 Supabase 并将其地址插入到对应的菜谱中

然后在菜谱详情中展示手绘流程图

效果如图，配上流程图，清晰又美观。

总结

我们今天几乎零代码 用 Trae SOLO 实现了「像老乡鸡那样做饭」小程序，过程中这三个规则让我们事半功倍：

好了，实现这个小程序后，我再也不愁没菜吃了！后面我想还可以加一些有趣的功能，例如：今天吃什么、每周必吃、大家都在吃，等等功能，当然这些功能也是由 Trae 来开发，大家可以期待下，同时也期待未来 AI 编程能给我们带来更多、更强的能力，让我们能专注于更重要的「业务逻辑」。

参考资料

往期精彩

当年偷偷玩小霸王，现在偷偷用 Trae Solo 复刻坦克大战

告别 HBuilderX，拥抱现代化！这个模板让 uni-app 开发体验起飞

uni-app 还在手写请求？alova 帮你全搞定！

uni-app 无法实现全局 Toast？这个方法做到了！

Vue3 uni-app 主包 2 MB 危机？1 个插件 10 分钟瘦身