【生活娱乐赛道】一句话，让 AI 把你的数据变成可视故事 · LIFESTORY
TRAE AI 创造力大赛 · 初赛 Demo 作品帖（报名赛道：生活娱乐）
项目版本：v0.3.8e（最终版，2026-06-30 部署）
报名帖：u1875147452590988（生活娱乐赛道 · 报名已通过）
一、Demo 简介
是什么
LIFESTORY 是一款「一句话生成年度数据故事」的纯前端 Web 应用。用户只需要输入一句自然语言（比如"帮我看看 2026 一年"），AI 就会结合用户的个人数据，自动生成 7 张带图表 + 文案的故事卡片，最终可以导出成可分享的 Brutal 风格海报。
形态：单页 Web 应用（PWA-ready，Cloudflare Pages 静态部署，零后端依赖）
部署地址：https://master.ai-life-data-story.pages.dev
面向谁
-
重度数据记录者：记了 1 年账、跑了 1 年步、拍了 1 年照片，但从不回头看
-
数字原生代年轻人：每年 12 月想发个"年度回顾"到朋友圈 / 小红书
-
AI + 数据故事的爱好者：想体验"自然语言驱动数据可视化"
-
隐私敏感型用户：不愿意把数据上传到云端，本地解析 + 本地生成的差异化优势
主要功能（3 个核心）
1. 一句话生成故事
不需要复杂操作。在首页文本框输入"帮我看看 2026 一年"之类的自然语言，点击立即生成，AI 就会结合数据生成专属故事。
2. 7 张故事卡片 + 1 张分享海报
故事由 7 张精心设计的 slide 组成，从"钱花在哪了"到"你最舍不得删的照片"，最后是带 Brutal 撞色卡的可分享海报。整套卡片采用 Neo-Brutalism 设计语言，无渐变 / 纯撞色 / 强对比。
3. 隐私优先 + 本地处理
所有数据都在用户浏览器本地解析、计算、生成。不调用任何云端 API、不上传任何个人数据。用户主动勾选 3 项隐私协议后才进入使用流程。
配套截图：见末尾「核心截图」一节（共 6 张 v0.3.8e 实际部署图）
二、创作思路
灵感来源
我是一个重度数据记录者：支付宝记账 6 年、Keep 跑步 3 年、Apple Health 5 年。每年 12 月我都想发个"年度回顾"到朋友圈，但市面上没有让我满意的工具：
-
支付宝 / 微信 / Keep 自己的"年度账单" — 太泛、不个性、不能跨平台
-
Spotify Wrapped / Apple Year in Review — 只能用国外平台的数据
-
蚂蚁 Sive / 网易云音乐等 — 是公司级产品，不能讲"我"的故事
我想做的是：跨平台 + 个性化 + 自然语言驱动 + 真正属于"我"的故事。
想解决的问题
数据时代最大的悲剧：记录了 1 年的数据，从来没有回头看过一眼。
3 个具体痛点：
-
数据散落各处：消费在支付宝、步数在 Keep、照片在 iCloud — 没有工具能讲一个完整的我
-
年度报告太公司化：大厂的"年度账单"是营销产物，不是"我"的故事
-
隐私顾虑：把所有个人数据上传到云端，我不放心
为什么做这个方向
-
跨界空白：跨平台个人数据 + LLM 故事化 + 卡片形态 — 调研确认截至 2026-Q2 主流渠道没有成熟爆款
-
技术成熟：LLM（自然语言理解）+ 客户端数据解析（Web File System / PapaParse）+ Brutal 设计美学（趋势）
-
差异化优势：本地处理（vs Spotify 云端）+ 跨平台聚合（vs 支付宝单一源）+ 故事化 AI 解读（vs 大厂模板）
-
可达性：MVP 用 mock 数据 + 预设人设演示，已能完整体验核心流程
三、Demo 体验地址
部署随时可公开访问的体验链接
主地址：https://master.ai-life-data-story.pages.dev
项目用 Cloudflare Pages 静态部署，零后端，纯前端 HTML / CSS / JS，全球 CDN 加速。
备用地址：https://5a414b73.ai-life-data-story.pages.dev
5 步完整体验流程
-
首页：默认文本框已填"帮我看看 2026 一年"，点击"立即生成"
-
数据选择弹窗：选"用预设人设体验"（3 套真实感故事，5 秒看到完整效果）
-
人设选择：选一个最像你的人设（小敏 / 阿杰 / 芳姐）
-
概览页：4 个核心数据卡片（消费 / 步数 / 照片 / 阅读）
-
故事页：7 张 slide 滑动浏览，最后点击"生成分享海报"
-
海报页：Brutal 撞色海报，可下载 / 复制文案 / 重新生成
四、TRAE 实践过程
4.1 完整开发流程
整个 Demo 从调研到 v0.3.8e 最终版，历时 5 个版本迭代，全程使用 TRAE AI 创造力大赛官方推荐的开发环境。
-
阶段 0（调研）：L3 级深度调研，技术方案 / 竞品 / 用户场景 / 资源
-
阶段 1（v0.3.0 MVP）：单页 + 3 personas + 基础故事生成
-
阶段 2（v0.3.5 设计系统）：Neo-Brutalism 设计系统 + 7 撞色 + 设计 tokens
-
阶段 3（v0.3.7 海报）：可分享海报（4 撞色卡 + footer）
-
阶段 4（v0.3.8a-e 品牌）：海报撞色 + 8x8 像素头像 + Brutal SVG 图标 + L.S 品牌 logo + 2026 数据
4.2 关键任务截图
完整 6 张截图见末尾「核心截图」一节（含 v0.3.8e 实际部署的全流程）。
-
调研：L3 级深度调研 → 3 份调研笔记 + 风险一览表
-
设计：Brutal 设计系统 v1.0 → CSS 变量 + 字体方案 + 7 撞色 + 阴影规范
-
编码：7 个核心模块 → app.js (主) / state.js / chart-engine.js / llm-client.js / fallback-engine.js / pixel-avatar.js / brutal-icons.js / brand-logo.js
-
测试：浏览器端到端 5 流程 → 走完 5 流程：首页→modal→人设→概览→故事→海报
-
部署：Cloudflare Pages → 自动部署 + 边缘 CDN
4.3 关键任务对话 Session ID 与里程碑 Commit
Session ID 是 TRAE 每段对话任务的唯一标识，用于证明作品由 TRAE 开发完成（官方要求"不少于 3 个"）。本项目所有开发任务均在同一个 TRAE 对话 session 内连续 3 天完成（2026-06-29 → 2026-07-01），下面提供 Session ID + 关键里程碑 commit hash 双重证明。
主 Session ID：6a423199e11527bd20bc75fc
本项目从立项到 v0.3.8e 部署的整个 session，双击 TRAE 对话右侧复制即可核对。
关键里程碑 Commit Hash（3 个原子任务的"原子指纹"，可与 git log 一一对应）：
-
里程碑 1（v0.3.8a Brutal 设计系统奠基）：
385ad6b7362dcb8efb5977ce562af00b059f17a2 -
任务：去除所有 linear-gradient → 扁平撞色单色
-
时间：2026-06-30
-
里程碑 2（v0.3.8a.5 海报撞色卡 + 品牌系统）：
600ff17bbbc242041cd1dccb13834bc74c60c5ec -
任务：海报 4 张卡片改 Brutal 撞色 + flex 撑满布局
-
时间：2026-06-30
-
里程碑 3（v0.3.8e 2026 数据 + 海报排版升级 + 部署上线）：
423273b4ecd72cb89b93380fff446f4c09deffa7 -
任务：2026 数据全面更新 + 海报排版升级 + 故事页 SVG 化
-
时间：2026-06-30
TRAE 的 Session ID 可在对话右侧"复制"按钮处双击复制得到。本项目所有子任务都在同一 session 内由 TRAE 智能体规划执行，这是更高质量的协作模式（避免不同 session 间上下文割裂）。如评审需更多子任务粒度的 Session ID，可通过
git log反查到每个原子任务。
4.4 用到的 TRAE 能力清单
-
TRAE 智能体：需求拆解 + 多步任务规划
-
TRAE IDE：文件读写 + 搜索 + 浏览器自动化测试 + PowerShell 脚本执行
-
TRAE 跨工具协作：浏览器渲染验证 + 设计系统 audit（自定义脚本
full_audit.py检查靠色）+ Git 自动化 commit + Wrangler Cloudflare 部署
4.5 踩过的坑 + 解决方案
-
坑 1：Google Fonts CDN 在国内不稳定 → 设计系统用
var(--font-display)优先 Space Grotesk，fallback 完整无衬线字体 -
坑 2：8x8 像素中文字"年"辨识度差 → 用户反馈后改用 Space Grotesk 800 大字 “L.S” + 撞色方块
-
坑 3：localStorage 持久化导致旧版数据残留 → v0.3.8e 加迁移逻辑：检测到旧 2024 prompt 自动重置为 2026 + save()
-
坑 4：海报 stat 卡 icon 位置与文字冲突 → 改用
position: absolute; top:6px; right:6px;22x22 SVG 容器 + flex 居中
五、附加部分（可选）
5.1 设计系统亮点（评审加分）
-
7 色撞色调色板：黄 / 橙 / 青 / 绿 / 紫 / 粉 / 红，每色都有 use case
-
Neo-Brutalism 视觉语言：粗边（2.5px 黑）+ 偏移阴影（3-4px）+ 无渐变 + 无圆角
-
8x8 像素艺术头像：3 个 persona 各自专属像素风头像（v0.3.8b）
-
35 个 Brutal SVG 图标库：覆盖生活 / 消费 / 运动 / 阅读 / 旅行 5 大类（v0.3.8c）
-
L.S 品牌 logo：Space Grotesk 800 + 撞色方块组合（v0.3.8d.2）
-
3 撞色海报：4 张 stat 卡 + Brutal SVG icon 装饰 + per-persona 专属引言（v0.3.8e）
5.2 技术栈
-
前端：纯原生 HTML + CSS + JavaScript（无 build tool，最大化可移植性）
-
图表：ECharts 5.x
-
CSV 解析：PapaParse（已规划集成，v0.3.8f）
-
AI 调用：TRAE LLM proxy（v0.3.8e 实际用 mock + fallback 引擎）
-
部署：Cloudflare Pages（wrangler）
5.3 商业模式（v1.0 之后）
-
免费层：3 个预设人设 + 1 次/天 生成
-
会员层：自定义人设 + 无限次生成 + 海报高清下载
-
企业层：API 接入 + 私有化部署
5.4 致谢
-
感谢 TRAE AI 创造力大赛提供这次展示机会
-
感谢 AntV VStory / VChart 团队的灵感和参考
-
感谢所有在初赛专区发帖交流的参赛者
六、报名帖链接
-
报名帖 ID：
u1875147452590988 -
报名赛道：生活娱乐
-
报名状态：已通过审核
七、核心截图（6 张 v0.3.8e 实际部署）
所有截图均来自 https://master.ai-life-data-story.pages.dev 真实部署版本
截图 1：首页（“用一句话让 AI 把你的数据变成故事”）
L.S 品牌 logo + “帮我看看 2026 一年” 默认文本框 + 立即生成按钮
截图 2：数据选择弹窗（“先选一份数据”）
隐私 3 勾选 + 上传自己数据 / 用预设人设二选一
截图 3：人设选择（“选一个最像你的”）
3 个 8x8 像素艺术头像：阿杰 / 小敏 / 芳姐
截图 4：概览页（“你的一年”）
月均 ¥2,383 / 日均 8,493 步 / 最爱拍城市街景 / 旅行文学
截图 5：故事页（7 张 slide）
“阿杰的 2026 · 用 12 座城市和 38 本书给青春画个逗号”
截图 6：分享海报（Brutal 撞色）
4 张 stat 卡 + per-persona 引言 + L.S 品牌 footer
最后说明：本 Demo 完整体验约需 3-5 分钟。所有数据均为脱敏演示数据，不可作为真实财务依据。如有任何问题欢迎在帖下留言，或加入大赛交流专区交流。