UNIT 07 · 120 MINUTES
前端、UI 與視覺迭代
學習目標：把「做漂亮一點」轉成可以重現、可以比較的 UI 任務；用截圖與瀏覽器驗收多個尺寸和互動狀態。
120 分鐘安排
10 分建立視覺基線
20 分UI prompt 結構
20 分檢查元件與版面
40 分迭代實作
20 分多尺寸驗收
10 分回顧
本單元計時00:00:00
VISUAL TASK BRIEF
UI 任務至少交代六件事
頁面 / 元件
指出路由、元件或截圖中的區域。
視窗尺寸
指定 viewport 寬高，避免「手機版」定義含糊。
視覺差異
指出尺寸、留白、對齊、顏色、層級的具體落差。
互動狀態
正常、hover、focus、loading、error、empty。
保留項目
品牌、字體、元件或既有設計系統不可任意替換。
驗收方法
指定可實際看到的流程或截圖對照條件。
CASE / MOBILE FILTER PANEL
案例：手機版篩選面板擋住送出按鈕
桌面版搜尋表單正常。390px 寬手機上，篩選面板超出底部，使用者看不到「套用」按鈕。設計稿要求按鈕固定在面板底部，內容區可捲動。
只調高度可能遮住鍵盤或安全區；需要說清容器捲動和按鈕定位。- 提供 390px viewport 截圖和開啟面板的操作。
- 說明預期：面板可見、內容可捲、底部按鈕固定且能點。
- 補充鍵盤焦點、長內容、iOS 安全區或窄螢幕限制。
- 先沿用現有 modal / drawer 元件和 design tokens，不重造整套樣式。
ITERATION LOOP
先做一輪，再依畫面證據微調
1 · Snapshot
截取原本狀況，記下 viewport、route 和資料狀態。
2 · Locate
找出元件、樣式來源和互動狀態，不猜檔名。
3 · Implement
一次聚焦一組差異，例如只調整面板高度與 footer。
4 · Compare
重開相同路由和尺寸，比對畫面與互動，而非只看程式碼。
視覺回饋要可操作：「按鈕再往上一點」改成「390×844 時按鈕被底部遮住，請讓面板內文可捲，按鈕固定在底部且保留安全區」。
PROMPT WORKBENCH
UI 任務 Prompt 範本
LAB / 40 MIN
實作：修一個響應式介面問題
- 找一個手機/桌面不一致的頁面，保存目前截圖和尺寸。
- 讓 Codex 先定位容器、斷點、共用元件和互動狀態。
- 要求它提出最小實作計畫；限制只改指定元件。
- 執行頁面，在至少兩個尺寸檢查正常、窄版和極端內容狀態。
- 測鍵盤操作和 focus；看是否出現橫向捲動、遮擋或截斷。
- 保存修改後截圖，列出哪些尺寸已實際檢查。
理解題：要 Codex 修手機版截圖，你最該提供哪一組脈絡？