Open Design Wireframe Sketch 技能指南

技能概述

Wireframe Sketch 技能生成一份手繪風格嘅線框圖頁面，營造 "呢個係草圖" 嘅感覺。包含：圖紙背景（方格紙）、marker/pencil 色調、3-4 個 tab 標籤（變體切換）、sketch canvas（方格背景 + sharpie 風格邊框）、browser chrome 行、sidebar nav（sketched checkbox）、KPI tiles（手寫風格數字）、圖表占位符（wobbly polyline + dot markers）、柱狀圖占位符（hatched-fill rectangles）、sticky notes（黃色/粉色便利貼）。

觸發關鍵字

• wireframe、sketch wireframe、lo-fi mockup、hand drawn、whiteboard sketch、low fidelity、手繪原型、草圖、线框图

什麼時候用

• 設計初期概念探索
• 低保真原型展示
• 多方案並排比較
• 設計師白板式討論
• 客戶快速 feedback 循環

使用方法

自然語言觸發

帮我画一个线框图
做一個 lo-fi mockup
整一個 hand-drawn wireframe

指定技能

用 wireframe-sketch 技能生成一個 dashboard 嘅線框圖

標準工作流程

1. 唔使睇 DESIGN.md（如果佢要求精緻 UI）— 呢個技能明確要求低保真風格。僅寬鬆遵循字型 token
2. 定 screen variants — 3-4 個 tab 標籤，如 "01 · A · ORGANIZED"、"02 · B · DASHBOARD" 等
3. 頁面結構：
   • Page header — 粗體 serif 標題 + "WIREFRAME v0.1" 標籤（dashed border + 微旋轉）+ 副標題 + date/device/fidelity dateline
   • Tab strip — 4-5 個標籤，marker check-square 字元。active tab 有 highlighter swipe（黃色/橙色 + 微斜）
   • Sketch canvas — 方格紙背景（linear-gradient 畫 24px×24px 網格）+ sharpie 風格粗邊框
   • Browser chrome — 3 個 sketched 圓圈 + 手寫風格 URL bar
   • Sidebar nav — sketched checkbox + label，一個 highlighter line（active）
   • KPI tiles — 3-4 個 box，marker 風格數字 + accent stamp + label
   • Chart placeholder — 手繪座標軸 + wobbly polyline + dot markers
   • Bar chart placeholder — hatched-fill rectangles
   • Sticky notes — 1-2 張黃色/粉色便利貼 + marker 文字 + 膠帶效果
4. 字型 — 用 Google Fonts（Caveat / Patrick Hand / Architects Daughter），fallback italic serif
5. 旋轉 — 到處微旋轉（rotate(-0.6deg)）打破網格感

輸出格式

單文件 HTML，inline CSS。每個關鍵區塊有 data-od-id。

自檢清單

• 頁面唔應該看起來 pixel-perfect（如果係就過度渲染）
• marker/pencil + graph paper + hatched fills + sticky notes 缺一不可
• Active tab 有 highlighter swipe，其他冇

實際例子

例子 1：Dashboard 線框圖

用戶：「幫我畫一個 portal 嘅 hand-drawn wireframe，4 個 tab 變體」

生成：

• Tab 01：Organized — sidebar nav + KPI tiles + chart
• Tab 02：Dashboard — top-level metrics
• Tab 03：Reports — table placeholder
• Tab 04：Settings — form sketch
• Sticky notes 標註 "next step"、"needs review"

例子 2：電商首頁草圖

用戶：「用 wireframe-sketch 做一個電商首頁嘅草圖」

生成：

• Hero banner 占位符（hatched fill）
• Product grid（sketched cards）
• Navigation（marker-style links）
• 2 張 sticky notes：「加 search bar」「mobile 點搞？」

相關技能

• Kanban Board
• Mobile Onboarding
• Docs Page