Menú
建立可互動的產品原型與互動流程說明,用於驗證概念、展示設計、測試流程與收集回饋。當任務涉及高保真原型、畫面 flow、互動設計、轉場、狀態設計或原型測試時使用。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
收斂洞察、界定問題、優先順序與成功指標，並確認限制條件（含可及性/a11y）。
蒐集使用者洞察、執行訪談並萃取人物誌與需求背景，建立對目標族群的同理心。
發散解法、繪製線框並探索視覺方向；內含 20 種 UI 風格參考以快速收斂。
將優選解法轉成可操作原型，設定互動、轉場與狀態，為測試與示範做準備。
評估與改善介面、內容與互動的無障礙品質,使產品更符合 WCAG 與包容性設計原則。當任務涉及對比度、鍵盤操作、語意化、表單可用性、螢幕閱讀器支援或 a11y 檢查時使用。
建立與維護設計系統、Design Tokens、元件規範與文件結構,提升產品一致性與跨團隊協作效率。當任務涉及元件庫、樣式規範、token、文件化、系統治理或跨產品一致性時使用。
| name | prototyping |
| description | 建立可互動的產品原型與互動流程說明,用於驗證概念、展示設計、測試流程與收集回饋。當任務涉及高保真原型、畫面 flow、互動設計、轉場、狀態設計或原型測試時使用。 |
| license | MIT |
| metadata | {"author":"goodux","version":"1.0.0","category":"prototyping","language":"zh-TW"} |
建立可展示、可測試、可對齊的互動畫面與流程,模擬關鍵狀態、分支與回饋,用來驗證決策。
wireframing: 先定義頁面骨架與資訊優先順序usability-testing: 用原型驗證複雜流程是否可理解design-system: 提升原型一致性並對應後續實作元件information-architecture: 若流程涉及多模組與深層導航,先整理結構# 結帳流程原型規格
- 目的: 驗證結帳流程是否可理解
- 保真度: 中保真
- 工具: Figma
關鍵畫面:
- 購物車
- 配送資訊
- 付款方式
- 訂單確認
- 完成頁
必要狀態:
- 空狀態
- 載入中
- 驗證錯誤
- 付款成功 / 付款失敗
待驗證問題:
- 使用者是否知道下一步
- 表單是否過長
- 付款切換是否清楚
本技能提供完整的原型製作範例庫，請參考 examples.yaml：
使用方式：根據測試目標選擇保真度層級，參考互動模式和流程範例快速建立原型。
TEMPLATE.md，確認欄位結構、最小必要欄位、品質標準與驗證方式。examples.yaml，從既有保真度層級、互動模式、流程範例、動畫規則與工具比較中選取最適合的內容。TEMPLATE.md 的格式與命名規則，避免建立重複流程或互動定義不一致的項目。TEMPLATE.md 的格式要求，其次再引用 examples.yaml 的內容細節。