【学习工作赛道】拾光 · ShiGuang
0. 先和大家打个招呼吧 
-
我是谁：26 届机器人技术专业应届毕业生，刚从硬件世界跨到 AI 产品世界。
-
和 TRAE 怎么配合：
写代码这件事，我其实不陌生，从 C 到 Python，从 STM32 到 ROS，大部分时候是「我知道机器该怎么动，但我说不清它为什么动」。
报名这个比赛的时候，我想试试从另一边出发：让 AI 来「感知人」。
第一次在 TRAE Work 里敲下我的需求，我写的是「人话」，不是代码：「我要极光、衬线大字、AI 能读懂我的情绪」。五分钟后浏览器里跑出 Capture 模块——我盯着那个"AI 解析情绪"按钮，恍惚了一下：做机器人时，我写 200 行 C 让舵机转 90 度；在 TRAE 里，我用一句话让 AI 写 200 行代码去「读懂」一段话。
后来 TRAE 一段段往上加：4 个数据可视化、52 周曲线、长文故事、洞察卡。我全程没碰一行 JS。最大感受是——把"想要什么"说清楚，AI 就能落地。我甚至不知道 SVG 是什么，TRAE 帮我写出 24 段雷达轮的时候，那种「原来这么简单」的感觉很真实。
最有触动的瞬间是加 30 秒自动演示那段。30 秒里自动从一个 section 滑到下一个，像看一个 5 分钟 demo 的浓缩版——「按一个按钮就能讲完整个故事」。这种设计让我意识到 AI 编程已经跨过了「会写代码」那条线，到了「听懂你想要什么」那条线。
1. Demo 简介
是什么：拾光 · ShiGuang 是一款 AI 情绪光谱日记的 Web Demo（单文件 HTML 应用，零外部依赖），用 TRAE Work 全程开发完成。用户可以用语音/文字/图片随手记录当下感受，AI 自动识别 24 种细分情绪，把数据变成四层可视化：今日光谱（24 段情绪轮）、本周热力（7×24 网格）、本月雷达（8 维轮廓）、今年曲线（52 周走势），并自动生成 AI 长文故事和年度回顾电影。
面向谁：18-30 岁的城市青年——尤其适合有内耗倾向、想自我成长但缺方法的年轻人。
主要功能：
-
AI 情绪解析：输入一段话，AI 实时返回情绪标签 + 评分 + AI 总结（演示见下图 1）
-
今日情绪光谱：24 段雷达轮 + 强度排行，可视化今日主导情绪（见下图 2）
-
一周 / 一月 / 一年：三种时间尺度的情绪可视化（热力图见下 3，雷达 + 曲线见下 4-5）
-
AI 长文故事：基于记录生成「本周故事」长文（带 pull quote、情绪标注，见下 6）
-
AI 模式洞察：自动发现用户的情绪模式（周一焦虑、凌晨 2 点最脆弱、创造类活动最治愈……见下 7）
-
年度电影预览：6 帧场景卡 + AI 文案，展示「你的 2026」短片
产品截图（实机演示真解析 + 自动播放 + 4 个数据可视化模块）：
— Hero（双按钮：开始记录 + 30 秒自动演示）
— 图 1：Capture 真解析 — 输入真实文字，AI 关键词扫描 → 4 个情绪标签（被理解 71% / 疲惫 53% / 治愈 53%）+ 模板化总结（不是固定文案）
— 图 2：30 秒自动演示运行中 — capture 区块被绿色高亮，textarea 正在自动打字
— 图 3：今日情绪光谱（24 段雷达轮 + 强度排行）
— 图 4：本周情绪热力（7×24 网格）
— 图 5：52 周年度曲线（3 月低谷 → 7-8 月巅峰 → 12 月再起的故事线）
— 图 6：AI 写的长文「本周故事」（带 pull quote + 情绪标注）
— 图 7：6 张模式洞察卡（AI 自动发现的情绪模式）
2. Demo 创作思路
灵感来源：市面上所有日记 App 都停留在「输入文字 → 存起来」。但我们不缺文字——我们缺的是「看见自己」。情绪是流动的、连续的、立体的，但被压成一行行文字后就死了。
想解决的问题：日记写不下去（空白光标让人放弃）、写了也没用（回看 3 个月前只觉得陌生）、不写更焦虑、情绪是黑箱（不知道自己什么时候高、什么时候低）。
为什么做这个方向：我们这一代年轻人越来越会「说」情绪，却越来越不会「看」情绪。给朋友发 5 分钟语音很容易，回答「你这半年的情绪曲线长什么样」却做不到。AI 让这件事第一次变得轻量——随手说一句，AI 帮你结构化成可看见的光谱。
取舍：
-
不做移动端原生 App（web demo 覆盖所有平台，验证阶段足够）
-
不做后端 + 账号系统（demo 阶段本地 sample data 即可，验证完 AI 解析流程后再说）
-
全部使用零依赖 inline（Tailwind / 图表库都不要），保证 32KB 单文件可走
3. Demo 体验地址
HTML 包下载：shiguang-demo.zip — 18KB 单文件，解压后浏览器双击 shiguang-demo.html 即可。
设计目标：零部署门槛，下载即用。任何评审老师 / 用户都能在 5 秒内进入产品。
为什么选 zip 打包：
-
评审老师不需要登录任何服务
-
不依赖任何公网域名（域名万一挂掉不影响评审）
-
18KB 体积足够小（比 1 张手机照片还小）
-
单文件 = 单故事，完整性最强
4. TRAE 实践过程
整个 Demo 是用 TRAE Work（Auto 模式） 完成的，3 段核心任务留下 Session ID：
| 步骤 | 任务 | 产物 | Session ID |
|---|---|---|---|
| 1 | 设计整体视觉系统 + Hero + Capture 模块 | hero + 极光背景 + AI 解析交互 | 4501851491797803:abf2047c3f8bb270fe0a8153b9fe6786_6a38f8f16978492b2af21265.6a38fa47ace0df1cceabbbd3.6a38fa47ace0df1cceabbbd1(2026/6/22 17:03:03) |
| 2 | 实现四种数据可视化（光谱 / 热力 / 雷达 / 曲线） | 4 个 SVG 模块，零依赖 inline | 4501851491797803:298967199eb5998b8c5bc44ab38ba6cf_6a38f8f16978492b2af21265.6a38fc48ace0df1cceabbc4b.6a38fc48ace0df1cceabbc49(2026/6/22 17:11:36) |
| 3 | 生成 AI 长文故事 + 6 张洞察卡 + 年度电影预览 | story + insights + movie | 4501851491797803:ac3d347afda210921ebd1422be66c90c_6a38f8f16978492b2af21265.6a390040ace0df1cceabbc9e.6a390040ace0df1cceabbc9c(2026/6/22 17:28:32) |
实际跑完时间（北京时间 2026/6/22）：17:03:03 → 17:11:36 → 17:28:32（25 分钟全部跑通）。
关键步骤截图（TRAE Work 跑 prompt 时实机截屏，4 张按时间排序）：
— 截图 1：17:00 — 粘贴 Prompt 1 提交，TRAE Work「思考中」（完整 prompt 文字清晰可见，Auto 模式 + 速通）
— 截图 2：17:05 — Prompt 1 跑通，左 TRAE 对话面板记录全过程（读文件→操作浏览器→优化极光），右浏览器实时预览「Capture 区块 + AI 解析情绪按钮」
— 截图 3：21:52 — Prompt 2 跑完，4 个数据可视化 section（Section 02 今日光谱 / 03 周热力 / 04 月雷达 / 05 年曲线）全部添加并通过浏览器验证，任务耗时 7m 22s
— 截图 4：21:52 — Prompt 3 跑完，3 个叙事化 section + CTA（Section 06 本周故事 / 07 AI 洞察卡 / 08 年度电影 / 09 CTA）全部完成，文件压缩到 39.7KB（< 40KB），DOM 验证通过
用 TRAE 的具体感受：
-
Auto 模式对「前端视觉类需求」尤其强——把 vibe 写清楚（“极光 + 衬线标题 + 玻璃拟态”）它能直接落到 CSS
-
内联 SVG 的数据可视化比想象中更顺——把"24 段雷达轮"的需求说清楚，AI 一次给到的就是可运行版本
-
我犯过的错：第一次的 24 段情绪轮用了
aspect-ratio: 1没设 width，导致塌成 0×0。改一行 CSS 解决 -
第二次犯的错：年度曲线用了正弦波，太单调。改成手调 52 个数据点后，曲线讲出了"3 月低谷 → 8 月巅峰"的故事
总计开发时长：约 2 小时（含调试 + 视觉调整）
代码量：1 个 HTML 文件，32KB，800 行
shiguang-demo.zip (18.3 KB)