番茄鐘係咩？點解咁有效？
「番茄工作法」（Pomodoro Technique）係一個時間管理方法：專注工作 25 分鐘 → 休息 5 分鐘，每完成 4 個循環就休息長啲（15-30 分鐘）。佢有效係因為人嘅專注力有限，短衝刺式嘅專注反而比長時間硬撐效率高好多 —— 對溫書嘅學生同在家工作嘅上班族特別有用。
App Store 有大把番茄鐘 App，但好多有廣告、要收費、或者功能唔啱。用 AI 自己整一個，功能完全由你話事，仲可以放埋喺手機主畫面當 App 用。
成品功能預覽
- ⏱️ 25分鐘專注 / 5分鐘休息自動切換
- 🔔 完成時有提示音效同震動（手機）
- 🎨 專注時深色背景、休息時綠色背景，一眼睇出狀態
- 📊 記錄今日完成咗幾多個番茄鐘
- ⚙️ 可以自訂專注同休息時間（例如 45/10）
第一步：複製 Prompt 俾 AI
開啟 ChatGPT、Claude 或 Kimi，成段複製貼上：
【角色】你係資深前端工程師，專門設計生產力工具網頁。
【任務】生成一個「番茄鐘學習計時器」網站，單一 HTML 檔案，可直接開啟使用。
【目標用戶】中學生、大學生、在家工作嘅上班族
【功能規格】
- 預設：專注 25 分鐘 → 休息 5 分鐘，自動循環
- 完成 4 個專注循環後，休息 15 分鐘（長休息）
- 大數字倒數顯示（MM:SS），置中顯示
- 三個按鈕：開始、暫停、重設
- 每個階段完成：播放提示音（用 Web Audio API 生成，唔使用外部音效檔）+ 顯示鼓勵訊息
- 專注模式：深藍色背景；休息模式：綠色背景（一眼分到）
- 顯示「今日已完成 X 個番茄鐘」，用 localStorage 儲存紀錄
- 設定區：可自訂專注/短休息/長休息分鐘數
【設計要求】
- 深色模式風格，暗色背景配亮色大字
- 倒數數字要非常大（至少 80px）
- 手機優先設計（響應式）
- 加一個圓形進度環，顯示剩餘時間比例
- 按鈕大、易按，有動畫效果
【技術限制】
- 單一 HTML 檔案，內嵌 CSS + JavaScript
- 唔使用外部圖片、音效檔或框架
- 支援離線使用
- 用 localStorage 儲存統計，刷新頁面唔會冇咗
- 程式碼要有中文註釋
【輸出】
請輸出完整 HTML code，我會直接儲存為 .html 檔案使用。
第二步：儲存做 HTML 檔案
1
複製 AI 輸出嘅完整代碼
由 <!DOCTYPE html> 到最後 </html>，一行都唔好漏。
2
記事本貼上，另存新檔
檔名 pomodoro.html，儲存類型揀「所有檔案」，編碼 UTF-8。
3
雙擊開啟，試撳「開始」
應該會見到倒數開始、背景變色。等佢行完一個階段，聽吓提示音響唔響。
手機想用？將個 HTML 檔案傳去手機（WhatsApp 俾自己都得），用瀏覽器打開，然後喺瀏覽器選單揀「加到主畫面」，就會好似一個 App 咁有 icon 喺桌面。
第三步：按需要微調
直接喺同一個 AI 對話話俾佢知你想點改：
- 「專注時間預設改做 45 分鐘，我係大學生」
- 「加個白噪音功能，專注嗰陣播落雨聲」
- 「加個每週統計圖表，睇吓我邊日最勤力」
- 「加個『任務名稱』欄位，記低每個番茄鐘做緊咩」
同學生哥嘅使用建議
- 📚 溫書：25分鐘專注一科，休息時唔好睇電話（會斷專注），起行飲杯水
- 📝 做功課：挑戰「一個番茄鐘內做完呢頁」，加少少遊戲感
- 🏃 長休息：4 個循環後真係離開張檯，眼睛同大腦都要休息
常見問題 FAQ
Q：提示音唔響？
A：瀏覽器規定要用戶「撳過嘢」先准播音。記住先撳「開始」先會有聲。如果都係唔得，叫 AI「將提示音改做瀏覽器通知 + 震動」。
Q：熄咗個分頁個計時仲行唔行？
A：唔會行，呢類純前端網站要保持分頁開著。進階玩法可以叫 AI 加「背景計時」功能，用時間戳記計算。
Q：localStorage 嘅紀錄會唔會冇咗？
A：只要你唔清除瀏覽器資料，紀錄會一直喺同一部裝置、同一個瀏覽器度。
總結
又一個「5分鐘作品」完成。你會發現個 Pattern 永遠一樣：講清楚規格 → AI 寫 → 儲存 → 用 → 唔啱再改。下次你想要嘅任何小工具 —— 飲水提醒、拉筋計時、背書神器 —— 都係咁整。