EduFlow：从灵光一现到全能生产力引擎的“从 0 到 1”
创作背景 (Background)
在面对繁重的工程学课业、复杂的代码调试以及多线程的项目开发时，如何保持深度专注并管理好碎片化时间，成为了日常最大的痛点。市面上的效率软件虽然多，但往往面临两个极端：要么功能太单一，缺乏沉浸感；要么过于臃肿，让人感到疲惫。
EduFlow 的诞生，正是源于这种“想为自己量身定制一个极致工作流”的原始冲动。我希望它不仅仅是一个冷冰冰的计时器，而是一个能调动视觉、听觉，并提供正向情绪价值的“心流沙盒”。它需要懂我的工作节奏，能无缝播放我喜欢的歌单，在我疲惫时给出一句鼓励，并且能在任何设备的浏览器上随时唤醒，帮我迅速进入状态。
第一次输入提示词创建项目，可以指出大概思路并让TRAE自动帮你完善：
我想制作一个带番茄钟的功能网页，请你帮我完善一下思路，并指出需要哪些提示词、功能、UI、UX设计方面的思路。
AI：一、 功能需求思路 (Features)
建议采用MVP（最小可行性产品）的思路，先完成核心骨架，再逐步添加进阶功能。
1. 核心基础功能（V1.0 必须有）：
-
倒计时引擎： 标准的番茄工作法包含“专注（25分钟）”、“短休（5分钟）”和“长休（15分钟）”三种模式。
-
控制面板： 开始、暂停、重置、跳过当前阶段。
-
状态提示： 倒计时结束时，需要有明显的提示音或浏览器通知。
2. 进阶功能（V2.0 增强用户粘性）：
-
任务管理 (To-Do List)： 允许用户输入当前正在做的任务，并将专注时间与特定任务绑定。
-
自定义设置： 允许用户修改专注和休息的时长、选择不同的提示音量。
-
数据统计： 记录每天/每周完成了多少个“番茄”，用图表展示专注时长（可使用本地存储
localStorage）。 -
专注模式： 网页全屏，隐藏所有不必要的元素。
-
包括自定义背景播放视频功能
二、 UX 设计思路 (用户体验)
优秀的番茄钟核心在于**“降低认知负担，让人立刻进入状态”**。
-
零摩擦启动： 网页加载后，最显眼的应该就是“开始”按钮。不要强迫用户注册或登录后才能使用核心功能。
-
标题栏动态反馈： 利用
document.title，在浏览器标签页上实时显示剩余时间（例如[14:59] 专注中...），这样用户即使切换到其他网页，也能随时瞥见时间。 -
防止误触与数据丢失： 如果用户在倒计时中途不小心刷新或关闭了网页，最好能利用
localStorage恢复进度，或者在离开网页前弹窗确认（beforeunload事件）。 -
流畅的模式切换： 专注结束后，自动切换到“短休”界面，并等待用户点击“开始”（或者提供自动连续播放的选项）。
三、 UI 设计思路 (用户界面)
视觉应该服务于“专注”这一核心目的，避免花哨。
-
极简主义 (Minimalism)： 界面中央只保留巨大的时间显示和控制按钮，周围留白。
-
色彩心理学 (Color Coding)： 不同的状态使用不同的主色调来区分。
-
专注模式： 推荐使用暖色调（如番茄红、橙色），代表活力、警觉和投入。
-
休息模式： 推荐使用冷色调（如薄荷绿、天蓝色），代表放松、平静和呼吸。
-
-
动态视觉反馈： 除了数字倒计时，建议加入一个环形进度条 (Circular Progress Bar) 或线性进度条。这能给用户一种直观的“时间正在流逝”或“即将完成”的视觉锚点。
-
响应式设计： 确保在手机浏览器和电脑屏幕上都能完美居中显示，字体和按钮大小要适合手指触控。
-
IOS的毛玻璃透明效果
-
Color OS 的平展动画
四、 AI 编程提示词思路 (Prompts)
如果你打算用 AI 辅助生成代码，可以将任务拆分为以下几个阶段来提问：
第一阶段：构建骨架与 UI
“我需要写一个纯前端的番茄钟网页。请帮我用 HTML, CSS (可以使用 Tailwind CSS) 搭建一个极简界面的骨架。 要求：页面居中有一个巨大的数字时钟（默认显示 25:00），时钟下方有三个模式切换按钮（专注、短休、长休），最下方是一个巨大的’开始’按钮。整体风格要现代、干净，请利用背景色的深浅变化来区分不同的模式。”
第二阶段：注入核心逻辑 (JavaScript)
“现在，请帮我用 JavaScript (或 React/Vue) 为刚才的网页添加逻辑。 要求：点击开始按钮后，时间开始倒数，按钮变成’暂停’。倒计时需要精确，不能因为网页切换到后台而严重变慢（可以考虑记录时间戳进行比对）。当倒数到 0 时，自动播放一段清脆的提示音，并切换到下一个模式。”
第三阶段：添加高级特性
“请帮我在当前的番茄钟里加入浏览器标签页标题倒计时功能，并且使用 localStorage 将用户的当前状态（处于什么模式、还剩多少秒）存下来，确保刷新网页后进度不会丢失。”
综上，再根据自己的想法提炼清晰的设计思路和大概设计风格。在这里我推荐使用Excalidraw的设计网页大概设计一下排版，能极大的提高TRAE的设计效率：
这样你再把提示词和图片交给TRAE ，就可以轻松的设计出来较为完整的DEMO。
这个时候再去找到一份自己喜欢的MP4视频，放置在TRAE的项目根目录里，就可以轻松的完成一个美观的页面
这个时候UI，UX都齐全了，需要进行二级页面的设计和内嵌的功能设计了。
再次请出Excalidraw。
输入：请你根据这个排版进行悬浮窗的二级界面设计，功能对应图中分区。色调保持使用暖色调（如番茄红、橙色）。UI设计保持一致，统一毛玻璃的透明效果。
大概的Demo就已经完成了。自定义番茄钟时长也是可用，再查缺补漏，看看哪些Buttons是无法正常触发的，利用“选择元素”功能一一标注，再交给TARE完善就行啦。（喜欢极致美观的同学可以添加一些关于动效的提示词，如：帮我在所有动态效果中添加模糊变化的动态效果）
展示成品：
当然，作为创作者需要高度自定义的菜单，怎么舒服怎么设置，可以输入：帮我完善设置功能，让我自由调节所有UI的效果，背景视频切换等。
在接入网易云音乐的时候，我采用了GITHUB的https://github.com/neteasecloudmusicapienhanced/api-enhanced 开源仓库
直接下载到项目文件夹让TRAE调用即可。
（悬浮窗是一个很实用，美观的插件）
项目文件稍后打包至GITHUB，谢谢各位的观看！
