我是一名初中生
我其实没什么编程基础，但一直想做一个放在书桌上的提醒装置——因为自己老是忘事，小米手环没有课程提醒功能，手机又容易分心。借助 TRAE，我把这个想法变成了一步步可落地的 Demo。
整个过程就是"聊天"——我告诉 TRAE 我想做什么，它帮我生成代码，我提意见，它继续改。比如我觉得科技感太强不适合桌面，我说"米白色主题，手账便利贴质感"，它马上重写了整套设计系统；我说"要横屏，像桌面小屏幕"，它就把宽高比和布局全改了；我说"倒计时不同步、还想语音输待办"，它一次性就修好了。
最让我惊讶的是，语音输入智能纠错和实时倒计时精度自适应这些我原本以为要写很多代码的功能，TRAE 几行代码就搞定了。整个过程就像有个懂技术的朋友在旁边帮你，你只管描述想法，它帮你实现。
1. Demo 简介
是什么： 一款桌面智能桌搭原型（网页交互 Demo），模拟放在学生书桌上的极简横屏提醒设备。米白色主题，手账便利贴质感，不打扰、不花哨，抬头就能看到。
面向谁： 中学生、大学生等在校学生群体，尤其是自律性较弱、容易忘事的学生。
主要功能：
| 功能 | 说明 |
|---|---|
 实时大时钟 |
主页大号时间显示 + 问候语 + 日期，每秒实时刷新 |
 顶部下节课提示 |
顶部卡片显示下一节课程名、时间、教室，附带实时 MM:SS 倒计时 |
 上课倒计时 |
HH:MM:SS 精确倒计时，距离上课 < 10 分钟时自动橙色预警闪烁 |
 重大考试倒计时 |
3 门考试同时追踪，精度自适应：≥7天显示"X天后"，1-7天显示"X天X时"，<1天显示"HH:MM" |
 今日待办 |
添加/完成/删除待办，localStorage 自动保存，刷新不丢失 |
 语音输入待办 |
Web Speech API 语音识别 + 智能纠错（自动去除口头禅：嗯/啊/那个/然后），多个候选选置信度最高 |
 番茄钟专注 |
三种模式：专注25分钟 / 短休息5分钟 / 长休息15分钟 |
 课程表 |
周一到周五切换，自动标记"进行中/下一节/已结束"，点击任意课程可直接编辑修改，不用每次重新添加 |
主页截图
课程表截图
待办页截图
番茄钟截图
2. Demo 创作思路
灵感来源： 我自己在学校经常忘事——忘带书、记错教室、错过作业 deadline。小米手环没有课程提醒功能，手机又容易分心。于是想到做一个放在书桌上的、专门为学生设计的提醒装置。
想解决的问题：
- 没有专门针对学生时间管理的桌面提醒工具
- 手机提醒容易被社交软件、游戏等干扰
- 手环功能单一，不支持课程表管理
- 传统闹钟无法显示课程、考试等学习相关信息
- 现有App打开就要解锁手机，自律性差的学生根本不会主动打开
为什么做"简约米白横屏"这个方向：
之前做过科技感强的暗色版本，功能堆了很多（天气、统计、柱状图、语音播报），但放桌面上太花哨、太"电子产品"感，反而像另一个手机屏幕。后来我想明白：桌搭的核心不是功能多，而是"存在感刚刚好"——抬头能看到，低头不打扰。所以我砍掉了天气、统计这些非核心功能，保留最刚需的：时钟、课程倒计时、考试倒计时、待办、番茄钟。米白色主题配便利贴质感，放在书桌上像一本翻开的手账，而不是一块电子屏。
为什么不做 APP，而做桌搭形态？
手机 APP 随手一划就关了，手环屏幕太小显示不了课程表。桌搭放在书桌上，抬头就能看到，不用解锁手机、不用打开 APP——提醒的存在感刚好在"不会忽略"和"不会打扰"之间。横屏布局更符合显示器形态，未来移植到硬件屏幕（如 ESP32 + 小尺寸 LCD）也更自然。
和现有方案对比：
我也用过番茄 TODO、滴答清单、超级课程表这些工具，但它们的问题在于太泛了。番茄 TODO 是通用效率工具，不会自动根据你的课表提醒"5分钟后去教三201"；超级课程表有课表，但没有待办 + 考试倒计时 + 番茄钟的闭环；滴答清单功能强大，但打开它需要主动拿起手机，而学生最缺的就是"主动拿起手机"的自律。
智课桌搭的核心是**“学生场景一站式闭环 + 桌面常驻”**——课程表、待办、倒计时、番茄钟全部围绕"学习"这一个场景，不需要切换多个 App，而且它一直在你桌上。
3. Demo 体验方式
交互式 HTML 文件：
智能桌搭_最终版.html (55.3 KB)
体验说明：
- 直接用 Edge 浏览器打开 HTML 文件即可（Chrome 语音识别依赖 Google 服务器，国内网络无法使用）
- 所有功能都在本地运行，无需联网
- 主页时钟、下节课提示、上课倒计时、考试倒计时全部实时秒级更新
- 课程表中点击任意课程可直接编辑课程名、时间、地点，也可以删除
- 待办页面点麦克风按钮可语音输入，自动去除"嗯啊那个"等口头禅
- 番茄钟支持专注/短休息/长休息三种模式
- 待办数据自动保存到本地，刷新不丢失
- 横屏 680×480 布局，侧边栏图标切换四个页面
技术选型说明： 为什么选择单文件 HTML 零依赖？因为我想让评审打开就能用，不用装 Node、不用配环境。TRAE 帮我实现了这个目标——一个文件，双击打开，全部功能都能体验。这也是未来移植到硬件屏幕的基础：硬件屏幕资源有限，单文件轻量方案最合适。
4. TRAE 实践过程
开发流程：
- 创意构思阶段 — 用 TRAE Work 梳理创意，生成创意方案 HTML，完成报名帖
- Demo 开发阶段 — 用 TRAE 逐步实现核心功能：主屏幕时钟 → 课程表 → 待办清单 → 番茄钟
- 硬件化阶段 — 加显示器外壳、桌面纹理、咖啡杯装饰，从"手机界面"变成"桌面设备"
- 风格重构阶段 — 推翻科技感暗色主题，重写为米白色手账风，精简非核心功能
- 横屏极简阶段（当前） — 改为横屏侧边栏布局，新增上课倒计时预警、考试倒计时精度自适应、语音输入智能纠错、课程点击编辑
踩坑经历：别让 AI 修别人的"烂摊子"
参赛之前我走过一段弯路：先用 Kimi 生成了一套代码，想着"让 TRAE 来修修 Bug"。结果却是越修越错——代码风格不兼容，修完一个 Bug 又引出三个新问题。
折腾了一晚上，我推倒重来，直接让 TRAE 从零开始写。逻辑清晰、结构统一，后面迭代功能、改动画、加语音，每一个改动都很顺畅。
教训：TRAE 不是"修理工"，是"创作者"。给它清晰需求，让它从头构建，比让它修别人的代码高效十倍。
踩坑经历2：语音识别在国内Chrome用不了
做语音输入功能时，TRAE 用了 Web Speech API，我在 Chrome 里试一直报"网络连接失败"。后来查了才知道 Chrome 的语音识别走 Google 服务器，国内被墙了。TRAE 帮我改成：每次新建 recognition 实例避免状态残留、错误提示中文化、支持 Edge 浏览器（Edge 走微软 Azure 服务器），还加了智能纠错自动过滤口头禅。
教训：做功能要考虑实际使用环境，国内网络环境下 Google 服务不可用是常态。
版本迭代：
V1.0 基础原型截图
V2.0 功能完善截图
V3.0 硬件化截图
V4.0 极简米白版截图（可与上面主页截图重复使用）
开发过程：
一、创意文案生成截图：
二、Demo开发截图：
三、Demo迭代截图：
四、Demo简约版重构截图：
关键任务 Session ID：
- 创意方案生成：
1264917887335667:46daf728b9e992fd2202c8b6ca9544ff_6a4cf31625d67acddcd81aa9.6a4cf44225d67acddcd81b07.6a4cf44225d67acddcd81b05:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/7 20:42:42) - Demo 开发：
1264917887335667:5055f15b00a827e682be0c91d12c76ba_6a4cf31625d67acddcd81aa9.6a4f9587c46e57081e4cc8a2.6a4f9587c46e57081e4cc8a0:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 20:35:19) - V4极简米白版重构（本次）：
1264917887335667:c0e9a18c749c2b146fd4c0739e8debd0_6a53300b33f1a5e9edea7eb8.6a53333c33f1a5e9edea7eed.6a53333c33f1a5e9edea7eeb:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/12 14:25:00)
5. 对应的报名审核通过的帖子链接
https://forum.trae.cn/t/topic/75428
6. 技术实现细节
前端技术： HTML + CSS + JavaScript（纯前端，单文件，零依赖）
核心特性：
- CSS 变量设计系统：米白色主题（–bg: #F7F5F0, --paper: #FEFDFB），手账便利贴质感
- localStorage 持久化存储待办事项
- Web Speech API 语音识别（zh-CN，maxAlternatives=3 多候选选置信度最高）
- 智能纠错后处理：移除口头禅（嗯/啊/哦/那个/这个/然后/就是等）、标点规范化、多余逗号合并
- setInterval 每秒实时更新时钟 + 上课倒计时 + 考试倒计时
- 考试倒计时精度自适应逻辑：≥7天/1-7天/<1天 三档自动切换
- 上课倒计时预警：<10分钟自动添加
.ccd-warning类，橙色背景 + 闪烁动画 - 课程编辑功能：点击课程项弹出编辑弹窗，支持修改和删除
- 响应式设计：宽屏侧边栏导航，窄屏自动回退为顶部横排
实际硬件方案（规划）： ESP32 主控 + 7寸LCD横屏（800×480分辨率刚好匹配）+ 3D打印米白色外壳，成本约 100 元，支持 Wi-Fi 同步课程表，可直接移植网页版界面。
未来规划： 如果进复赛，我计划把网页 Demo 移植到真实硬件上，做一个带实体旋钮（调节番茄钟）和 LED 提醒灯（上课前闪灯）的桌搭原型，真正实现"放在书桌上就能用"的完整体验。还计划接入微信群消息通知，不用看手机也能看到重要消息。
感谢 TRAE 让我这个不懂编程的初中生也能把想法变成 Demo！从V1到V4，每一次迭代都是和 TRAE 对话完成的，它真的能听懂"米白色"、"不要太科技感"这些很感性的描述，然后变成代码。欢迎各位评审体验并留言建议～