prototype

name	prototype
description	將優選解法轉成可操作原型，設定互動、轉場與狀態，為測試與示範做準備。
license	MIT
metadata	{"author":"goodux","version":"1.0.0","category":"design-thinking","language":"zh-TW"}

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 使用規則、專案檢測與開發選項

執行步驟

1. 組裝畫面：串接線框/高保真稿形成完整流程。
2. 設定互動：點擊/滑動/鍵盤導覽，涵蓋成功與錯誤分支。
3. 補足情境：加入 loading/empty/error，模擬真實資料。
4. 分享與說明：建立測試連結，附上限制與假設。

執行檢查

• 關鍵任務可完整操作
• 主要狀態（正常/錯誤/空/載入）已覆蓋
• 鍵盤/焦點順序可用並具可視焦點
• 分享連結與限制說明已備妥

精簡範例輸出

# Prototype 摘要
- 覆蓋流程：登入→選品→結帳
- 互動：滑動切換方案、鍵盤 Tab 順序已設定
- 狀態：空購物車、付款失敗、載入中皆可演示
- 限制：僅桌機尺寸，資料為假資料，不含第三方驗證