采用GPT5自动规划实现番茄计时器，极简提示词，效果达到产品级

---

前言

前面已经采用GPT5试过生成番茄计时器，采用的是之前一直对比各个模型使用的提示词，效果实在有些拉垮。这次干脆直接采用GPT5 自己来从提示词开始干。

一、生成提示词

直接要求GPT 5生成完整的提示词

我现在需要做一个纯网页版本的番茄计时器，采用GPT5来实现。功能与设计你自己定。请你提供可供使用的提示词，注意仅有一次机会。

如下是生成的提示词，放在gpt5_Prompt.md文件中。

# GPT-5 番茄计时器网页版提示词请创建一个现代化的番茄计时器网页应用，具备以下功能和设计要求：## 核心功能
1. **番茄钟计时器**：25分钟工作时间，可暂停/继续/重置
2. **休息计时器**：短休息5分钟，长休息15分钟
3. **任务管理**：添加、编辑、删除和完成任务
4. **统计功能**：显示今日完成的番茄数、总专注时间
5. **声音提醒**：计时结束时播放提示音（可开关）
6. **进度跟踪**：显示当前番茄周期进度## 界面设计要求
1. **现代简约风格**：采用扁平化设计，配色温和护眼
2. **响应式布局**：适配桌面和移动设备
3. **直观操作**：大按钮设计，操作反馈明显
4. **视觉层次**：清晰的信息架构和视觉引导
5. **主题切换**：提供亮色/暗色主题选择## 技术实现
1. **纯前端实现**：使用HTML5、CSS3、原生JavaScript
2. **本地存储**：使用localStorage保存数据
3. **音频支持**：内置提示音效果
4. **性能优化**：流畅的动画和交互
5. **浏览器兼容**：支持主流现代浏览器## 具体UI布局
1. **顶部区域**：应用标题、主题切换、设置按钮
2. **主计时区**：- 大型圆形进度条显示剩余时间- 中央显示分:秒格式倒计时- 当前状态指示（工作中/休息中）
3. **控制按钮区**：开始/暂停、重置、跳过按钮
4. **任务管理区**：- 当前任务显示- 任务列表（滚动区域）- 添加新任务输入框
5. **统计信息区**：今日番茄数、专注时长、连续天数
6. **底部设置区**：音效开关、时间设置等## 用户体验细节
1. **状态反馈**：按钮点击效果、状态变化动画
2. **进度可视化**：圆形进度条平滑更新
3. **任务完成庆祝**：完成任务时的微交互效果
4. **数据持久化**：刷新页面后保持状态和数据
5. **快捷键支持**：空格键暂停/继续等## 配色方案建议
- **主色调**：番茄红 #FF6B6B
- **辅助色**：温暖橙 #FFA726、清新绿 #66BB6A
- **中性色**：深灰 #424242、浅灰 #F5F5F5
- **暗色模式**：深蓝黑 #1A1A2E、紫色调 #16213E## 文件结构
请创建以下文件：
- `index.html` - 主页面结构
- `style.css` - 样式表
- `script.js` - 核心功能脚本
- `README.md` - 使用说明请确保代码具有良好的注释，便于理解和维护。创建一个完整可用的番茄计时器应用，用户可以直接在浏览器中打开使用。

二、采用提示词来生成

让使用以上的提示词文件。
注意，为了方便对比处理，我是新建的对话，并未采用原对话

  现在请根据这个提示词文件实现功能，只有一次的机会，我需要立即发布上平台

三、最终效果

还贴心的给出了项目说明：

# 番茄计时器（纯前端）一个现代化的番茄计时器网页应用，开箱即用，直接双击 index.html 在浏览器中打开即可。## 功能概览
- 番茄钟：25 分钟专注，支持开始/暂停/继续/重置/跳过
- 休息模式：短休 5 分钟、长休 15 分钟，并支持自定义
- 任务管理：添加 / 编辑 / 删除 / 勾选完成 / 选择当前任务
- 统计面板：今日番茄数、总专注时长、连续天数（含持久化）
- 声音提醒：阶段结束蜂鸣提示，可开关与调节音量
- 进度可视化：圆环进度条，平滑更新
- 主题切换：亮色 / 暗色
- 快捷键：空格键开始/暂停
- 本地存储：自动保存设置、任务、统计数据## 自定义
在页面底部的“设置”中可以修改：专注/短休/长休时长、长休间隔、是否自动开启下一阶段、音量等。## 部署
- 方式一：直接把四个文件（index.html、style.css、script.js、README.md）放到任意静态托管平台（如 GitHub Pages、Vercel 静态、Netlify、阿里/腾讯静态托管等）
- 方式二：使用任意 HTTP 静态服务器（如 `python -m http.server 8080`）在本地预览## 浏览器支持
现代浏览器（Chrome/Edge/Firefox/Safari 最新版）。## 许可
MIT。

四、使用总结

从这一次的效果来看，不得不说，
比之前生成的效果要好。而且做了两种主题色可供切换。反正比我写的产品设计规划要好。
下次出一个claude 4从规划提示词到最终效果的亡。