跳到主要內容

Sketch（草圖）

一次性 HTML 原型：2-3 個設計變體以供比較。

技能元數據​

來源捆綁（默認安裝）
路徑skills/creative/sketch
版本1.0.0
作者Hermes Agent（改編自 gsd-build/get-shit-done）
許可證MIT
平臺linux, macos, windows
標籤sketch, mockup, design, ui, prototype, html, variants, exploration, wireframe, comparison
相關技能spike, claude-design, popular-web-designs, excalidraw

參考：完整 SKILL.md​

信息

以下是 Hermes 在觸發此技能時加載的完整技能定義。這是技能激活時代理所看到的指令。

Sketch（草圖）

當用戶希望在確定最終方案之前查看設計方向——即以一次性 HTML 原型的形式探索 UI/UX 想法時，使用此技能。其目的是生成 2-3 個交互式變體，以便用戶可以並排比較視覺方向，而不是生成可交付的代碼。

當用戶說出類似“草繪這個屏幕”、“給我看看 X 可能是什麼樣子”、“比較佈局 A 和 B”、“給我這個 UI 的 2-3 個方案”、“讓我看看一些變體”、“在我構建之前先做個原型”等話語時，加載此技能。

何時不使用此技能​

  • 用戶想要一個生產級組件 —— 使用 claude-design 或正確構建它
  • 用戶想要一個精緻的獨立 HTML 製品（落地頁、演示文稿）—— claude-design
  • 用戶想要圖表 —— excalidraw, architecture-diagram
  • 設計已鎖定 —— 直接構建即可

如果用戶安裝了完整的 GSD 系統​

如果 gsd-sketch 作為兄弟技能出現（通過 npx get-shit-done-cc --hermes 安裝），請優先使用 gsd-sketch 以獲得完整的工作流：包含 MANIFEST 的持久化 .planning/sketches/、前沿模式分析、跨歷史草圖的一致性審計，以及與 GSD 其餘部分的集成。此技能是輕量級的獨立版本——無需狀態機制的一次性草繪。

核心方法​

intake  →  variants  →  head-to-head  →  pick winner (or iterate)

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="Does this layout look clean and readable? Any visible bugs (overlapping text, unstyled elements, broken images)?")

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 需回答以下問題：

## Variant: {stance name}

### Design stance
One sentence on the principle driving this variant.

### Key choices
- Layout: ...
- Typography: ...
- Color: ...
- Interaction: ...

### Trade-offs
- Strong at: ...
- Weak at: ...

### Best for
- The kind of user or use case this variant actually serves

5. 直接對比​

在所有變體構建完成後，以對比形式展示它們。不要僅僅羅列——要給出觀點：

## Three takes on the home screen

| Dimension | Calm editorial | Utilitarian dense | Playful split |
|-----------|----------------|-------------------|---------------|
| Density   | Low            | High              | Medium        |
| Primary action visibility | Low | High | Medium |
| Scan-ability | High | Medium | Low |
| Feel | Calm, trusted | Sharp, tool-like | Inviting, energetic |

**My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither.

讓用戶選擇一個勝出者，或將兩個變體組合成混合方案，或要求進行下一輪迭代。

主題化（當項目具有視覺標識時）​

如果用戶已有現有主題（顏色、字體、令牌），請將共享令牌放入 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-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", "## Variant: Calm editorial\n...")
browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html")
browser_vision(question="How does this look? Any obvious layout issues?")

對每個變體重複上述步驟，然後展示對比表格。

歸屬​

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