# HTML 模型草繪工具

> 生成 2-3 個互動式 HTML 模型變體，以便在決定採用單一方法之前比較 UI/UX 設計方向。快速探索不同的視覺立場並收集回饋。

- Canonical: https://nanoskill.ai/tw/skills/html-mockup-sketcher
- Markdown: https://nanoskill.ai/tw/skills/html-mockup-sketcher.md
- Author: NousResearch
- Published: 2026-06-04T05:30:00.000Z
- Updated: 2026-07-21T18:34:02.819Z
- Language: zh-TW
- Source type: github
- Popularity signal: 2137

## Sources

- https://github.com/NousResearch/hermes-agent

## Install

```shell
npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch
```

## About

HTML 模型草繪工具是一項強大的技能，旨在幫助使用者透過可拋棄的 HTML 模型快速探索和比較 UI/UX 設計方向。此工具不會讓您侷限於單一設計，而是生成 2-3 個互動式變體，以便並列比較不同的視覺立場。它非常適合早期設計探索，幫助您在投入大量開發資源之前，將概念視覺化並收集回饋。

此技能專注於建立超越靜態圖片的功能性、互動式 HTML 模型。每個變體都是一個獨立的 HTML 檔案，具有內嵌 CSS、系統字型和逼真的內容。至關重要的是，這些模型包含基本的互動性，例如可點擊的連結、懸停狀態和至少一個狀態轉換，為使用者體驗提供更具體的感受。整合的瀏覽器工具可進行視覺驗證，確保模型乾淨且無錯誤。

為了促進明智的決策，HTML 模型草繪工具提供了結構化的比較。每個變體都附有一個詳細的 \`README.md\`，概述其設計原則、關鍵選擇、取捨和最佳應用場景。生成後，會有一個比較表格摘要各個設計面向的差異，並伴隨主觀分析，幫助您選擇優勝者、組合元素或進一步迭代。

## Key features

- **生成多個設計變體**: 同時產生 2-3 個獨特的 HTML 模型變體，每個都探索不同的設計立場（例如密度、重點、美學、版面），以便並列比較。
- **互動式 HTML 模型**: 建立具有內嵌 CSS、系統字型和逼真偽造內容的獨立 HTML 檔案。模型是互動式的，允許點擊連結、懸停效果和至少一個狀態轉換。
- **使用瀏覽器工具進行視覺驗證**: 利用整合的瀏覽器導航和視覺工具，在視覺上檢查並驗證每個 HTML 模型，確保版面在呈現之前乾淨、可讀且無錯誤。
- **結構化的變體文件**: 每個 HTML 模型變體都包含一個 \`README.md\`，詳細說明其設計立場、關鍵選擇（版面、字型、色彩、互動）、取捨以及理想用例，以促進明智的比較。
- **比較分析表格**: 在一個比較表格中呈現所有生成的 HTML 模型變體，強調密度、主要行動可見性、可掃讀性和整體感覺等關鍵面向的差異，並附帶主觀摘要。

## Use cases

- **探索 UI/UX 設計方向**: 快速生成並比較多個 HTML 模型變體，以在投入大量開發時間之前探索不同的使用者介面與使用者體驗設計點子。
- **收集對視覺概念的回饋**: 向利害關係人或使用者展示互動式 HTML 模型，以收集對各種視覺方向的早期回饋，有助於精煉概念並做出明智的設計決策。
- **為新功能快速建立原型**: 建立可拋棄的 HTML 模型，以快速為新功能或畫面製作原型，專注於核心功能與視覺流程，而非生產就緒的程式碼。

## Result preview

查看由這個代理技能生成的有關精品飯店網站的實際 HTML 檔案。

![超文本標記語言模型代理技能的演示](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg)

![HTML 模型代理技能的示範](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg)

![HTML模擬代理技能的示範](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg)

![HTML 模型代理技能展示](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg)

## Result walkthrough

### 步驟 1：安裝

將此技能新增到您的代理中。

![使用 HTML 示意圖的第一步簡單示範](https://file.nanoskill.ai/HTML-mockup-step-1.jpg)

### 步驟 2：描述您的網站

說明您想建立的網站的詳細資訊（例如風格、類型）。

![使用 HTML 模型第二步的簡單示範](https://file.nanoskill.ai/HTML-mockup-step-2.jpg)

### 步驟 3：檢閱結果

檢閱並比較生成的 HTML 模型。

![展示使用超文件標示語言模型第三步的簡單示範](https://file.nanoskill.ai/HTML-mockup-step-3.jpg)

## Skill definition

# 草繪

當使用者想在決定採用某個設計方向之前先**看看設計方向**時，請使用此技能——將 UI/UX 點子作為可拋棄的 HTML 模型來探索。重點是生成 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 其餘部分的整合。此技能是輕量級的獨立版本——沒有狀態機制的單次性草繪。

## 核心方法

```
吸收 → 變體 → 正面對決 → 挑選優勝者（或迭代）
```

### 1. 吸收（若使用者已提供足夠資訊則跳過）

在生成變體之前，取得三項資訊——一次一個問題，不要一次全問：

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

在下一個問題之前簡要回應每個答案。如果使用者已事先提供全部三項資訊，則直接跳到變體。

### 2. 變體（2-3 個，從未 1 個，很少 4 個以上）

一口氣產出 **2-3 個變體**。每個變體都是一個完整、獨立的 HTML 檔案。不要描述變體——建構它們。重點是比較。

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

- **密度：** 緊湊 / 通風 / 極高密度（選擇兩個對比的極端）
- **重點：** 內容優先 / 行動優先 / 工具優先
- **美學：** 編輯風格 / 實用主義 / 俏皮
- **版面：** 單欄 / 側邊欄 / 分割窗格
- **根基：** 基於卡片 / 裸露內容 / 文件風格

選擇一個軸線並從中分離。兩個僅在強調色上有所不同的變體是徒勞無功的——使用者無法區分它們。

**變體命名：** 描述立場，而非數字。

```
sketches/
├── 001-平靜編輯風格/
│   ├── index.html
│   └── README.md
├── 001-實用主義高密度/
│   ├── index.html
│   └── README.md
└── 001-俏皮分割/
    ├── 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-平靜編輯風格/index.html")
browser_vision(question="這個版面看起來乾淨且可讀嗎？有任何可見的錯誤（重疊文字、未設定樣式的元素、圖片損壞）嗎？")
```

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

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

```html
<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` 應回答：

```markdown
## 變體：{立場名稱}

### 設計立場
用一句話說明驅動此變體的原則。

### 關鍵選擇
- 版面：...
- 字型：...
- 色彩：...
- 互動：...

### 取捨
- 強項：...
- 弱項：...

### 最適合
- 此變體實際服務的使用者類型或用例
```

### 5. 正面對決

在所有變體都建構完成後，將它們呈現為比較。不要只是列出——**提出主觀意見**：

```markdown
## 針對首頁的三種觀點

| 面向 | 平靜編輯風格 | 實用主義高密度 | 俏皮分割 |
|------|-------------|---------------|----------|
| 密度   | 低          | 高            | 中       |
| 主要行動可見性 | 低 | 高 | 中 |
| 可掃讀性 | 高 | 中 | 低 |
| 感覺 | 平靜、可信賴 | 銳利、工具導向 | 迷人、有活力 |

**我的看法：** 實用主義高密度適合進階使用者，平靜編輯風格適合內容導向的受眾。俏皮分割最弱——試圖兩者兼顧卻兩者都不討好。
```

讓使用者挑選一個優勝者，或將兩個組合成混合體，或要求另一輪迭代。

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

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

```css
/* 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-立場名稱/index.html` + `README.md`
- 告知使用者如何開啟它們：在 macOS 上使用 `open sketches/001-平靜編輯風格/index.html`，在 Linux 上使用 `xdg-open`，在 Windows 上使用 `start`
- 保持變體的可拋棄性——一個你覺得需要保留的草圖應該被提升為真正的專案程式碼，而不是作為一項資產來管理。

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

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

對每個變體重複，然後呈現比較表格。

## 歸屬

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

## FAQ

### 什麼是 HTML 模型？

HTML 模型是一個可拋棄的、互動式的網頁，使用 HTML 和基本樣式（通常是內嵌 CSS）建構，以便快速將不同的 UI/UX 設計點子視覺化並進行比較。它並非用於生產環境，而是用於早期設計探索。

### 此技能會生成多少個 HTML 模型變體？

此技能通常一次生成 2-3 個互動式 HTML 模型變體。目標是提供對比的設計立場以供比較，而非列出所有微小變化。

### 我可以使用此技能來建立生產就緒的程式碼嗎？

不行，此技能特別設計用於「可拋棄的」HTML 模型來探索設計方向。若要製作生產就緒的元件或精美的成品，您應該使用其他工具或技能，例如 \`claude-design\`。

### 這些 HTML 模型具有什麼樣的互動性？

生成的 HTML 模型是互動式的，這意味著連結可以點擊、懸停效果真實，且至少有一個狀態轉換（例如，開啟/關閉面板、過濾列表）。這使得體驗比靜態圖片更具真實感。

### 此技能如何幫助我比較不同的設計？

在生成 HTML 模型後，此技能會提供一個比較表格，強調各種設計面向（例如密度、版面、美學）的關鍵差異。它還會提供一個主觀的摘要來引導您的決策。

### 我需要提供哪些資訊才能生成 HTML 模型？

為了生成有效的 HTML 模型，您會被問及想要的「感受」（形容詞、氛圍）、捕捉到該感受的參考應用程式/網站，以及使用者在該畫面上進行的最重要「核心動作」。