| name | sketch |
| description | 拋棄式 HTML mockup 比稿：產出 2 到 3 個設計立場不同的變體（密度 / 版式 / 強調軸，不是換色），各附取捨說明，最後給有立場的對比結論。適用：「畫個草圖」「比較 A 版 B 版」「先看方向再做」「給我看幾種做法」。要 production 元件或設計已定案時不適用。 |
| source | adapted from openclawyhwang-hub/tGD tgd-sketch (Apache-2.0，上游改作自 gsd-build/get-shit-done MIT) |
| updated | "2026-07-13T00:00:00.000Z" |
Sketch（拋棄式 mockup 比稿）
核心
在投入實作前，用 2 到 3 個可互動的拋棄式 HTML mockup 比較設計方向。每個變體是一個自足的 HTML 檔：inline CSS、擬真內容、基本互動。目的是視覺比較，不是可出貨的程式碼。
只做一版是原型不是比稿，比稿的價值在正面對決。兩個變體多一倍工，消掉八成重做風險。
何時使用
- 使用者想在動工前探索 UI / UX 方向
- 「畫個草圖」「X 長什麼樣給我看看」「比較版型 A 跟 B」「給我 2 到 3 種做法」
- 早期設計探索，速度比打磨重要
不適用：要 production 元件（走 frontend-design / interface-design 正規做）、要單一精緻 HTML 成品、要圖表或架構圖、設計已定案（直接做）。
流程
intake → 變體 → 正面對決 → 選出勝者（或再一輪）
1. Intake（使用者已給足就跳過）
產變體前先拿到三件事，一次一題：
- 感覺：「這東西該是什麼感覺？形容詞、情緒、vibe。」（「安靜、編輯感、像 Linear」比「極簡」有用得多）
- 參照：「哪些 app 或網站有你想像中的感覺？」實際參照勝過抽象描述
- 核心動作：「使用者在這個畫面上最重要的一件事是什麼？」變體都要把它做好，否則只是裝飾
2. 變體（2 到 3 個，絕不 1 個，極少 4 個以上）
每個變體要有不同的設計立場，不是不同的像素值。可用的立場軸：
- 密度：緊湊 / 留白 / 超高密度（挑兩個對立端）
- 強調：內容優先 / 動作優先 / 工具優先
- 美感：編輯感 / 工具感 / 玩心
- 版式：單欄 / 側欄 / 分割面板
- 落地方式：卡片式 / 裸內容 / 文件式
挑一條軸拉開距離。只差主色的兩個變體是浪費，使用者無法區辨。
3. 做成真的 HTML
每個變體是單一自足 HTML 檔：
- inline
<style>，不需建構步驟
- 系統字型（拋棄式草圖可用 CDN 字型或 Tailwind CDN，此豁免僅限 sketch，production 禁 CDN 的規矩照舊）
- 擬真假內容：真的句子、真的名字，不用 lorem ipsum
- 有互動：連結可點、hover 有反應、至少一個狀態轉換（開合、篩選、切換）。凍結的靜態圖比粗糙但會動的草圖更糟
寫完用 agent-browser 開 file:// 截圖實看，抓純看原始碼看不出的版面問題（字型載入失敗、flex 容器塌掉），修到每個變體看起來是對的。
4. 每個變體附 README
## 變體：<立場名>
### 設計立場
一句話講驅動這個變體的原則。
### 關鍵選擇
版式 / 字型 / 色彩 / 互動各一行。
### 取捨
強在哪、弱在哪。
### 適合誰
這個變體實際服務的使用者或情境。
5. 正面對決
全部做完後給對比，不能只列清單，要有立場：
| 維度 | 安靜編輯感 | 工具感高密度 | 玩心分割版 |
|------|-----------|-------------|-----------|
| 密度 | 低 | 高 | 中 |
| 主動作可見度 | 低 | 高 | 中 |
| 掃讀性 | 高 | 中 | 低 |
我的判斷：重度使用者選工具感高密度，內容導向選安靜編輯感。
玩心分割版最弱，兩頭想抓、兩頭不沾。
讓使用者選勝者、合併兩案成混血、或再來一輪。
產物位置
- 預設放 session scratchpad 或使用者指定位置，禁寫進 code repo root：草圖是拋棄式產物不是 source
- 告訴使用者怎麼開：macOS 用
open <路徑>/index.html
- 保持拋棄式：捨不得丟的草圖該升級成真的專案程式碼，不是收藏
互動門檻
草圖夠互動的標準：主動作點下去有可見反應（狀態變化、modal、toast）、至少一個有意義的狀態轉換、可辨識的元件有 hover。超過這些是過度打磨拋棄品，低於這些是截圖。
紅旗
- 變體只差色彩或主色：那是換色不是方案
- 沒有互動：能點的 wireframe 都比靜態截圖好
- 跳過 intake 就生成：不懂感覺 / 參照 / 核心動作，產出必然平庸
- 超過 3 個變體：報酬遞減，使用者無法有效比較
- production 等級的程式碼：草圖是拋棄式的，不要過度投資
- 對比表沒有立場：要明講哪個最強、為什麼
驗證
