返回技能庫
Prototype 原型prototype

Prototype 原型製作

將優選解法轉成可操作原型，設定互動、轉場與狀態，為測試與示範做準備。

任務定義

把線框/視覺稿組裝成可操作的互動原型，模擬真實情境，為 Test 收集回饋。當你需要「製作可點擊的原型」、「展示互動流程」、「準備測試素材」時，就應該使用此技能進行原型製作與互動設定。

何時使用

  • Ideate 已收斂解法，需要可操作的體驗
  • 開發前需驗證關鍵互動或技術可行性
  • 需要對外展示概念並收集意見
  • 需要準備可用性測試的互動素材

必要輸入

  • 收斂後的線框/視覺稿
  • 目標流程與任務、成功指標
  • 互動/狀態規則（含 loading/empty/error）

預期輸出

  • 可分享的原型連結（桌機/行動裝置）
  • 互動與轉場設定（含鍵盤/焦點順序）
  • 使用限制與假設說明

可搭配技能

  • Ideate：取用線框與視覺方向
  • Test：以原型進行可用性/a11y 驗證

參考資料

references/prototyping/SKILL.md

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

精簡範例輸出

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

在 AI 工具中使用

/prototype

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

技能資訊

版本
1.0.0
作者
goodux
授權
MIT

觸發條件

主要動詞：製作原型、做原型、建立原型、設定互動、加入互動、展示、示範、demo、分享、發布（原型連結）

名詞：原型、互動原型、可點擊原型、高保真原型、互動稿、互動、轉場、動畫、流程、操作流程、Demo、展示版本、狀態（loading/error/empty）、分享連結、測試連結

情境描述：可以點擊的、可以操作的、準備測試用的、展示給客戶看的、模擬真實操作

需要已有線框圖或視覺稿（來自 Ideate）

若同時提到「只需要靜態畫面」→ 轉 Ideate

若同時提到「還沒設計畫面」→ 轉 Ideate

若同時提到「測試原型」、「驗證原型」→ 轉 Test

完成條件

  • 關鍵任務流程可被完整操作
  • 主要狀態（正常/錯誤/空/載入）皆可展示
  • 已標記限制與假設，方便測試說明

不適用情境

  • 尚未收斂解法或需求不明確（建議回到 Define 或 Ideate）
  • 僅需要靜態視覺展示（可留在 Ideate）

執行檢查

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