昨天花了一點時間整理到底要怎麼跟 AI 下指令，也決定先不要一次把所有功能全部塞給它。
今天終於可以正式開始動工了。

第一步，先把以前的設計稿拿回來

我直接把舊有的主畫面設計圖交給 GPT，請它依照原本的畫面幫我生成 Code。

舊設計稿
↓
交給 GPT 分析
↓
生成 Code
↓
放進 VS Code
↓
主畫面出現

版面的基本架構已經出來了，但畫面細節、按鍵位置，以及原本設計中的動態與互動效果，都還需要繼續處理。

主畫面出生了，接下來換番茄鐘

主畫面有了之後，接下來就是昨天拆好的第一個核心功能：

番茄鐘。

這部分我開始改用 VS Code 裡面的 Cline。
把需求跟功能告訴它，再讓它直接讀取目前專案中的檔案，開始建立番茄鐘的頁面與功能。
原本還以為第一天正式開始寫 Code，應該會先遇到一大堆看不懂的錯誤。
結果真正第一個把我攔下來的東西不是 Bug，是 —— Token 不夠。

番茄鐘做到一半，先去研究替代模型

因為原本使用的模型沒辦法繼續，我只好先停下來研究 Cline 還能使用哪些替代模型。
換成另一個免費模型之後，我原本還有點擔心

「那前面做到一半的東西怎麼辦？」

結果新的模型接手後，先重新讀取專案裡已經存在的檔案，再繼續原本的任務。
雖然中間還是花了一點時間重新理解專案，但不用因為換了模型就全部重來。
這也是今天才發現的一件事：

原來 Vibe Coding 的過程中，不一定從頭到尾都只能使用同一個模型。

Cline 好像不只是等我下指令

過程中還發生了一件我原本沒想到的事。
有些功能需要額外支援時，Cline 會直接跳出提示，告訴我還需要安裝或下載什麼東西。
對現在的我來說其實滿方便的，因為很多時候我根本不知道：

「原來做這個之前還需要裝這個？」

比起單純「我下指令，它吐 Code」，實際用起來更像是做到哪裡缺東西，它就再提醒我下一步需要什麼。

番茄鐘真的會動了

研究完模型、重新讓 Cline 接手之後，番茄鐘頁面最後也成功跑起來了。

實際測試：

開始 → 有反應

暫停 → 有反應

再次開始 → 可以繼續

計時也真的會跑。

昨天它還只是一條寫在文章裡的：

第一階段：先做番茄鐘。

今天它真的動起來了。

做出來了，跟做好了，好像是兩件事

實際開始操作之後，很快就發現有些地方還沒有照原本想的方式運作。
最明顯的是「放棄」按鍵，我原本希望的是：

按下放棄
↓
結束這次番茄鐘
↓
回到主畫面

但現在實際按下去，並沒有照原本的需求回到主畫面。

除此之外，有些按鍵的位置目前看起來也有點奇怪。
雖然功能大致可以使用，但從 UI 的角度來看，還是有一些地方需要重新調整。
而且現在還有一個更根本的問題：

主畫面 → 按下開始 → 番茄鐘 ，這條路還不存在。

也就是說……今天成功讓兩個頁面出生了。

但它們現在還不認識彼此。

主畫面有了，番茄鐘也會動了。

接下來要做的事情，好像很明顯了 ——

先讓它們認識一下。