線框圖
總覽
UI 提案是一張圖，而不是一段文字。將每個變更畫成一個低成本線框圖： 現狀與提案並排，灰色方塊表示保持不變的部分，僅在討論中的元素上使用真實標籤，並加上一句「為什麼」。它不會複製應用程式的真實外觀：沒有品牌顏色、沒有真實字型、沒有像素精度。使用者一眼就能看出變更，而且繪圖成本極低（消耗少量 token）。
不使用時機： 變更純屬視覺風格（顏色、對比、字型、間距 token），此時應描述或展示真正的 CSS。或者使用者已經決定並要求你實作，那就直接實作。或者沒有涉及佈局、控制項或流程的變更。
輸出格式
一個自包含的 HTML 檔案，建構方式如下：
- 路徑： 專案中的
docs/mockups/YYYY-MM-DD-<主題>.html，這樣線框圖就能與程式碼一起保留並可提交。如果專案已將線框圖放在其他mockups/資料夾，則改用該資料夾。 <head>： 從 kit.html 中逐字複製<!doctype html>到</style></head><body>之間的所有內容。只更改<title>。僅使用 kit 類別。行內style只用於尺寸和間距（width、height、margin、.menu的位置），絕不用於顏色。<h1>與一行.lede。- 每個變更一個章節：
<h2>N · 以使用者語言描述的結果</h2>，然後一個佈局：
| 情況 | 佈局 | 標籤 |
|---|---|---|
| 某元素存在且應變更 | .pair：現狀，然後提案 | .lbl.b「現狀：哪裡有問題」· .lbl.g「提案：改變了什麼」 |
| 修正方案未決定 | .opts：2-3 個選項，若元素存在則在上方放一個小的 .solo 現狀 | .lbl.o「A · 名稱（建議）」；.why「+ 優點 · − 缺點」 |
| 尚無任何元素 | .solo：僅提案 | .lbl.g；編號 .n 的標註在 .why 中說明 |
| 一個元素跨狀態或寬度 | .strip：每個狀態一個框架 | .lbl「空白」、「載入中」、「錯誤」、「手機」…；最多一個 .why 在串列下方 |
.pair的每一側以及每個選項都需要一個標籤（最多 10 字）、其框架或框架群，以及一句.why。當變更是一個序列時（例如選單，然後是選單後的提示），在某一側使用兩個框架。
閱讀 kit.html 一次：在 CSS 下方，它包含每個佈局的實例以及所有類別的索引。
繪圖規則
- 僅在決策相關處使用真實文字： 變更的控制項、其直接鄰近元素，以及用於定位的應用程式名稱或麵包屑導覽。其他所有內容都是
.box（文字行，設定width）、.img（圖像或圖表）或一排灰色方塊.row。 - 標記唯一變更的控制項： 在現狀中的問題處使用
.bad（紅色虛線），在提案中的變更處及區分各選項的元素上使用.good（綠色實線）。在.strip中不做任何標記。框出控制項，而不是整條寬帶或整個框架，因為框架會在邊緣裁剪輪廓線。 - 缺少的東西： 在其應在的位置繪製一個空的虛線插槽（
<span class="in bad">此處無搜尋</span>），而不是在附近元素上畫輪廓。 - 約 800px 寬度： 每個
.pair欄位約 380px，因此將.bar保持在約 5 個項目。 - 應用程式類型： 網頁或桌面 →
.f；窄螢幕或原生手機 →.phone；終端機 UI →.f.mono.pad，搭配真實文字行和灰色方塊表示未變更的輸出。 - 未解決的問題 放在該側的
.why中，以問句形式表達。 - 預算： 每個檔案約 15 KB 或更少。超過約 1.5 KB 的章節是在繪製沒有人需要決定的內容，請將這些內容換成灰色方塊。
展示前檢查
如果有可截圖的瀏覽器工具可用，請開啟檔案並查看。在 Claude 桌面應用程式中，這表示使用 mcp__Claude_Browser__preview_start，參數 url: file://<絕對路徑>，然後使用 mcp__Claude_Browser__computer，動作 screenshot。如果瀏覽器拒絕本機檔案，則視該頁面為未檢視（見下文）。檢查每個輪廓線是否位於其預設元素上、沒有內容被裁剪或換行，以及疊加層是否沒有遮擋它們要說明的內容。修正，然後再次檢查。
如果沒有截圖工具（CLI、無頭模式、子代理），請重新檢查標記是否符合上述檢查，並在交接中說明該頁面尚未被檢視。
交接
在對話中，僅撰寫：
- 檔案作為相對於專案根目錄的 Markdown 連結；
- 每個章節一行：編號、標題與狀態（「準備好」、「選擇 A/B/C」或未解決的問題）；
- 你需要的決策：每個一句話，你的選擇以及唯一的主要原因。
繪圖及其 .why 行已包含細節與取捨，因此不要再次描述它們。在獲得使用者選擇之前不要開始建構。如果沒有使用者可以詢問（子代理、無頭模式），回傳同樣的三件事並停止。
常見錯誤
| 錯誤 | 應改為 |
|---|---|
| 標記每個元素 | 僅標記決策觸及的元素 |
| 重新設計以匹配應用程式 | 逐字使用 Kit CSS；灰色方塊 |
| 在對話中為每個繪圖寫一段文字 | 連結、每節一行、決策事項 |