【More-than-coding】一周时间,我vibe coding了一个记录旅行点滴的APP

摘要

过去一周我拉着 TRAE SOLO 从 Figma 设计稿开始,肝出了一个叫「去哪玩」的旅行记录 App。从此刻开始,以前那些我不想发朋友圈却想记录下来的 每个瞬间,将不只短暂存在于那一刻的脑海

背景

先交代下身份—— 我是工业设计出身的产品经理,虽然完全不懂代码(毕竟工业设计作为理工科专业却学的是高数C哈哈哈),但是产品设计以及基础的 Figma UI稿还是没问题,恰好在vibe coding飞速进步的今天,我擅长的这两点完美覆盖了写代码以外最难的两个点。

影视飓风的Tim说:“你可以不懂摄影,但一定要记录生活。”、“影像的意义在于:把尽兴的瞬间变成永恒。” 但我虽然经常拍拍拍,却在回看时却发现仅凭相册里繁杂的照片,我仍然会遗忘很多当时的感受和体会,所以我一直想给自己做个记录 App。记录下每一张照片背后的故事,就像几年前我拿着马克笔在每张拍立得背后手写下“到此一游”一样。

身份合理,动机充足,接下来就是我和TRAE SOLO的 “一拍即合”

成品预览

怕你们都走完了,我先把成品页面放出来视图留一下你们哈哈哈:


一句话功能介绍:你可以在「去哪玩」里留下旅行中的每一个值得记录的瞬间

OK接下来就是我一个大致的流程分享(因为过程中很多节点都忘了及时截图记录了,所以部分配图是回头重新做了一个示意的,酌情参考即可哈,这也是本人第一次完整vibe coding,并非最佳实践,各位大佬看一乐就好)

实践过程

怎么拆的任务

首先告诉TRAE:“帮我做个旅行记录 App”,然后坐等成品从天而降就好了。才怪!(开个玩笑哈哈哈,当然我真的觉得在不久的将来用户与应用的交互真的会简单到这个地步)

我把项目整体拆成了 4 个大阶段,每个阶段又拆成小步骤,一步一步推进:

阶段 干什么 备注
Phase 1 想法拆解 + 功能 PRD 撰写 拜托!这可是爷的本职工作!简直易如反掌
Phase 2 Figma 古法手搓UI参考 vibe design 我感觉目前还是 emm 味太重所以我选择自己来
Phase 3 交给 TRAE 产出技术方案 + 确认 虽然说实话我看不懂它写的技术方案嘿嘿,但你可以让他给你解释
Phase 4 按照技术方案执行 + 不断测试打磨 发现 BUG ! 解决BUG ! 再发现更多的BUG !

TRAE 都做了什么「部分过程展示」

① Figma MCP

不得不说 TRAE 的 MCP 真的巨好用巨丝滑,连接没出现任何报错一次搞定,amazing。我把 Figma 设计稿通过 MCP 工具接给 TRAE ,它直接读取节点参数——色值、字号、间距、圆角、阴影,精确到像素级别。自动给我生成了一套完整的 SwiftUI 设计令牌(AppColorsAppFontsAppStyles),后面所有页面都从这套令牌长出来的。



② 完整架构设计

TRAE 给项目规划了三层架构:View → ViewModel → SwiftData。数据模型是四级套娃关系:Trip(旅行)→ Destination(目的地)→ Moment(瞬间)→ MediaItem(照片/视频)。还设计了照片压缩存储的策略——怕你删了相册里的原图,App 里的旅行照片也跟着没了,所以照片会存一份压缩副本。


③ 全球城市搜索

这是最经典的坑。我在测试中发现搜“东京”、“巴黎”,Apple Maps 在中国区死活搜不出来(后来知道时 API 限制)。TRAE 再试了几次以后没有硬扛,而是提出了一个"双引擎"方案:自己手撸了一个内置 360+ 全球热门城市的本地词库(中英文 + 拼音全支持),作为主搜索引擎;苹果原生搜索作为补充引擎,专门兜底国内地址,同时还加了 POI 去噪优化搜索结果。


④ 动效 & 触觉反馈——细节拉满

卡片飞入、按压回弹、时间线渐显、"计划中…"闪烁、浮动按钮上下呼吸、数据统计数字跳动、地图标注 pop 弹出…每个交互都有对应动效。最骚的是还接了全局 Haptic 触觉反馈——点一下震一下,那个高级感拿捏了。


卡片展开收起动效地图定位、地点跳跃动效

我的 Prompt 风格

跟 TRAE 协作,我总结出来最重要的一句话:别当甲方爸爸,要当结对队友。

具体怎么操作的?举几个真实 prompt 给大家参考:

“请你利用 Figma MCP ,去 Figma 读取记录频道首页的卡片样式参数——色值、字号、间距、圆角、阴影全部提取出来,输出为 SwiftUI 设计规范。”

“瞬间编辑页的拖拽排序在真机上只有 30fps,掉帧明显。分析下 MomentEditView 里 DragGesture 的实现,定位瓶颈,先告诉我解决方案,我确认之后再进行修改。”

“Apple Maps 中国区搜不到东京巴黎,这是 API 限制还是咱写的有问题?如果是限制,请你给出新的替代方案,不要在原方案上打补丁。”

另外我还干了一件事——跟 TRAE 一起写了份《开发自检清单》,6 条铁律,每次对话它必须先读一遍。比如

这份清单是后期质量稳定的关键,强烈建议搞一份,同时利用规则设置强制其阅读

效果与总结

到底提效了多少?

说实话这个没法用"原来 4 小时现在 40 分钟"来衡量——因为如果没有 TRAE 的帮助,这个 App 根本不会存在。我一个完全不懂代码的人,靠自学做到这个程度,保守估计需要半年(还要考虑到中间极有可能会放弃哈哈哈)。

我的思考

用了一周 TRAE 之后,我发现几个关键点:

  1. 你得懂产品,AI 懂工程 —— 需求拆解、优先级判断、取舍决策,这些是你的工作。别指望 AI 帮你想清楚要做什么。
  2. 建立“规矩”比写 prompt 重要 —— 我写的那份《开发自检清单》,效果远大于任何花里胡哨的 prompt engineering。它让 AI 的输出从"碰运气"变成了"可预期"。
  3. 要敢砍需求、敢推翻重来 —— SwiftUI 做不了文字描边?不做了。拖拽方案叠了两次补丁还卡?那就推翻重写。跟 AI 协作最忌讳的就是"沉没成本心态"。

一句话总结:不会写代码的产品经理 + TRAE SOLO = 一周一个 App。
而 Vibe coding 的精髓不单单是"让 AI 帮你写代码",而是你当 PM 它当工程师,你们是一个 team

后续规划

这个 APP 当然不会就此为止,我还有太多太多想法未在它身上实现: AI 辅助旅游规划、智能旅行目的地推荐、旅行记账等等等等,但我相信只要 勇敢迈出第一步,以后的每一步都会越走越快。哦对了,我尽快攒够 99 美元然后上架 AppStore 哈哈哈(开玩笑的其实是我觉得现在还是个雏形,希望它能以一个更完整的形态和大家见面)。

最后,感谢大家能看到这里,也感谢这次活动提供的分享机会,希望大家都能用 TRAE SOLO 做出好玩的东西! :star_struck:

小彩蛋
二次编辑,忍不住跟大家分享下我为它设计的logo


灵感来自于陪我走南闯北的鲷鱼烧熊猫,哈哈哈可爱吧

耗电同学,敬上。

自己会画FIGMA对vibe coding还是很有帮助的 :+1:

感觉很不错 上线的话用起来应该挺方便的

好厉害,学习了

这个 App 可以啊,云端存储还是本地存储?

是的哈哈哈,感觉目前各种vibe design工具用下来,普遍AI味还是太重,而且图片没有详细的设计规范对后续开发也是隐患

感谢感谢,我尽快完善争取早日上线哈哈哈

感谢感谢!共同学习!

目前因为没上线还处在我自己调试的阶段先用的本地存储,后续上线前会考虑接云端存储或者利用iCloud做数据备份 :zany_face:

牛啊这个好,比有些高票的好太多了,投了

(帖子已被作者删除)

感谢支持! :laughing:

(帖子已被作者删除)

很厉害的产品

感谢感谢!

这产品有点意思

这个有意思

good idea