Lord1Egypt/awesome-skill-forge

Sketch

當使用者想在拍板定案之前先看個設計方向時，使用此技能——將 UI/UX 點子做成可拋棄的 HTML 原型。重點是一次產出 2-3 種可互動的變體，讓使用者能並排比較視覺方向，而不是產出可上線的程式碼。

當使用者說出「草稿這個畫面」、「讓我看 X 可能的樣子」、「比較佈局 A 跟 B」、「給我 2-3 種 UI 的版本」、「讓我看一些變化」、「在做之前先打個樣」這類話時，請載入此技能。

何時不該使用

• 使用者想要一個 production 元件——請改用 claude-design 或好好建構它
• 使用者想要一個精美的一次性 HTML 成品（登陸頁面、簡報）——claude-design
• 使用者想要圖表——excalidraw、architecture-diagram
• 設計已經定案——直接建構就好

若使用者已安裝完整 GSD 系統

如果 gsd-sketch 作為同級技能出現（透過 npx get-shit-done-cc --hermes 安裝），請優先使用 gsd-sketch 以獲得完整工作流程：持久的 .planning/sketches/ 目錄搭配 MANIFEST、前沿模式分析、跨過往草稿的一致性審計，以及與 GSD 其他部分的整合。此技能是輕量級的獨立版本——不帶狀態機制的單次草稿。

核心方法

輸入  →  變體  →  較勁  →  選出優勝者（或迭代）

1. 輸入（如果使用者已經給了你足夠資訊，則跳過）

在產出變體之前，先取得三件事——一次問一個問題，不要一次全問：

1. 感覺。「這應該給人什麼感覺？形容詞、情緒、一種氛圍。」——「冷靜、編輯感、像 Linear」比「極簡」更能傳達資訊。
2. 參考資料。「有哪些應用程式、網站或產品捕捉到了你想像中的感覺？」——實際的參考資料勝過抽象的形容。
3. 核心動作。「使用者在此畫面上做的最重要的一件事是什麼？」——所有變體都應該很好地服務於這個動作；如果沒有，它們就只是裝飾。

在下一個問題之前，簡短地回應每個答案。如果使用者已經一次給了你全部三個資訊，直接跳到變體階段。

2. 變體（2-3 種，永遠不要 1 種，很少需要 4 種以上）

一次產出 2-3 種變體。每個變體都是一個完整、自包含的 HTML 檔案。不要描述變體——把它們做出來。重點在於比較。

每個變體應該採取不同的設計立場，而不是不同的像素值。三個好的變體軸線：

• 密度： 緊湊 / 寬敞 / 超密集（選兩個對比的極端）
• 重點： 內容優先 / 動作優先 / 工具優先
• 美學： 編輯感 / 實用性 / 趣味性
• 版面： 單欄 / 側邊欄 / 分割面板
• 基礎形式： 卡片式 / 裸內容 / 文件風格

選定一個軸線並從中拉開距離。兩個只在強調色上不同的變體是白費力氣——使用者無法區分它們。

變體命名： 描述立場，而不是編號。

sketches/
├── 001-calm-editorial/
│   ├── index.html
│   └── README.md
├── 001-utilitarian-dense/
│   ├── index.html
│   └── README.md
└── 001-playful-split/
    ├── index.html
    └── README.md

3. 讓它們成為真實的 HTML

每個變體都是一個單一的自包含 HTML 檔案：

• 內嵌 <style>——無需建置步驟、無外部 CSS
• 系統字型或透過 <link> 引入的一個 Google Font
• 允許透過 CDN 使用 Tailwind（<script src="https://cdn.tailwindcss.com"></script>）
• 擬真的假內容——實際的句子、實際的名字，不是「Lorem ipsum」
• 可互動：連結可點擊、滑鼠懸停效果真實、至少一個狀態轉換（開啟/關閉、篩選、切換）。一個凍結的靜態圖像比一個粗糙的動畫版本更糟。

在瀏覽器中打開它。如果看起來有問題，在展示給使用者之前先修復它。

使用 Hermes 的瀏覽器工具視覺驗證變體。 不要只是寫 HTML 然後指望它能正確渲染；載入每個變體並查看它：

browser_navigate(url="file:///absolute/path/to/sketches/001-calm-editorial/index.html")
browser_vision(question="這個版面看起來乾淨可讀嗎？有任何可見的錯誤（文字重疊、未設樣式的元素、壞掉的圖片）嗎？")

browser_vision 會回傳頁面上實際內容的 AI 描述以及一個螢幕截圖路徑——可以捕捉到純原始碼檢查遺漏的版面錯誤（例如字型載入靜默失敗、flex 容器意外折疊）。修正並重新導航，直到每個變體看起來都正確。

預設 CSS 重置 + 系統字型堆疊以快速啟動：

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1a1a1a;
    background: #fafafa;
    line-height: 1.5;
  }
</style>

4. 變體 README

每個變體的 README.md 回答：

## 變體：{立場名稱}

### 設計立場

一句話說明此變體的驅動原則。

### 關鍵選擇
- 版面：...
- 字體排版：...
- 顏色：...
- 互動：...

### 取捨
- 優勢：...
- 劣勢：...

### 最佳適用
- 此變體真正服務的用戶類型或使用案例

5. 較勁

在所有變體完成後，將它們作為一個比較呈現出來。不要只是列出——給出有觀點的意見：

## 首頁的三種版本

| 維度 | 冷靜編輯感 | 實用緊湊 | 趣味分割 |
|-----------|----------------|-------------------|---------------|
| 密度 | 低 | 高 | 中 |
| 主要動作可見性 | 低 | 高 | 中 |
| 掃讀性 | 高 | 中 | 低 |
| 感覺 | 冷靜、可信賴 | 銳利、工具感 | 吸引人、充滿活力 |

**我的看法：** 實用緊湊適合進階使用者，冷靜編輯感適合內容導向的受眾。趣味分割最弱——試圖兼顧兩者卻兩頭落空。

讓使用者選出優勝者，或將兩個混合成混合體，或要求再進行一輪。

主題化（當專案已有視覺識別時）

如果使用者有現成的主題（顏色、字型、代碼），將共享代碼放在 sketches/themes/tokens.css 並在每個變體中透過 @import 引入。保持代碼最小化：

/* sketches/themes/tokens.css */
:root {
  --color-bg: #fafafa;
  --color-fg: #1a1a1a;
  --color-accent: #0066ff;
  --color-muted: #666;
  --radius: 8px;
  --font-display: "Inter", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, sans-serif;
}

不要過度標記化一個拋棄式草稿——三個顏色和一個字型通常就夠了。

互動性門檻

當使用者可以做到以下幾點時，一個草稿就達到足夠的互動性：

1. 點擊一個主要動作，然後發生了一些可見的變化（狀態改變、模態框、提示訊息、導航模擬）
2. 看到一個有意義的狀態轉換（篩選列表、切換模式、開啟/關閉面板）
3. 在可辨識的互動元素上懸停（按鈕、行、分頁標籤）

超過這些就是過度工程化一個拋棄式東西。少於這些就是一個螢幕截圖。

前沿模式（決定下一步該畫什麼）

如果已經存在草稿，而使用者問「我接下來該畫什麼？」：

• 一致性差距——來自不同草稿的兩個優勝變體各自做了獨立的決策，但尚未被組合在一起
• 未草稿的畫面——被提及但從未探索過
• 狀態覆蓋率——快樂路徑已草稿，但空白 / 載入中 / 錯誤 / 1000 個項目的狀態尚未處理
• 響應式差距——只在一個視口下驗證過；在行動裝置 / 超寬螢幕上是否站得住？
• 互動模式——靜態版面存在；但轉場、拖拽、滾動行為尚未處理

提出 2-4 個具名的候選項目。讓使用者選擇。

輸出

• 在儲存庫根目錄建立 sketches/（如果使用者使用 GSD 慣例，則為 .planning/sketches/）
• 每個變體一個子目錄：NNN-variant-stance-name/index.html + README.md
• 告訴使用者如何打開它們：macOS 上用 open sketches/001-calm-editorial/index.html，Linux 上用 xdg-open，Windows 上用 start
• 保持變體的可拋棄性——一個你覺得需要保留的草稿應該被升級為真正的專案程式碼，而不是作為資產來整理

一個變體的典型工具順序：

terminal("mkdir -p sketches/001-calm-editorial")
write_file("sketches/001-calm-editorial/index.html", "<!doctype html>...")
write_file("sketches/001-calm-editorial/README.md", "## 變體：冷靜編輯感\n...")
browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html")
browser_vision(question="這個看起來如何？有任何明顯的版面問題嗎？")

為每個變體重複此流程，然後呈現比較表格。

出處

改編自 GSD (Get Shit Done) 專案的 /gsd-sketch 工作流程 — MIT © 2025 Lex Christopherson (gsd-build/get-shit-done)。完整的 GSD 系統提供了持久的草稿狀態、主題/變體模式參考以及一致性審計工作流程；使用 npx get-shit-done-cc --hermes --global 安裝。