candy14432 Prototype｜原型製作
任務定義
把線框/視覺稿組裝成可操作的互動原型，模擬真實情境，為 Test 收集回饋。當你需要「製作可點擊的原型」、「展示互動流程」、「準備測試素材」時，就應該使用此技能進行原型製作與互動設定。
何時使用
- Ideate 已收斂解法，需要可操作的體驗
- 開發前需驗證關鍵互動或技術可行性
- 需要對外展示概念並收集意見
- 需要準備可用性測試的互動素材
必要輸入
- 收斂後的線框/視覺稿
- 目標流程與任務、成功指標
- 互動/狀態規則（含 loading/empty/error）
預期輸出
- 可分享的原型連結（桌機/行動裝置）
- 互動與轉場設定（含鍵盤/焦點順序）
- 使用限制與假設說明
完成條件
- 關鍵任務流程可被完整操作
- 主要狀態（正常/錯誤/空/載入）皆可展示
- 已標記限制與假設，方便測試說明
不適用情境
- 尚未收斂解法或需求不明確（建議回到 Define 或 Ideate）
- 僅需要靜態視覺展示（可留在 Ideate）
觸發條件
完整關鍵字庫請參考：KEYWORDS_LIBRARY.md > Prototype 章節
核心關鍵字（高優先級）
- 主要動詞：製作原型、做原型、建立原型、設定互動、加入互動、展示、示範、demo、分享、發布（原型連結）
- 名詞：原型、互動原型、可點擊原型、高保真原型、互動稿、互動、轉場、動畫、流程、操作流程、Demo、展示版本、狀態（loading/error/empty）、分享連結、測試連結
- 情境描述：可以點擊的、可以操作的、準備測試用的、展示給客戶看的、模擬真實操作
前置條件
- 需要已有線框圖或視覺稿（來自 Ideate）
排除條件（優先考慮其他技能）
- 若同時提到「只需要靜態畫面」→ 轉 Ideate
- 若同時提到「還沒設計畫面」→ 轉 Ideate
- 若同時提到「測試原型」、「驗證原型」→ 轉 Test
必要澄清
根據 Ideate 階段的選擇
如果在 Ideate 選擇了「是，按照 spec.md 和設計稿進行開發」：
- 我會用 React + Shadcn/UI 建立專案並實作元件
- 完成後直接執行
/test進行測試
如果在 Ideate 選擇了「否，繼續優化設計」：
- 進入原型驗證流程
- 製作互動原型並持續優化
- 直到您認為原型接近 MVP 階段後，才執行
/test
原型驗證流程（選擇「否」時）
原型規劃
- 需支援哪些平台/裝置？
- 是否需要鍵盤操作與 a11y 驗證？
- 優先要呈現哪些情境與分支？
原型保真度選擇
- 低保真（紙本/簡單點擊）：驗證流程與資訊架構
- 中保真（互動線框）：驗證互動模式與任務完成度
- 高保真（完整視覺+互動）：驗證視覺設計與品牌感受
原型實作方式
選項 A：設計工具原型
- 使用 Figma Prototype、Axure、Framer
- 優點：快速製作，易於修改
選項 B：程式碼原型（React + Shadcn/UI）
- 使用 React + Shadcn/UI + Tailwind CSS 開發
- 優點：真實互動、可直接測試
MVP 準備度確認
完成原型後，詢問：
這個原型是否已接近 MVP 階段，可以進行測試了？
- 是：執行
/test進行可用性測試 - 否：繼續優化原型，調整互動與視覺
可搭配技能
- Ideate：取用線框與視覺方向
- Test：以原型進行可用性/a11y 驗證
參考資料 (References)
本技能整合以下詳細方法，當需要更深入的執行指引時請參考：
原型製作相關
references/prototyping/SKILL.md
原型工具比較、互動設定技巧、狀態管理、測試準備與分享設定。
適用時機：選擇原型工具、設定互動效果、管理畫面狀態、準備測試、分享原型。
關鍵場景：「用什麼工具做原型」、「如何設定點擊互動」、「如何處理錯誤狀態」、「如何分享原型連結」、「如何準備測試」。
進階參考
references/SKILL_USAGE_GUIDE.md- Skill 使用規則、專案檢測與開發選項
執行步驟
- 組裝畫面：串接線框/高保真稿形成完整流程。
- 設定互動：點擊/滑動/鍵盤導覽，涵蓋成功與錯誤分支。
- 補足情境：加入 loading/empty/error，模擬真實資料。
- 分享與說明：建立測試連結，附上限制與假設。
執行檢查
- 關鍵任務可完整操作
- 主要狀態（正常/錯誤/空/載入）已覆蓋
- 鍵盤/焦點順序可用並具可視焦點
- 分享連結與限制說明已備妥
精簡範例輸出
# Prototype 摘要
- 覆蓋流程：登入→選品→結帳
- 互動：滑動切換方案、鍵盤 Tab 順序已設定
- 狀態：空購物車、付款失敗、載入中皆可演示
- 限制：僅桌機尺寸，資料為假資料，不含第三方驗證