【生活娱乐赛道】 Aura
【正文】 至少包含以下 4 个部分，可以增加额外的部分（比如自我介绍、经验总结、踩坑复盘等）
0. 先和大家打个招呼吧 
-
Who： 一名大学生
-
How： 想法定位——需求——产品——详细的PRD——反复优化；体验感，需要分多次不断修复，一次性输入太多需求无法同时被满足，对需求的提词也有一定的要求，越详细越能不出错，越宽泛越无法完全满足，但一定程度可以激发灵感
1. Demo 简介
Aura：一款 AI 驱动的 iPhone 日常简报 App 原型。它不是天气应用，而是一个会在正确的时间主动推送与你生活相关的实用建议的智能助手。
**核心用户 ：**每天需要根据天气安排通勤、运动、穿衣和照顾宠物的人群 – 上班族、学生、养宠人士。
核心功能：
- 定时智能简报：每天在 4 个关键时间点（晨间 08:00 / 高温预警 12:30 / 晚间 18:20 / 明日预览 21:30）主动推送个性化生活建议，而非让用户去查天气
- AI 因果推理：每条简报不只是报温度，而是通过 “Why Now?” 推理链条解释为什么现在提醒你 – 例如 “湿度82% + 步行通勤 = 中暑风险3倍，所以提前10分钟出门”
- 宠物关怀模块：用户设置宠物信息后，所有简报自动嵌入猫/狗专属关怀建议（高温天提醒饮水量、雨天遛狗防护、猫咪防暑等）
产品亮点：
- iPhone 锁屏 → 通知列表 → 详情卡片 的完整用户旅程
- 4 种天气动态主题（晴天/日落/夜晚/高温），每种配有独立动画角色
- 天气心情评分系统 + 14天心情日历，AI 根据历史评分自适应推送关怀话语
- 宠物关怀提醒贯穿所有简报页面
二、Demo 创作思路
**（一）灵感来源：**日常生活中对于天气的判断常容易滞后，例如出行后一段时间才下雨但没带伞，下午突然降温但是没带外套，并且即使大家都知道要"看天气预报"，但天气预报给的是数据（温度、湿度、风力），人们常常无法只通过这些数据来进行出行决策、着装决策等，因为人真正需要的是"基于这些数据，我该怎么行动"。比如"湿度82%"对大多数人毫无意义，但"今天别穿深色衣服，带把伞备用"就有直接价值。本质是希望把天气数据翻译成生活决策的 AI 助手，并会主动以人们不反感的方式轻松及时推送到人们面前。
（二）想解决的问题：
1. 信息过载 × 决策匮乏：天气 App 给了太多数据，但用户仍不知道"今天出门到底该怎么做"
2. 推送疲劳：现在的天气推送要么太频繁（每小时下雨提醒），要么太晚（高温预警发出时人已经在户外了）
3.宠物被忽视：随着养宠人数的上涨，天气对宠物的影响也应当被重视
4. 情绪与天气关联缺失：连续高温闷热或阴雨连绵会影响心情，但没有产品会根据你的天气感受历史给你心理关怀
（三）为什么做这个方向：
我选择"主动推送式生活助手"而非"数据查询式天气 App"，是因为：
-
天气信息不需要被"查询" – 它应该在你需要知道的时候主动找到你
-
用户不需要理解气象术语，需要的是"穿什么、什么时候出门、要不要遛狗
Aura-App-Demo.zip (31.2 KB)
"
-
作为 Demo，这个方向能完整展示 AI 的推理能力、个性化、情感关怀
三、Demo 体验地址
- 交互式可体验 HTML 文件已打包为 Zip（见附件）。
（一）使用方式： 解压后用浏览器直接打开 `Aura-Demo.html` 即可。无需安装任何依赖，无需服务器。
（二）完整体验路径：
1. 锁屏界面 → 点击通知卡片进入
2. 通知列表 → 点击 4 条通知分别进入晨间/高温/晚间/明日详情
3. 详情页内上下滚动查看完整内容（Hero动画、Comfort Meter、AI洞察、建议卡片、AI推理链、宠物关怀）
4. 点击底部评分按钮（笑脸图标）体验天气心情评分
5. 明日预览页底部查看 14 天心情日历和 AI 关怀消息
6. 返回通知列表 → 点击设置图标体验 Onboarding 个性化设置（含宠物选择）
7. 点击书签图标进入收藏页
四、TRAE 实践过程
（一）完整开发流程：
整个 Demo 通过 TRAE 的多轮对话迭代完成，从 PRD 到最终可提交的交互原型，全程无人工编码。
**1. V1 设计稿（.design Canvas 项目）**199441592897785:cc5623383369e95b3557a44b9c9f3f50_6a4349b7ccaecc84ea48ce2c.6a4349b7ccaecc84ea48ce2f.6a4349b7ccaecc84ea48ce2d:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/6/30 12:44:39)
- 向 TRAE 描述 Aura 的产品 PRD，包含 7 个页面的详细规格（通知时间线、AI 详情卡片、用户引导、天气主题）
- TRAE 生成了 7 个 .design Canvas 页面节点 + 品牌色彩系统 CSS
- 使用 fill-html-head.mjs 注入 HTML 基础设施，Tailwind v4 CDN 实现毛玻璃 UI
2. V2 重大升级199441592897785:690ab7c0be10dbdeed837fddaba0ba65_6a4349b7ccaecc84ea48ce2c.6a43831bccaecc84ea48d1fe.6a43831bccaecc84ea48d1fc:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/6/30 16:49:31)
- 要求在 V1 基础上增加：锁屏通知、icon-only 操作栏、宠物关怀模块、动态天气 Hero（含角色动画）、AI Timeline 推理格式
- TRAE 生成了 7 个 V2 页面（supersedesPageId 关联 V1）
- 动态天气主题：晴天蓝天渐变 / 日落紫粉渐变 / 夜晚深蓝渐变 / 高温红橙渐变
3. 多轮 UI 精修199441592897785:bb61712c5911f1ec600963b8fceb84a5_6a4349b7ccaecc84ea48ce2c.6a44d8c3ccaecc84ea48d337.6a44d8c3ccaecc84ea48d335:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/1 17:07:15)
199441592897785:a1dbd964412933f14c5e9d65c55045e8_6a4349b7ccaecc84ea48ce2c.6a45014accaecc84ea48d3a5.6a45014accaecc84ea48d3a3:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/1 20:00:10)
- 通过 4 轮精确反馈修复：Comfort Meter 间距、文字颜色、角色改为白色简笔画、Hero 布局（温度居中/角色右下角）、Hero 与背景融合（去掉独立卡片感）
4. 创意提案文档
- 让 TRAE 生成一份可展示的 HTML 提案文档（12 个章节，Apple Keynote 风格）
- 包含：产品定位、核心功能、技术架构、设计系统、动画说明、用户旅程
5. 交互原型开发
- 将 .design Canvas 页面转换为可提交的交互 Demo
- 从 React + Vite 方案（npm install 环境限制）切换到零依赖单 HTML 文件方案
- TRAE 生成了 2500+ 行的单文件 HTML，包含全部 8 个页面和完整交互逻辑
6. 持续优化（5 轮反馈迭代）
199441592897785:9bb2d0f89d1456f8a2ed7ab37b76fc2e_6a4349b7ccaecc84ea48ce2c.6a451d8fccaecc84ea48d4ff.6a451d8fccaecc84ea48d4fd:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/1 22:00:47)
- 修复滚动条隐形化
- 宠物关怀扩展到 4 个详情页
- 高温预警徽章位置 + 喝水小人杯子水动画
- mood-label 从滚动改为居中固定
- 撑伞小人伞柄不穿过身体
- 小人笔画连续性优化（line → path + Q 曲线）
- Comfort Meter 添加 emoji
- 天气心情评分系统 + 14天日历
- 小人动画增强（头部摇晃/身体摆动/后仰等）
（二）技术栈：
- 设计：.design Canvas + Tailwind v4 CDN + 自定义 CSS
- 交互 Demo：原生 HTML + CSS + Vanilla JavaScript（零依赖）
- 动画：纯 CSS @keyframes（float/walk/drink/umbrella/sweat/rain 等）
- 持久化：localStorage（用户设置、收藏、评分记录）
- 总代码量：约 2500 行（单文件 HTML，内联 CSS + JS）
（三）关键特性：
- 8 个可导航页面，CSS transition 页面切换动画
- 4 种天气背景主题，每种配有独立的 SVG 角色动画
- 毛玻璃 UI（backdrop-filter: blur(24px)）
- SVG 图标全部内联（无外部依赖）
5. 对应的报名审核通过的帖子链接