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
• 收斂理由與入選方案已紀錄

精簡範例輸出

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