【生活娱乐赛道】懒人手账 - 让AI替你记录生活

TRAE AI 创造力大赛 【大赛初赛专区】
1

【标签】 生活娱乐

【标题】 【生活娱乐赛道】懒人手账 - 让AI替你记录生活

用一句话介绍你的职业 ：
我是一个程序媛+新晋宝妈

1. Demo 简介

是什么

一款微信小程序风格的生活记录工具，用户上传照片后，AI自动识别并生成手账文案，结合照片形成精美的电子手账。

面向谁

  • 核心用户：时间碎片化的宝妈群体，想记录宝宝成长却无暇整理手账

  • 扩展用户：工作忙碌的上班族、热爱记录生活的年轻人

主要功能

  1. AI智能生成手账

  • 上传照片后自动识别人物、场景、表情

  • AI生成简洁日记风文案，支持6种记录风格（日常打卡、亲子遛娃、美食记录、短途旅行、探索新世界、工作学习）

  • 提供多种记录模板快速插入

  • 额外功能：AI加emoji/语句纠错/智能标签

image
image848×1558 227 KB

image
image1606×1564 288 KB

  1. 时间线与标签管理

  • 智能标签系统，按风格和内容自动打标

  • 日历视图快速浏览每月足迹

  • 标签云灵活筛选

  • 当天时间线记录每一次成长

image
image1920×933 334 KB

image
image1614×1558 323 KB

  1. 成长激励体系

  • 签到奖励、成长值积累

  • 成就勋章系统（记录达人、摄影收藏家等）

  • 手账广场互动，微信/小红书等分享

  • 云存储对接，支持额外备份

  • 新用户引导，角色化

image
image1920×1199 290 KB

image
image1654×1558 297 KB

image
image1920×1209 262 KB

image
image1920×914 283 KB

2. Demo 创作思路

灵感来源

作为宝妈，大部分时间用来照顾孩子，只能用手机匆匆拍下"第一次爬、第一次叫妈妈"这些珍贵瞬间。但照片只是片段，无法写下当时的心境和故事；真的想整理手账时，又完全没有时间。此外，日常生活在工作和带娃中频繁切换，更加没有时间记录自己的生活。

想解决的问题

  • 时间紧迫：碎片化时间内快速记录，无需复杂排版

  • 手账债务：传统手账门槛高、耗时久，最终放弃

  • 记录缺失：珍贵瞬间因无法快速记录而被遗忘

为什么做这个方向

  • 真实痛点：宝妈的记录需求长期被忽视

  • 技术可行：AI图像识别 + 自然语言生成已足够成熟

  • 门槛足够低：微信小程序形态，扫码即用

3. Demo 体验地址

:package: 交互式HTML文件下载：

请下载下方ZIP文件，解压后用浏览器打开 index.html 即可体验完整功能。

懒人手账-Demo下载 (41.2 KB)

4. TRAE 实践过程

开发流程亮点(含关键步骤截图)

Step 1: 从需求到原型

通过TRAE分析需求文档，规划产品结构和功能模块：

  • 确定微信小程序风格的UI设计

  • 设计6种记录风格和对应的智能模板系统

image
image2880×1750 338 KB

Step 2: 核心功能实现

使用TRAE辅助开发关键功能：

  • AI识别与文案生成：模拟AI处理流程，实现图片压缩、预览、模板匹配

  • 智能emoji系统：根据记录风格自动生成匹配的图标

image
image2880×1750 507 KB

image
image1920×1167 155 KB

image
image1920×1167 197 KB

Step 3: 交互体验优化

  • 底部Tab导航、+号快捷入口

  • 主题色切换（4套配色）

  • 成就勋章系统

  • 手账广场热榜/新榜

image
image2880×1750 485 KB

image
image2880×1750 497 KB

image
image1920×1167 165 KB

image
image1920×1167 162 KB

image
image2880×1750 344 KB

Session ID 对话记录

1、项目初始化： 2971353127352729:a14c2f6001513b240d7c715201a2f1cd_6a339f6407119b2d6cad4818.6a339f6407119b2d6cad481b.6a339f6407119b2d6cad4819:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/18 15:33:56)
2、色卡定义：2971353127352729:a14c2f6001513b240d7c715201a2f1cd_6a339f6407119b2d6cad4818.6a33a22e07119b2d6cad4887.6a33a22e07119b2d6cad4886:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/18 15:49:52)
3、新建手账排版调整：
2971353127352729:bf999a499281b080de17ddc56ac605fb_6a339f6407119b2d6cad4818.6a38ebdde6e519553388b339.6a38ebdde6e519553388b337:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/22 16:01:33)
4、成长勋章设计：
2971353127352729:968a6cd36ac44e2ee2aa6d111070411f_6a339f6407119b2d6cad4818.6a3b51eac08a459ef64bb42d.6a3b51eac08a459ef64bb42b:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/24 11:41:30)
5、风格模板设计：2971353127352729:14e8f7e0f60a4717ce2a28e0dc34aa48_6a339f6407119b2d6cad4818.6a3b5347c08a459ef64bb496.6a3b5347c08a459ef64bb494:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/24 11:47:19)
6、分享设计：2971353127352729:62f6de226294b436981539b28ee25a7a_6a339f6407119b2d6cad4818.6a3b5430c08a459ef64bb4dd.6a3b5430c08a459ef64bb4db:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/24 11:51:12)
7、手账日历时间轴设计：
2971353127352729:8365ec2e3707028fb857892a3f31c6f5_6a339f6407119b2d6cad4818.6a3df4e113cd6b608a33dbbe.6a3df4e113cd6b608a33dbbc:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/26 11:41:21)
8、手账广场设计：
2971353127352729:6048fcc11b41cc9c8234b1a7c7047e9e_6a339f6407119b2d6cad4818.6a3e102113cd6b608a33dc4c.6a3e102113cd6b608a33dc4a:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/26 13:37:37)
9、云存储设计：
2971353127352729:8cd51725cf0d31124841a8f9057d265f_6a339f6407119b2d6cad4818.6a3e2f0713cd6b608a33dec6.6a3e2f0713cd6b608a33dec4:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/26 15:49:27)

5. 踩坑经历与解决方案

:wrench: 问题1: 返回键反复丢失-无数次

现象：每次设计完，页面按钮点击后，返回键会丢失

原因：事件绑定时机不对，DOM未插入时绑定

解决：使用 setTimeout 延迟绑定返回键事件，确保DOM已插入

:wrench: 问题2: 写手账版面的设计不满意

现象：多次沟通后效果不佳

解决：去网上找了参考图终于懂我意思了

:wrench: 问题3: 色卡的定义反复了好几次

现象：色卡的定义反复了好几次

解决：根据多次给到的颜色的16进制码，明确编排规则后告知它

其他暂且都还算顺利~~

6. 开发心得

  1. 一次具体功能的需求说完整，实现起来更顺利，避免缝缝补补，上下文过多

  2. CSS优先级要时刻注意：内联样式 > ID选择器 > 类选择器，避免样式冲突

  3. 有参考图、参考样例会更顺利

7. 社区报名帖

:white_check_mark: 报名帖链接：【生活娱乐赛道】懒人手账 —— 让 AI 替你记录生活

期待您的评审！ :folded_hands:

如果您有任何问题或建议，欢迎在评论区交流~