【生活娱乐赛道】+小金库大作战
0. 先和大家打个招呼吧 
大家好，我是 Crystal，是一名研究生，也是大厂打工人。
这次我做的作品叫《小金库大作战》，是一个面向理财新手的基金投资辅助网站。对我来说，这个作品最特别的地方，不只是把一个想法做成了 Demo，而是我第一次非常明显地感受到：原来就算不是专业前端开发者，也可以和 TRAE 一起，把脑子里的产品想法一步步变成一个真的能跑、能演示、能分享的网站。
我和 TRAE 的配合方式，其实很像“口头搭产品”。我不是先写复杂的技术文档，而是先把想法像聊天一样一句句讲给它听：这个产品是给谁用的、首页应该先看到什么、基金走势要怎么展示、提醒模块不要像系统报错弹窗、理财知识区要更像产品内嵌知识中心而不是文章页。TRAE 会把这些自然语言需求拆成页面结构、组件、交互和数据逻辑，再快速生成出可运行的前端原型。
最让我觉得“原来这么简单”的一步，是把抽象想法变成具体界面。以前我会卡在“我知道自己想要什么，但我不会把它真正做出来”，现在我可以直接说：首页不要像宣传页，要像一个真的产品工作台；需要 14:45 决策提醒；我的持仓要支持 OCR 导入支付宝截图。TRAE 就能把这些需求逐步变成真实页面和功能。这种感觉很像把一个原本停留在脑海里的产品雏形，直接拉进现实。
它帮我跨过去的最大门槛，是从“我有想法”到“我有作品”这一步。以前我可能会因为不会前端实现、不会组件搭建、不会部署而停住；这次是先把核心想法说清楚，再和 TRAE 一轮轮打磨页面结构、模块逻辑、交互节奏和视觉风格，最后拿到一个完整、可运行、适合比赛展示的 Demo。这种创作体验对我来说非常新鲜，也很有成就感。
1. Demo 简介
是什么
《小金库大作战》是一个面向理财新手的轻量基金投资辅助网站，定位为“互联网产品风格的理财决策助手”，而不是传统券商后台，也不是单纯的宣传页。
面向谁
核心用户是刚接触基金投资、希望建立理财习惯、但缺乏经验和系统认知的年轻用户与投资新手。
主要功能
1. 准实时基金看板
网站提供 3 到 5 只示例基金的看板信息，包括基金名称、代码、单位净值、涨跌幅、估算收益、风险标签，以及 1日 / 5日 / 30日 的走势切换。
同时页面保留了真实数据适配入口，当前默认使用 mock 数据做准实时轮询刷新，方便在比赛场景下稳定演示。
建议配图：
[截图1：首页状态总览 + 自选基金看板 ]
2. 14:45 决策提醒 + 盘面摘要
系统会结合本地时间，在接近 14:45 时触发页面内提醒，并支持浏览器通知。
同时网站会自动生成“上午盘面摘要”和“下午盘面摘要”，用理财新手也能看懂的自然语言，总结当天市场变化，帮助用户在临近收盘前形成自己的判断。
建议配图：
[截图2：决策提醒条 + 盘面摘要模块]
3. 我的持仓 + 投资方案生成器
用户可以录入自己的持仓，查看实时走势、今日收益和累计收益；也支持通过 OCR 识别支付宝截图来辅助导入持仓信息。
此外，用户还可以输入预算、风险偏好、投资周期和理财目标，生成一个新手友好的模拟投资方案，看到建议的基金类型占比、投入节奏和风险提示。
建议配图：
[截图3：我的持仓模块]
[截图4：投资方案生成器]
2. Demo 创作思路
灵感来源
这个作品的灵感来自一个很常见但容易被忽视的现实：很多理财新手并不是完全没有投资意愿，而是“看不懂、跟不上、不敢动”。
基金平台里的信息往往比较分散，很多页面更偏交易工具或后台系统，对新手并不友好。尤其在盘中，用户经常只能看到零散数据，却看不到一个真正对自己有帮助、能快速形成判断的工作台。
想解决的问题
我主要想解决三个问题：
-
新手看不懂盘中变化
很多人知道基金适合长期看，但在实际使用时，仍然会关心当天走势、盘中波动、是否需要调整节奏。现有很多产品并没有把这些信息整合成适合普通人理解的形式。 -
信息分散，缺少统一整理
基金走势、持仓收益、市场摘要、风险认知、投资节奏这些内容，通常分布在不同页面甚至不同 App 里。新手很难形成一个连续的决策路径。 -
很难建立长期习惯
很多用户不是输在判断力，而是输在无法持续。没有节奏提醒、没有轻量反馈、没有微小成就感，就很容易在几次波动之后放弃。
为什么做这个方向
我没有把它做成一个“全功能金融平台”，而是刻意把方向收窄成“理财新手的轻量决策助手”。
因为我判断，比赛中的 Demo 不一定要功能最多，而是要让人一眼看懂：这个产品到底解决什么问题，为什么这种交互方式更适合目标用户。
所以我做了几个取舍：
-
不做复杂后端，优先保证前端完整可跑、可演示；
-
不做夸张收益承诺，而是强调“辅助判断”和“建立习惯”；
-
不做冷冰冰的后台表格，而是做成更像互联网产品工作台的界面；
-
不只做静态页面，而是把走势、摘要、提醒、持仓、打卡这些模块做出联动感。
3. Demo 体验地址
我选择的体验方式是：http://localhost:5173/
4. TRAE 实践过程
这次 Demo 基本是通过我和 TRAE 的多轮协作完成的，整体流程大致如下。
第一步：明确产品定位与核心用户
我先用自然语言向 TRAE 描述产品定位：
这是一个面向理财新手的基金投资辅助网站，关键词包括基金盘中走势、14:45 决策提醒、投资方案生成、新手理财打卡、轻科普等。
同时我也强调，它不是传统券商后台，也不是纯宣传页，而是一个“别人打开后能立刻理解并操作几个核心功能”的产品原型。
第二步：生成完整前端项目骨架
在需求明确后，我让 TRAE 直接生成完整前端项目，而不是只给高层方案。
项目基于 React + Vite + TypeScript + Tailwind CSS，包含页面结构、组件拆分、mock 数据、localStorage 持久化、图表展示等内容，并且能本地运行和构建部署。
第三步：补齐核心交互功能
随后我和 TRAE 一起把功能从“页面展示”推进到“真实可交互”：
-
基金看板支持多个基金示例和不同周期走势切换；
-
上午/下午盘面摘要根据模拟走势自动生成；
-
14:45 决策提醒支持页面提醒卡片、toast 和 Notification API；
-
投资方案生成器支持输入预算、风险偏好、投资周期和理财目标；
-
打卡系统支持 localStorage 持久化；
-
我的持仓模块支持手动录入和 OCR 导入截图。
第四步：持续打磨页面结构与视觉风格
后续我又多轮和 TRAE 一起打磨视觉与布局。
一开始页面更偏“完整功能展示”，但还不够有比赛作品的质感。后来我继续提出要求，比如：
-
首屏不要像宣传页，要像产品工作台；
-
风格要更友好、更有活力；
-
模块结构要更清楚，信息层级要更接近成熟产品；
-
参考优秀页面的模块编排方式，做成“先给结论，再展开功能”的节奏。
在这轮迭代后，页面首页被重构为状态总览区，先展示时间、数据状态、平均涨跌、涨跌分布、今日领跑和 14:45 决策提醒，再进入自选基金看板、我的持仓、盘面摘要、方案生成器、打卡和轻课堂等模块，整体更像一个真实产品。
开发关键步骤截图
请在这里插入不少于 3 张截图，建议包括：
-
[开发截图1：你向 TRAE 描述产品需求的对话截图] -
[开发截图2：TRAE 生成并搭建前端项目结构的过程截图]
[开发截图3：你要求优化页面结构 / 视觉风格的对话截图]
[开发截图4：最终页面运行效果截图（可选）]
关键任务对话 Session ID
请在这里附上不少于 3 个 Session ID，用于证明作品由 TRAE 协助开发完成：
-
Session ID 1：[6a3e3ee2638c1639b580df5e] -
Session ID 2：[6a3e4fa9638c1639b580ea76] -
Session ID 3：[6a3e4fe7638c1639b580ea9a]
5. 对应的报名审核通过的帖子链接
报名审核通过的帖子链接： 【生活娱乐赛道】小金库大作战
经验总结
这次做《小金库大作战》，我最大的感受是：TRAE 并不是简单替你写代码，它更像一个能持续理解你意图、并陪你一起把想法落地的协作伙伴。
以前我会觉得，做一个“可运行、可部署、可展示”的产品 Demo，必须先掌握很多前端技术、交互逻辑、工程配置。但这次我发现，只要你能把用户是谁、想解决什么问题、页面该先展示什么讲清楚，TRAE 就能把这些需求逐步翻译成代码、界面和交互。
当然，过程中也不是一步到位。真正有效的方式不是“丢一句需求就等结果”，而是不断提出更具体的反馈，比如：
-
这个页面还不够像产品；
-
首页不该先讲概念，应该先给结论；
-
提醒模块不要像报错弹窗；
-
模块结构要更清楚；
-
整体气质要更适合理财新手。
这种来回迭代的过程，让我第一次比较完整地体验到：AI 辅助开发真正有价值的地方，不只是效率，而是把“不会做”变成“能参与、能判断、能推动作品完成”。