生成一個漂亮表單不難，真正的使用體驗藏在載入、空資料、錯誤、鍵盤操作與窄螢幕。今天讓 Codex 把到期時間加入任務表單與清單，並用使用者流程驗收，而不是只看一張桌面截圖。

完整狀態比 Happy Path 更重要

建立與編輯表單可選擇到期時間，未填時不應出現錯誤；格式無效時在相關欄位附近顯示訊息。送出期間避免重複操作並呈現進度；失敗時保留可修正的輸入。清單能區分無到期時間、即將到期和已逾期，但顏色不能成為唯一訊號。

空清單要告訴使用者下一步能做什麼，載入中避免整頁跳動，服務失敗要提供重試或回復入口。鍵盤應能依合理順序移動焦點，輸入欄有可讀標籤，錯誤訊息能被輔助技術關聯。窄螢幕下按鈕和文字不應互相覆蓋。

交給 Codex 的 UI 任務

「沿用現有設計與元件，加入可選到期時間的建立、編輯與清單顯示。覆蓋 loading、error、empty、窄螢幕與鍵盤操作；不要重做整個視覺系統。先列出使用者流程與狀態，再實作並用可執行測試和手動檢查回報結果。」

我會從第一個畫面開始操作：不看說明能否找到新增入口、錯誤是否出現在正確位置、取消後輸入是否依需求保留，以及 API 失敗時畫面有沒有假成功。若 AI 加入大量裝飾卻漏掉錯誤狀態，仍判定未完成。

視覺驗收怎麼留下證據

同一功能至少截取正常、空資料、錯誤和手機寬度狀態，並標出互動重點。截圖只能證明某一瞬間，還要記錄鍵盤操作、焦點、讀屏標籤與實際請求結果。若發現樣式問題，保存修正前後畫面和對應 diff。

今天的結果與限制

本文完成前端行為、狀態與無障礙驗收，尚未產生真實 UI 或操作結果。實作時需用實際瀏覽器和支援的檢查工具驗證，不能以程式碼看起來正確取代操作。

今天學到什麼？

好介面不是只有成功時好看，而是在等待、沒有資料和出錯時仍讓人知道發生什麼。明天往後端走，讓 API 的輸入與錯誤同樣可靠。