# Sketch

> 拋棄式 HTML mockup 比稿：產出 2 到 3 個設計立場不同的變體（密度 / 版式 / 強調軸，不是換色），各附取捨說明，最後給有立場的對比結論。適用：「畫個草圖」「比較 A 版 B 版」「先看方向再做」「給我看幾種做法」。要 production 元件或設計已定案時不適用。

- Skill: `seikaikyo/sketch` (Agent Skill)
- Install (CLI): `npx skillmds@latest add seikaikyo/sketch`
- Raw SKILL.md: https://api.skillmd.com/api/skills/seikaikyo/sketch/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: seikaikyo (https://skillmd.com/u/seikaikyo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/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

```markdown
## 變體：<立場名>
### 設計立場
一句話講驅動這個變體的原則。
### 關鍵選擇
版式 / 字型 / 色彩 / 互動各一行。
### 取捨
強在哪、弱在哪。
### 適合誰
這個變體實際服務的使用者或情境。
```

### 5. 正面對決

全部做完後給對比，不能只列清單，要有立場：

```markdown
| 維度 | 安靜編輯感 | 工具感高密度 | 玩心分割版 |
|------|-----------|-------------|-----------|
| 密度 | 低 | 高 | 中 |
| 主動作可見度 | 低 | 高 | 中 |
| 掃讀性 | 高 | 中 | 低 |

我的判斷：重度使用者選工具感高密度，內容導向選安靜編輯感。
玩心分割版最弱，兩頭想抓、兩頭不沾。
```

讓使用者選勝者、合併兩案成混血、或再來一輪。

## 產物位置

- 預設放 session scratchpad 或使用者指定位置，禁寫進 code repo root：草圖是拋棄式產物不是 source
- 告訴使用者怎麼開：macOS 用 `open <路徑>/index.html`
- 保持拋棄式：捨不得丟的草圖該升級成真的專案程式碼，不是收藏

## 互動門檻

草圖夠互動的標準：主動作點下去有可見反應（狀態變化、modal、toast）、至少一個有意義的狀態轉換、可辨識的元件有 hover。超過這些是過度打磨拋棄品，低於這些是截圖。

## 紅旗

- 變體只差色彩或主色：那是換色不是方案
- 沒有互動：能點的 wireframe 都比靜態截圖好
- 跳過 intake 就生成：不懂感覺 / 參照 / 核心動作，產出必然平庸
- 超過 3 個變體：報酬遞減，使用者無法有效比較
- production 等級的程式碼：草圖是拋棄式的，不要過度投資
- 對比表沒有立場：要明講哪個最強、為什麼

## 驗證

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