為什麼要做這個網站？

為了提升工作時的專注度，我試著使用番茄鐘工作法，因此開始四處試用別人製作的番茄鐘。

測試過幾個番茄鐘發現一些狀況:

  • 需要登入才能使用
  • 跟其他服務整合的一些額外的功能，反而變成執行番茄鐘工作法的阻礙
  • UI 設計的很華麗，但也消秏比較多的資源
  • 如果選擇手機上的 APP 則是增加了接觸手機而分心的機會
  • UI 風格我不喜歡

搞到後來就決定，要花時間試用別人做的工具然後在那邊挑毛病，不如自己做一個工具來用，反正番茄鐘的複雜度不高。

番茄鐘是如何運作的？

這邊簡單介紹一下番茄鐘工作法的基本概念。

執行流程:

  1. 選定一項要執行的任務
  2. 啟動番茄鐘，開始專注工作 25 分鐘倒數
  3. 開始你的任務，專注在工作上 25 分鐘，避免中途中斷工作
  4. 番茄鐘提示時間到了，開始短休息 5 分鐘倒數
  5. 暫時放下工作認真休息，起身走動、喝個水、找人說個話之類的
  6. 每完成 4 個番茄鐘時，進入長休息 15 分鐘倒數

重要的原則:

  • 如果你一定要停下手邊的任務去做別的事，這次的番茄鐘就要宣告失敗。
  • 番茄鐘的最小單位是 1，不會有 2.5 個番茄鐘
  • 休息很重要，時間到就要休息

如何製作這個網站？

這次的任務交給 Claude Code 來實作順便練一下如何指揮 Claude Code 使用 TDD 實戰製作網站。 TDD 的部份可以參考之前寫的文章: Spec-kit 並沒有很實用，TDD 比較實在。

首先決定開發方式，告訴 Claude Code 要如何製作這個專案，條件大概有下面這些:

  • 這個網站只用 HTML/CSS/JS 完成，不使用額外的框架
  • 要有辦法進行測試，驗證程式是否滿足使用情境
  • 依照 TDD 的原則開發程式

將想像中的番茄鐘樣子逐項的寫下來餵給 Claude Code，初期有下面這些情境:

  • 三種計時器: 25 分鐘工作 / 5 分鐘短休息 / 15 分鐘長休息
  • 四個工作週期後進入長休息
  • 記錄番茄鐘次數，讓使用者可以回顧自己的工作狀況

基本上就是在寫 User Story 跟 AC，我加入一個 User Story，Claude Code 就要寫出對應的測試再寫程式。

完成了

成品放在這邊: https://nyo.tw/pomodorotech/ ，歡迎大家試用並給我回饋。