메뉴
將優選解法轉成可操作原型，設定互動、轉場與狀態，為測試與示範做準備。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
收斂洞察、界定問題、優先順序與成功指標，並確認限制條件（含可及性/a11y）。
蒐集使用者洞察、執行訪談並萃取人物誌與需求背景，建立對目標族群的同理心。
發散解法、繪製線框並探索視覺方向；內含 20 種 UI 風格參考以快速收斂。
評估與改善介面、內容與互動的無障礙品質,使產品更符合 WCAG 與包容性設計原則。當任務涉及對比度、鍵盤操作、語意化、表單可用性、螢幕閱讀器支援或 a11y 檢查時使用。
建立與維護設計系統、Design Tokens、元件規範與文件結構,提升產品一致性與跨團隊協作效率。當任務涉及元件庫、樣式規範、token、文件化、系統治理或跨產品一致性時使用。
規劃資訊架構、內容層級與導航結構,讓使用者更容易理解與找到資訊。當任務涉及網站地圖、內容分類、導航重組、卡片分類、tree testing 或大型內容結構設計時使用。
| name | prototype |
| description | 將優選解法轉成可操作原型，設定互動、轉場與狀態，為測試與示範做準備。 |
| license | MIT |
| metadata | {"author":"goodux","version":"1.0.0","category":"design-thinking","language":"zh-TW"} |
把線框/視覺稿組裝成可操作的互動原型，模擬真實情境，為 Test 收集回饋。當你需要「製作可點擊的原型」、「展示互動流程」、「準備測試素材」時，就應該使用此技能進行原型製作與互動設定。
完整關鍵字庫請參考：KEYWORDS_LIBRARY.md > Prototype 章節
如果在 Ideate 選擇了「是，按照 spec.md 和設計稿進行開發」：
/test 進行測試如果在 Ideate 選擇了「否，繼續優化設計」：
/test選項 A：設計工具原型
選項 B：程式碼原型（React + Shadcn/UI）
完成原型後，詢問：
這個原型是否已接近 MVP 階段，可以進行測試了？
/test 進行可用性測試本技能整合以下詳細方法，當需要更深入的執行指引時請參考：
references/prototyping/SKILL.mdreferences/SKILL_USAGE_GUIDE.md - Skill 使用規則、專案檢測與開發選項# Prototype 摘要
- 覆蓋流程：登入→選品→結帳
- 互動：滑動切換方案、鍵盤 Tab 順序已設定
- 狀態：空購物車、付款失敗、載入中皆可演示
- 限制：僅桌機尺寸，資料為假資料，不含第三方驗證