【生活娱乐赛道】Save-it——做一个不再让收藏和转发吃灰的 AI App
0. 先和大家打个招呼吧 
-
你是谁： 大家好，我是Ralvin，一名来自浙江师范大学数字媒体艺术专业的大三学生。平时我对 AI 创作和 vibe coding 比较感兴趣，也有不少用其他平台把想法快速做成 Demo 的经验。作为数字媒体艺术专业的学生，我会比较关注交互、视觉和内容表达，也会在手机上高频刷到各种生活技巧、设计参考、商品链接、教程文章和突然觉得“以后可能用得上”的内容。
-
你是怎么用 TRAE 把 Demo 做出来的：这次 Demo 的灵感来自一个很具体的瞬间：我看到 TRAE 举办 AI 创造力大赛，本来下意识想把比赛信息转发到微信聊天框里先存着。结果打开聊天记录时，我突然看到里面已经堆了很多从不同平台转发过来的内容，有文章、有帖子、有链接，也有平时觉得不错但之后很少再翻出来的东西。那一刻我就想到：既然我本来就会用 vibe coding 做 Demo，为什么不直接用 TRAE 做一个可以整合这些转发内容的 App？
-
这次 Demo 是我和 TRAE 一起完成的。让我印象比较深的是，我不需要一开始就把所有产品逻辑想清楚，而是可以像和一个产品搭档聊天一样，把“我为什么会有这个想法”“用户平时怎么收藏”“这个和 Notion 有什么区别”一点点说出来。TRAE 会帮我提炼关键词、调整赛道定位、补充用户痛点，还能直接生成可展示的 HTML 页面。和我之前用其他平台 vibe coding 的体验相比，这次更像是在和 TRAE 一起把一个真实生活场景拆开，再重新组合成一个能被别人快速理解的产品 Demo。
1. Demo 简介
-
是什么：“Save-it(存一下)”是一款跨平台 AI 整理收藏夹内容的 App：
-
面向谁：面向所有在日常生活中经常收藏、转发、保存内容的人;
-
主要功能：它解决的是一个很常见但容易被忽略的问题：我们每天都会刷到很多“以后可能用得上”的东西，比如小红书生活技巧、抖音视频、公众号文章、商品链接、旅行攻略、网页教程、聊天里的重要信息。但这些内容往往散落在不同 App、不同收藏夹、文件传输助手和聊天记录里，最后变成“看起来收藏了，实际上再也找不到”。
2. Demo 创作思路
-
灵感来源：这个 Demo 的灵感来自我准备参加 TRAE AI 创造力大赛时的一个真实瞬间。当时我看到比赛信息，第一反应是把它转发到微信聊天框里先存着，但点开聊天记录之后，我看到里面已经有很多来自不同平台的转发内容：有小红书帖子、公众号文章、网页链接，也有一些平时觉得不错、之后可能会用上的内容。它们当下都很有价值，但混在聊天记录里以后，很快就变成了很难重新找到的信息碎片。
这让我意识到，“转发”和“收藏”其实是手机里非常高频的动作：看到一个有用的帖子，会先收藏；看到一个之后可能要买的东西，会先转发给自己；看到一个好观点或教程，会丢进文件传输助手。但时间久了以后，内容越来越多，平台越来越分散，真正需要用的时候反而很难找回来。
-
想解决的问题：我想解决的问题不是“大家不会收藏”，而是很多内容“收藏之后没有被整理，也很难再次使用”。现在很多平台都有自己的收藏功能，但它们基本只服务于平台内部。小红书收藏在小红书里，抖音收藏在抖音里，公众号文章在微信里，网页链接在浏览器里，聊天里的信息又沉在聊天记录里。用户需要记住内容来自哪里、什么时候存的、关键词是什么，这其实很不符合日常使用习惯;
-
为什么做这个方向：我选择做这个方向，是因为它比单纯的笔记工具或知识管理工具更前置、更生活化。Notion、飞书文档、Obsidian 这类工具更适合用户已经决定要认真整理知识的时候使用；但“存一下”面对的是更日常、更轻量的瞬间：用户只是觉得“以后可能用得上”，还没想好怎么分类，也不想立刻整理。这个 Demo 的重点就是让 AI 先接住这些散落内容，再帮用户自动变成一个统一、清晰、可搜索的个人收藏库。
-
界面展示：
-
onboarding：引导用户熟悉app的主要功能和使用方法
-
主页：让用户快速书序自己最近收藏了什么内容，同时也可以快速搜素想要找的收藏过的内容
-
收藏夹：AI根据平台，内容等要素进行归类，用户还可以直接新建主题文件夹，将相关的内容都扔进来，ai自动帮忙总结。同时，用户也可以建立与其他用户的共享文件夹，比如要规划一起出去游玩，把刷到的好的旅游攻略帖子都扔进来，ai还会根据帖子内容进行分析，完全p人友好！
-
回顾：ai总结大数据趋势，告诉你最近你的收藏都在关注点啥，让盲目的刷手机，也变得有意义了起来
-
我的：将常用平台的收藏和转发与Save-it结合，让每一次收藏和转发都轻量化
3. Demo 体验地址（三选一）
- 部署随时可公开访问的体验链接：https://save-it-cn.pages.dev/
- https://save-it-iota-coral.vercel.app（此为原链接
，可能因
等原因无法访问，请使用上面的新添加的体验链接）
4. TRAE 实践过程
-
清晰展示用 TRAE 完成 Demo 开发的完整流程；（中间有些步骤属于细节和提示词不到位等原因导致的反复调整，不进行展示，主要展示demo关键性的从0-1并优化的全流程）
-
1..4351201924900939:b573c84732ecfd35f9052f3be328f251_6a54f23b6480d33c9120d635.6a5505546480d33c9120d637.6a550554d9213fe400f83f44:Trae CN.T(2026/7/13 23:33:40)——首先现根据在trae work里梳理好的产品框架和界面，生成对应的demo提示词，发送给trae ide进行第一版本的原型制作：
作为最初的框架，完成度达到了70%，后续的操作主要在调整用户体验和ui界面，以及补充一些使用细节。
-
2..4351201924900939:49fa010664a4265570389d3830f46be2_6a54f23b6480d33c9120d635.6a55b9ac6480d33c9120d771.6a55b9abd9213fe400f83f47:Trae CN.T(2026/7/14 12:23:08)——为了后续的demo观看便捷性，将demo在html的展示限定尺寸在iphone17pro的大小比例：
-
3..4351201924900939:7104ec5823bfc634b7dcd937bb9a842c_6a54f23b6480d33c9120d635.6a55c9236480d33c9120d7d9.6a55c923d9213fe400f83f49:Trae CN.T(2026/7/14 13:29:07)——为了将我的产品想法更加贴近用户，我去采访了几个朋友，询问了他们对于我这个创意的看法，以及对于现有demo可以完善改进的建议，并总结成几个优化点发送给trae，进行优化：
-
4..4351201924900939:c82360da242e7b9c490865b75567841a_6a54f23b6480d33c9120d635.6a55ceb36480d33c9120d817.6a55ceb3d9213fe400f83f4b:Trae CN.T(2026/7/14 13:52:51)——在用户调研的时候，想到收藏转发还有可能是朋友之间的，所以打算补充一个共享功能，平时朋友总是会在刷到好玩好吃的东西的时候，约定下次见面也要干这件事，但是每次一见面就忘记，如果能够有一个文件夹，每次转发的时候都能够整理哈并安排在日程上，那每次约会都会变得井井有条：
-
5..4351201924900939:c3ec45a4ccd8cb35cd9608573b096841_6a54f23b6480d33c9120d635.6a55d3726480d33c9120d8af.6a55d372d9213fe400f83f4d:Trae CN.T(2026/7/14 14:13:06)——等到demo阶段的功能完善到80%左右的时候，就开始完善ui，因为当ui调整的更符合用户实际使用习惯的时候，能够发现更多现阶段没办法判断的问题，比如功能入口，板块的层级等等：
-
6..4351201924900939:ad9aaa90db0fe399b3e2bff214d361a8_6a54f23b6480d33c9120d635.6a55f91f533122a03dc3b179.6a55f91f8989cb7ddb850787:Trae CN.T(2026/7/14 16:53:51)——发现了现有框架上有问题，比如说“首页”的功能往往会跳转至跟“首页”同一层级的板块中，而非进入子层级，于是决定二次梳理框架，并实时优化：
-
7..4351201924900939:4f25632ab250f95fe65906b84aee61a1_6a54f23b6480d33c9120d635.6a561f7d533122a03dc3b2ac.6a561f7d8989cb7ddb85078b:Trae CN.T(2026/7/14 19:37:33)——作为一个可运行层面的demo，个人觉得已经完善至了85%，如果反复埋头调整，并不能达到质的蜕变，于是决定继续去做产品调研，这次主要聚焦在ui设计上，在Pinterest和mobbin等网站翻越了许多参考，发现自己如果做完一个完整的产品，还没有制作onboarding的引入界面，这个板块可以最快速度的向用户介绍我们这款产品到底是什么，可以干什么，能够帮助用户达到什么目的，所以我决定进行补充和完善，为了让效果更佳，我还先使用别的软件制作了软件的logo和logo的生长动画放在开头，用于吸引观众眼球，反复迭代了好几个版面，下面展示暂时的成果：
-
8..4351201924900939:d519ebd9be561e7b9358234b709a3043_6a54f23b6480d33c9120d635.6a566887533122a03dc3b332.6a5668878989cb7ddb850791:Trae CN.T(2026/7/15 00:49:11)——继续优化app的ui，找了参考 ，并借助ai进行提示词撰写，使得参考的配色能够更佳适配Save-it的信息层级，做到配色服务于用户，而非单纯的颜色组合：
-
9..4351201924900939:9698a72a730924103a3cb73c121e5ef5_6a54f23b6480d33c9120d635.6a56ffee533122a03dc3b399.6a56ffed8989cb7ddb850792:Trae CN.T(2026/7/15 11:35:10)——接下去将这些收藏转发的内容替换成真实的不同平台的链接进行效果展示：
-
10..4351201924900939:c7867be957c024dee790bccffaed31c4_6a54f23b6480d33c9120d635.6a570a62533122a03dc3b3f5.6a570a618989cb7ddb850797:Trae CN.T(2026/7/15 12:19:46)——先将demo部署成随时可公开访问的体验链接，并且要做到后续如果有修改能够实时同步的那种，所以还同时让trae ide帮我配置了自动部署：
5. 对应的报名审核通过的帖子链接
