メニュー
建立低至中保真的介面線框圖,用於快速規劃版面、資訊層級與互動骨架。當任務涉及頁面草圖、版面配置、功能結構討論、設計初稿或高保真前的方案驗證時使用。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
收斂洞察、界定問題、優先順序與成功指標，並確認限制條件（含可及性/a11y）。
蒐集使用者洞察、執行訪談並萃取人物誌與需求背景，建立對目標族群的同理心。
發散解法、繪製線框並探索視覺方向；內含 20 種 UI 風格參考以快速收斂。
將優選解法轉成可操作原型，設定互動、轉場與狀態，為測試與示範做準備。
評估與改善介面、內容與互動的無障礙品質,使產品更符合 WCAG 與包容性設計原則。當任務涉及對比度、鍵盤操作、語意化、表單可用性、螢幕閱讀器支援或 a11y 檢查時使用。
建立與維護設計系統、Design Tokens、元件規範與文件結構,提升產品一致性與跨團隊協作效率。當任務涉及元件庫、樣式規範、token、文件化、系統治理或跨產品一致性時使用。
| name | wireframing |
| description | 建立低至中保真的介面線框圖,用於快速規劃版面、資訊層級與互動骨架。當任務涉及頁面草圖、版面配置、功能結構討論、設計初稿或高保真前的方案驗證時使用。 |
| license | MIT |
| metadata | {"author":"goodux","version":"1.0.0","category":"interface-design","language":"zh-TW"} |
用低至中保真畫面定義頁面骨架、資訊層級、主要任務與核心互動,讓團隊先討論結構而不是視覺細節。
information-architecture: 先整理內容層級與導航再畫線框圖prototyping: 將線框圖延伸為可測試的互動流程usability-testing: 用線框圖或原型驗證操作是否清楚design-system: 讓線框圖更容易對應後續元件與版型規範# 線框圖摘要
- 頁面: 後台儀表板
- 主要任務: 快速查看 KPI 與待處理事項
區塊:
- 頂部 KPI
- 待辦清單
- 異常警示
- 詳細分析入口
標註:
- KPI 卡片可點擊進詳細頁
- 異常警示需有高優先視覺層級
本技能提供完整的線框圖範例庫，請參考 examples.yaml：
使用方式：選擇適合的版面模式和元件，快速組建線框圖結構。
TEMPLATE.md，確認欄位結構、最小必要欄位、品質標準與驗證方式。examples.yaml，從既有版面模式、元件分類、標註方式與頁面範例中選取最適合的內容。TEMPLATE.md 的格式與命名規則，避免建立重複或過度碎片化的模式。TEMPLATE.md 的格式要求，其次再引用 examples.yaml 的內容細節。