【生活娱乐赛道】宝贝日记 - 宝宝成长记录应用

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

0. 先和大家打个招呼吧 :waving_hand:

  • 你是谁： 一名90后新手宝妈，正在记录宝宝的成长点滴
  • 你是怎么用 TRAE 把 Demo 做出来的：
    作为一个宝妈，一开始真的很担心自己做不出一个完整的应用。但是和 TRAE 沟通后发现，只要把想法清晰地表达出来，它就能帮我实现！比如我想要一个"智能排版"功能，只要描述清楚想要的效果，TRAE 就能写出对应的代码。最让我惊喜的是数据可视化部分，原本以为做图表会很复杂，但 TRAE 帮我集成了 Chart.js，轻松实现了身高体重曲线和睡眠统计。它就像一个耐心的技术合伙人，帮我跨过了所有技术门槛。

1. Demo 简介

  • 是什么： 一款专为新手父母打造的宝宝成长记录 App
  • 面向谁： 新手父母、育儿家庭，尤其是重视记录宝宝成长的年轻家长
  • 主要功能：
    • :memo: 多类型记录：支持文字、照片、视频、语音等多种记录方式，满足不同场景需求
    • :artist_palette: 智能排版模板：提供日记式、相册式、语音日记、里程碑四种精美模板，自动适配内容类型
    • :bar_chart: 数据可视化报告：年度成长报告、身高体重增长曲线、睡眠时长统计等数据洞察

2. Demo 创作思路

  • 灵感来源： 作为新手妈妈，总想记录宝宝的每一个成长瞬间，但照片散落各处，文字记录也很零散，很难系统化整理。市面上的育儿 App 要么功能太复杂，要么界面不够温馨，所以萌生了自己做一个的想法。
  • 想解决的问题：
    • 记录碎片化：照片、视频、文字分散在不同平台，难以统一管理
    • 记录门槛高：不知道写什么、怎么排版才好看
    • 缺乏数据洞察：无法直观看到宝宝的成长趋势和规律
  • 为什么做这个方向： 育儿记录是强需求场景，市场上缺乏既美观又实用的解决方案。通过智能排版降低记录门槛，通过数据可视化让记录更有价值。

3. Demo 体验地址

  • 文件下载： 已打包为 ZIP 文件上传（baby-diary-demo.zip），包含完整可运行的 HTML 文件，无需额外依赖
    baby-diary-demo.zip (17.8 KB)

4. TRAE 实践过程

开发流程：

Step 1：需求分析与方案规划
与 TRAE 沟通确定核心功能：多类型记录、智能排版模板、AI 辅助生成、数据可视化报告、日历视图。

Step 2：界面设计与组件拆分
TRAE 帮助设计了温馨的暖色调 UI，拆分出手机框架、记录卡片、模态框、图表组件等模块。

Step 3：数据存储与 Mock 数据
使用 LocalStorage 实现客户端数据持久化，TRAE 协助生成了丰富的 Mock 数据用于演示。

Step 4：核心功能开发
依次实现：记录渲染、模板切换、AI 日记生成、删除确认弹窗、图表绑定等功能。

Step 5：调试与优化
修复了模态框滑动问题、首页渲染问题、按钮点击无反应等 Bug，优化了交互体验。

开发关键步骤截图（示例说明）：

  1. 手机框架与整体布局：设计了 340x700 像素的手机外观，包含刘海屏、顶部状态栏、底部导航栏

    image
    image830×1290 75.1 KB

  2. 智能排版模板选择：实现了日记式、相册式、语音日记、里程碑四种模板的切换界面

    image
    image752×1278 61.1 KB

  3. 年度成长报告：集成 Chart.js 实现身高体重曲线、睡眠统计、类型分布等图表

    image
    image756×1300 82.1 KB

关键任务对话的 Session ID：

  • [需求分析与方案规划 Session ID]

    image
    image1646×1008 88.3 KB

    ID:.1699165594456537:507bf2a8a8044b0dbb3d8eca72e2ff35_6a4f0dde9e9fe3cfddd9f6ce.6a547cc79e9fe3cfddd9fb6d.6a547cc33dd64f157fe0ac63:Trae CN.T(2026/7/13 13:51:03)

  • [界面设计与组件开发 Session ID]

    image
    image1632×986 77.1 KB

    id:.1699165594456537:eb11678e875f164c2afc417e5970b657_6a4f0dde9e9fe3cfddd9f6ce.6a547de79e9fe3cfddd9fb79.6a547de63dd64f157fe0ac64:Trae CN.T(2026/7/13 13:55:51)

  • [数据存储与功能实现 Session ID]

    image
    image1612×796 50.5 KB

    ID.1699165594456537:0fe0e2480ef386e4324cc55bc1a80cd7_6a4f0dde9e9fe3cfddd9f6ce.6a547e5a9e9fe3cfddd9fb85.6a547e593dd64f157fe0ac65:Trae CN.T(2026/7/13 13:57:46)
    ID:.1699165594456537:e7b02e3ee008eed068d06e86d824a199_6a4f0dde9e9fe3cfddd9f6ce.6a5466449e9fe3cfddd9fb61.6a5466443dd64f157fe0ac62:Trae CN.T(2026/7/13 12:15:00)

5. 对应的报名审核通过的帖子链接

参赛宣言：用科技记录爱，让每一个成长瞬间都被珍藏。希望这款应用能帮助更多家庭记录宝宝的美好时光！