# Ideate

> 發散解法、繪製線框並探索視覺方向；內含 20 種 UI 風格參考以快速收斂。

- Skill: `candy14432/ideate` (Agent Skill)
- Install (CLI): `npx skillmds@latest add candy14432/ideate`
- Raw SKILL.md: https://api.skillmd.com/api/skills/candy14432/ideate/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: candy14432 (https://skillmd.com/u/candy14432)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/candy14432/ideate

---


# Ideate｜發想構思

## 任務定義
將已定義的問題轉成多個候選解法，透過流程草圖、線框與視覺方向探索，收斂出可進入 Prototype 的方案。當你需要「設計介面」、「繪製線框圖」、「選擇視覺風格」時，就應該使用此技能進行解法發散與設計探索。

## 何時使用
- Define 完成，需產出多個解法選項
- 需要快速產出線框驗證流程與結構
- 需要挑選合適的視覺風格與設計語言
- 需要探索不同設計方向並比較優劣

## 必要輸入
- 問題敘述與成功指標
- 使用者旅程與關鍵情境
- 技術/法規/a11y 限制

## 預期輸出
- 2-3 個解法方向（含流程草圖）
- 核心畫面線框（關鍵路徑）
- 視覺方向候選（參考 20 種 UI 風格）
- 收斂理由與後續 Prototype 範圍

## 完成條件
- 至少 2 個可行解法被記錄與比較
- 線框涵蓋主要任務流程，標註互動/狀態
- 視覺方向有清楚風格描述或示例

## 不適用情境
- 問題尚未定義清楚（建議回到 Define）
- 已直接決定解法，不需發散

## 觸發條件

**完整關鍵字庫請參考**：`KEYWORDS_LIBRARY.md` > Ideate 章節

### 核心關鍵字（高優先級）
- **主要動詞**：設計、構思、發想、繪製、畫、製作（靜態產物）、探索、比較、選擇（視覺方向）
- **名詞**：線框圖、線框、wireframe、介面設計、UI 設計、畫面設計、視覺方向、視覺風格、UI 風格、版面配置、布局、排版、頁面、畫面、介面、資訊架構、導航結構、設計系統、design tokens
- **情境描述**：如何設計這個畫面、有哪些 UI 風格可以參考、如何安排版面布局、設計一個...介面/頁面

### 前置條件
- 問題已定義或至少有明確目標

### 排除條件（優先考慮其他技能）
- 若同時提到「可點擊的」、「可操作的」、「互動」→ 轉 Prototype
- 若同時提到「測試」、「驗證」、「好不好用」→ 轉 Test
- 若同時提到「還沒定義問題」→ 轉 Define

## 必要澄清

### 專案狀態檢查
在開始設計發想前，請先確認：
- 是否已定義核心問題與成功指標（Define）？
- 是否已了解使用者需求與痛點（Empathize）？
- 如果沒有，建議先使用 `/define` 明確問題範疇

### 設計規劃
- 目標指標（KPI）與驗證任務是什麼？
- 裝置/平台限制？是否需要深色模式？
- 需遵循哪些品牌/設計系統規範？
- 哪些情境或角色優先？

### 既有專案情境
如果是既有產品改版或新功能：
- 是否需要保持現有設計語言一致性？
- 是否有既有的設計系統或元件庫可用？
- 改版範圍是局部優化還是全面重設計？

### 實作方式確認

**如果在 Define 選擇了「用 React + Shadcn/UI 做原型」**：
- 完成設計後，我會協助您建立 React 專案並實作元件
- 使用 Next.js 14 + Shadcn/UI + Tailwind CSS
- 如需自訂技術架構，請告知您的偏好

**如果在 Define 選擇了「先產生規格文件（spec.md）」**：
完成設計後，詢問使用者：

您想要按照 spec.md 和設計稿進行開發嗎？
- **是**：我會協助您用 React + Shadcn/UI 建立專案並實作
- **否**：繼續優化設計或產生其他文件

## 可搭配技能
- Define：引用問題與指標
- Prototype：將選定方向轉成互動原型
- Test：以線框或高保真稿進行快速驗證

## 參考資料 (References)

本技能整合以下詳細方法，當需要更深入的執行指引時請參考：

### 線框圖設計相關
- **`references/wireframing/SKILL.md`**  
  線框圖繪製技巧、版面配置原則、互動標註方法與工具選擇。  
  *適用時機*：繪製線框圖、設計版面配置、標註互動細節、選擇線框工具。  
  *關鍵場景*：「如何快速畫線框圖」、「如何安排版面布局」、「如何標註互動說明」、「用什麼工具畫線框」。

### UI 視覺設計相關
- **`references/ui-visual-design/SKILL.md`**  
  20 種 UI 風格資料庫、色彩搭配、排版規範與視覺層級設計。  
  *適用時機*：選擇視覺風格、定義色彩系統、設定排版規則、建立視覺層級。  
  *關鍵場景*：「有哪些 UI 風格可以參考」、「如何選擇配色方案」、「如何設定字體大小」、「如何建立視覺層級」。

### 設計系統建立相關
- **`references/design-system/SKILL.md`**  
  Design Tokens 定義、元件規範、樣式指南與系統治理流程。  
  *適用時機*：建立設計系統、定義 design tokens、規範元件、確保一致性。  
  *關鍵場景*：「如何建立設計系統」、「什麼是 design tokens」、「如何定義元件規範」、「如何維護設計系統」。

### 進階參考
- **`references/SKILL_USAGE_GUIDE.md`** - Skill 使用規則、專案檢測與開發選項

## 執行步驟
1. 發散想法：Crazy 8s / 雙鑽等方法產生多個概念。
2. 線框與流程：繪製關鍵路徑線框，標註互動與狀態。
3. 視覺方向：參考 20 種 UI 風格，建立 2-3 個候選樣式。
4. 收斂評估：比較各方案的可行性、可用性、一致性與 a11y，記錄選擇理由與入選方案。

## 執行檢查
- [ ] 至少 2 個解法與線框被產出並比較
- [ ] 關鍵流程線框包含互動/狀態標註
- [ ] 視覺方向有示例或參考，並考慮對比度/a11y
- [ ] 收斂理由與入選方案已紀錄

## 精簡範例輸出
```markdown
# Ideate 摘要
- 解法 A：單頁結帳 + 固定成本摘要
- 解法 B：兩段式結帳 + 智慧預填
- 視覺方向：Minimalist vs Tech Glow（參考 20 UI 風格庫）
- 選擇理由：A 簡化操作，B 在桌機資訊量較友善；決定先 Prototype 解法 A
```