sketch

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（使用者已給足就跳過）

產變體前先拿到三件事，一次一題：

1. 感覺：「這東西該是什麼感覺？形容詞、情緒、vibe。」（「安靜、編輯感、像 Linear」比「極簡」有用得多）
2. 參照：「哪些 app 或網站有你想像中的感覺？」實際參照勝過抽象描述
3. 核心動作：「使用者在這個畫面上最重要的一件事是什麼？」變體都要把它做好，否則只是裝飾

2. 變體（2 到 3 個，絕不 1 個，極少 4 個以上）

每個變體要有不同的設計立場，不是不同的像素值。可用的立場軸：

• 密度：緊湊 / 留白 / 超高密度（挑兩個對立端）
• 強調：內容優先 / 動作優先 / 工具優先
• 美感：編輯感 / 工具感 / 玩心
• 版式：單欄 / 側欄 / 分割面板
• 落地方式：卡片式 / 裸內容 / 文件式

挑一條軸拉開距離。只差主色的兩個變體是浪費，使用者無法區辨。

3. 做成真的 HTML

每個變體是單一自足 HTML 檔：