【学习工作】 + Focus Beat 专注节拍星球

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

【标签】 【学习工作】

【标题】 【学习工作】 + Focus Beat 专注节拍星球

**我是谁：**我是一名11岁的小学生，平时喜欢弹琴、听歌、打节奏游戏。这是我的第一个编程作品，也是我第一次用AI来做自己想做的App！

**我是怎么用TRAE把Demo做出来的：**说实话，我之前只会一点点HTML，对JavaScript和CSS都不太熟。但是用TRAE就完全不一样了——我就像跟一个很聪明的朋友聊天一样，用大白话告诉他"我想要一个星空背景，有星星在闪"，他就能帮我写出来。

印象最深的是做AI学科教练的时候，我需要让AI出题目然后判断对错。以前觉得这种需要调用API的东西肯定超级难，但跟TRAE说完需求后，它帮我一步步搞定了DeepSeek的接入、Prompt的设计、还有JSON格式解析。我当时就觉得：原来编程可以这么简单！最让我有成就感的是，整个网站从零到做完，基本上都是我"说"出来的，TRAE负责"写"出来，最后出来的成品居然和我脑子里想象的一模一样。

1. Demo 简介

  • 是什么

    Focus Beat 专注节拍星球是一个面向小学生的专注学习辅助网站。它将番茄钟专注计时、AI学习辅导与音乐创作激励相结合，通过"专注学习赚音符 → 攒够音符创作AI歌曲"的游戏化机制，让孩子在成就感的驱动下培养良好的学习习惯。

    面向谁

    核心用户是小学生（1-6年级），特别是：

    • 容易分心、难以长时间专注学习的孩子

    • 需要系统整理错题、查漏补缺的学生

    • 喜欢音乐、对游戏化激励有正向反馈的孩子

    主要功能（3大核心模块）

    :bullseye: ① 专注计时 + AI节拍计划
    输入学习任务（如"背10个英语单词"），AI自动生成番茄钟式的专注计划，支持自定义时长。完成专注后获得音符奖励，培养时间管理能力。

    :brain: ② AI学科教练（语文/数学/英语）
    AI针对三大学科智能出题：语文成语填空、数学限时口算、英语单词拼写+翻译。实时反馈对错，针对性巩固薄弱知识点。

    :musical_note: ③ AI歌曲创作激励
    每周通过专注学习、完成练习积攒音符，攒满500个音符即可解锁AI歌曲创作。AI根据本周学习成果生成专属歌词和音乐，让学习成就"听得见"。

    **:pushpin: 其他辅助功能：**错题拍照收集与AI分析、举一反三变式练习、每日学习总结报告、每周AI学习计划生成、音符收藏册。

2. Demo 创作思路

  • 灵感来源

    我自己就是一个喜欢音乐的小学生，平时练琴、听歌都让我很开心。但学习的时候总是容易走神，妈妈催我写作业的时候特别烦。我就想：**能不能把音乐和学习的乐趣结合起来？**如果学习也能像打节奏游戏一样有成就感，那该多好！

    想解决的问题

    • **专注力不足：**小学生注意力持续时间短，传统番茄钟太枯燥，难以坚持

    • **学习动力弱：**缺乏即时正向反馈，学习变成"任务"而不是"成就"

    • **错题整理麻烦：**手动抄题效率低，错题复习没有针对性

    • **学科练习枯燥：**传统题海战术让孩子产生抵触情绪

    为什么做这个方向

    选择"学习工作"赛道，是因为我觉得学习工具不应该只是"管"孩子，而应该"激励"孩子。市面上的学习App大多是家长视角的功能堆砌，缺少从孩子角度出发的游戏化设计。

    Focus Beat 的核心设计逻辑是：将学习行为转化为可积累、可展示、可分享的成就（音符→歌曲）。每周一首AI创作的专属歌曲，是孩子一周努力学习的"奖杯"，这种正向激励比分数和排名更有温度。

3. Demo 体验地址

  • 交互式可体验的HTML格式文件，请使用Zip格式打包上传到社区

  • focus-beat-demo.zip (680.4 KB)

4. TRAE 实践过程

Focus Beat 从0到1的完整开发过程均在 TRAE 中完成，以下是关键开发步骤：

Step 1 - 项目规划与架构设计
在TRAE中与AI对话，明确作品的核心功能（专注计时+音符激励+AI歌曲）和整体架构。确定采用纯前端HTML/CSS/JS实现，DeepSeek API提供AI能力。设计了"梦幻星空"的视觉主题，符合小学生的审美偏好。

main
main1900×880 238 KB

Session1
Session11376×770 14.9 KB

2292909581799736:2b8c2aca4a433d935abe0d330e475c2c_6a39d9ae2e97ca483845e411.6a39d9ae2e97ca483845e414.6a39d9ae2e97ca483845e412:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/23 08:56:14)

Step 2 - 核心功能开发：专注计时模块
通过TRAE逐步构建番茄钟计时器，支持自定义专注/休息时长、AI生成节拍计划（JSON格式解析渲染）、实时进度展示。完成了计时完成后的音符奖励机制和庆祝动画。

Session2
Session21105×755 12 KB

2292909581799736:aa7f09d4c453c02705b343fb85a9299b_6a39d9ae2e97ca483845e411.6a4dc8acc7be79bc85f3e29b.6a4dc8acc7be79bc85f3e299:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 11:49:00)

Step 3 - AI功能接入：学科教练 + 歌曲创作
接入DeepSeek API，实现三大核心AI功能：① 根据错题/任务描述生成分析结果 ② 语文/数学/英语智能出题与答案校验 ③ 根据本周学习数据创作歌词。通过TRAE调试Prompt，确保AI输出格式稳定可用。

Session3
Session31330×765 12.1 KB

2292909581799736:7db644640e2691a8168b11038f889cfd_6a39d9ae2e97ca483845e411.6a4db41dc7be79bc85f3e10f.6a4db41dc7be79bc85f3e10d:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 10:21:17)

Step 4 - 歌曲创作功能联调
使用 localStorage 实现本地数据存储（专注时长、音符数量、错题记录、歌曲收藏），确保刷新页面后数据不丢失。完成8大功能模块的联调测试。

Session4
Session41376×780 12.5 KB

2292909581799736:7cd9120fbb8d044dfe788e6e899a3dc3_6a39d9ae2e97ca483845e411.6a4dac77c7be79bc85f3e06f.6a4dac77c7be79bc85f3e06d:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 09:48:39)

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

「Focus Beat 专注节拍星球」—— 一个 11 岁小朋友用 AI 把学习变成音乐闯关的小工具 :musical_note: - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区

1 个赞