# Prototype

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

- Skill: `candy14432/prototype` (Agent Skill)
- Install (CLI): `npx skillmds@latest add candy14432/prototype`
- Raw SKILL.md: https://api.skillmd.com/api/skills/candy14432/prototype/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: candy14432 (https://skillmd.com/u/candy14432)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/candy14432/prototype

---


# 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. 分享與說明：建立測試連結，附上限制與假設。

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

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