seikaikyo/sketch

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 檔：

• 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 等級的程式碼：草圖是拋棄式的，不要過度投資
• 對比表沒有立場：要明講哪個最強、為什麼

驗證

• [ ] 每個變體在瀏覽器實際開過、截圖看過、渲染正確
• [ ] 每個變體有不同的設計立場（不只是換色）
• [ ] 基本互動可用（點擊、hover、狀態轉換）
• [ ] 對比表有立場：明講哪個變體最強、為什麼
• [ ] README 講清楚取捨，不是羅列功能
• [ ] 產物在 scratchpad 或使用者指定位置，沒進 repo root