返回技能庫
Ideate 發想ideate

Ideate 發想構思

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

任務定義

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

何時使用

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

必要輸入

  • 問題敘述與成功指標
  • 使用者旅程與關鍵情境
  • 技術/法規/a11y 限制

預期輸出

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

可搭配技能

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

參考資料

references/wireframing/SKILL.md

references/ui-visual-design/SKILL.md

references/design-system/SKILL.md

references/SKILL_USAGE_GUIDE.md - Skill 使用規則、專案檢測與開發選項

精簡範例輸出

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

在 AI 工具中使用

/ideate

在 Windsurf、Cursor 等工具中輸入斜線指令即可觸發此技能。

技能資訊

版本
1.0.0
作者
goodux
授權
MIT

觸發條件

主要動詞：設計、構思、發想、繪製、畫、製作（靜態產物）、探索、比較、選擇（視覺方向）

名詞：線框圖、線框、wireframe、介面設計、UI 設計、畫面設計、視覺方向、視覺風格、UI 風格、版面配置、布局、排版、頁面、畫面、介面、資訊架構、導航結構、設計系統、design tokens

情境描述：如何設計這個畫面、有哪些 UI 風格可以參考、如何安排版面布局、設計一個...介面/頁面

問題已定義或至少有明確目標

若同時提到「可點擊的」、「可操作的」、「互動」→ 轉 Prototype

若同時提到「測試」、「驗證」、「好不好用」→ 轉 Test

若同時提到「還沒定義問題」→ 轉 Define

完成條件

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

不適用情境

  • 問題尚未定義清楚（建議回到 Define）
  • 已直接決定解法，不需發散

執行檢查

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