發想：一小時為單位的一天

延續第一天聊的「問問題的方式」，今天就來小試身手。

這次的靈感來自 Podcast《小熱鬧》。虹之在節目中分享，他即使是假日，也會替自己安排任務，而且以「每一小時」作為最小單位來規劃一天。

聽完我很有感。回想自己的假日，常常是早上想著「今天要來整理筆記」，結果滑一滑手機、看幾部影片，一抬頭天就黑了。不是沒有想做的事，而是從來沒有把它們放進時間裡。

既然他做得到，我也想效仿看看。但想試，就先得有工具。市面上的待辦清單 app 很多，卻大多只是一條一條列下來，看不出「幾點該做什麼」。與其找，不如自己做一個，也順便驗證 Day 1 說的：把需求講清楚，AI 給的東西會不會真的比較準。

這就是 dayMission 的起點。

試玩

第一次問：一句話的許願

一開始我偷懶，只丟了一句：

幫我做一個每日任務規劃的網頁

AI 很快給了我一個標準的 todo list：一個輸入框、一個新增按鈕、下面一排任務，可以打勾、可以刪除。

能用，但完全不是我腦中的畫面。我要的是「一天攤開來，每個小時一格」，它給我的卻是一張購物清單。回頭看那句 prompt，裡面其實什麼條件都沒有，AI 也只能猜一個最常見的答案。

第二次問：把腦中的畫面講出來

於是我重新整理了一次，把 story、功能、範圍和風格一起寫清楚：

我想做一個「單日時程規劃器」，靈感是以一小時為單位來安排一天。

畫面：左邊是時間軸，從 06:00 到 22:00，每小時一格；右邊是對應的任務欄位。

功能：

• 點空白的時間格可以直接輸入任務，按 Enter 新增
• 任務可以打勾完成、編輯、刪除
• 任務可以上下拖拉換時段
• 如果一件事超過一小時，可以拖任務下緣把它拉長，佔用下面的格子
• 最上方有進度條，顯示今天完成了幾成

限制：只做單日，不需要登入和後端；先用一個 HTML 檔完成，Vue 3 和 SortableJS 用 CDN 引入。

風格：賽博龐克、終端機感。深色背景配螢光色，按鈕用 [ ]、ED、RM 這種文字符號，不要一般圓角按鈕。

這次出來的東西，就接近我想像的樣子了。

做出了什麼

最後完成的 dayMission 可以做到這些事：

過程中也不是一次到位。最麻煩的是「拉長任務」：一開始任務拉長後，下面的格子沒有消失，時間欄和任務欄就整個錯位。我來回跟 AI 描述了好幾次「被佔用的格子應該要不見」，才終於修好。

後來單一 HTML 檔越寫越長，我又請 AI 幫忙改成 Vue + Vite 的架構，把邏輯拆成 composable 和元件，功能和畫面維持不變。

做出來了，但我真的懂嗎？

東西能跑，我也每天拿來排行程了。但老實說，裡面有些程式碼，我自己也說不太清楚。例如修好錯位問題的這段：

const visibleRows = computed(() => {
  const result = []
  let skipCount = 0
  for (let i = 0; i < slots.value.length; i++) {
    const slot = slots.value[i]
    if (skipCount > 0) { skipCount--; continue }
    const dur = slot.task?.duration ?? 1
    result.push({ ...slot, displayDuration: dur })
    if (dur > 1) skipCount = dur - 1
  }
  return result
})

?. 和 ?? 是什麼？...slot 在做什麼？skipCount 又是怎麼讓格子「消失」的？

這就是 Day 1 說的雙面刃：AI 幫我把東西做出來了，但離「學會」還有一段距離。接下來，我就從這些看不懂的地方，一步一步逆向拆回 JavaScript。