Wireframe Sketch Template

手繪低保真線稿，刻意呈現草稿感，以邀請版面回饋、傳達「不可出貨」或在不投入視覺設計的情況下記錄 IA。

⚠️ 先選定骨架

此技能最大的失敗模式：模型繼承了筆觸（顫動、虛線、手寫字型），但寫出了錯誤的文件結構——例如在需要多畫面流程文件時，產出三個孤立的 App 畫面；或在需要站點地圖時塞入編輯型圖片。

在寫下任何一行之前，請在回覆中宣告你將使用哪個骨架及其原因。 將使用者的詞語對應到下列其中一項：

使用者提及	骨架	原因
報紙 / 雜誌 / 登陸頁 / 官方網站 / 手冊 / 單頁 / 一頁式 / 編輯型	A. 單頁編輯型	一個長頁面，各區塊堆疊，內容密集
app / 行動 / 手機 / 桌面應用程式 / SaaS 流程 / 使用者路徑 / 註冊流程 / 結帳流程 / 多畫面 / 多頁 / 登記 / 登入 / 入門 / 設定 / 索引標籤 / 表單流程	B. App 多畫面流程型	多個畫面，導覽，狀態，觸發點
資訊架構 / IA / 站點地圖 / 網站地圖 / 流程圖 / 關係圖 / 節點圖 / 資料流程 / 狀態機 / 權限矩陣	C. IA / 站點地圖圖表	節點 + 邊線，無實際畫面
不清楚 / 使用者未說明 / 兩者皆可	先詢問使用者，不要自行預設	—

如果使用者提供了主題但沒有骨架提示，請詢問應使用哪個骨架。選錯骨架等於做白工。

骨架 A — 單頁編輯型

foolscap-wireframe.html 是此骨架的參考。適用於單一可滾動頁面的成果物（報紙、雜誌跨頁、登陸頁線稿、手冊、單頁 PRD 插圖）。

所需區段（按順序，可省略 1-2 個，但須保持韻律）：

刊頭／橫幅 — 標題、期號/版本、日期
主打區塊 — 一個大型主導區塊，包含標題 + 導言 + 手繪插圖佔位符
3–5 個內容區段 — 各自有 h2，混合文字圖片與草圖插圖
側邊欄／簡報／列表區塊 — 短項目，密集排版，打斷韻律
CTA／註冊／頁尾

密度：目標參考 foolscap 的每平方英吋內容量——稀疏的單頁線稿更像是一個梗概，而非草稿。

骨架 B — App 多畫面流程型 ⛔ 硬性最低要求

foolscap-wireframe.html 不是此骨架的參考——只借用其 SVG 濾鏡、字型堆疊與虛線儲存格美學。文件結構必須根據下列清單自行組裝。

所需區段（必須全部存在——否則頁面不完整）

封面 — App 名稱 + 版本 + 角色/人物 + 一行範圍（「MVP / beta / v0.3 / 僅支出追蹤，無投資」）
站點地圖／導覽圖 — 顯示所有畫面及其關係的視覺樹或網格。不是列表——而是包含方框與線條的實際圖表。
6–8+ 個核心畫面 以 figure 區塊呈現。以支出追蹤 App 為例，至少需包含：啟動/歡迎 → 首頁（概覽） → 新增項目（金額 → 分類 → 備註 → 儲存） → 帳單明細 → 月統計 → 分類管理 → 預算設定 → 個人檔案/設定。3 個畫面不是線稿文件，只是草圖樣本。
至少 1 個流程箭頭圖 顯示使用者在畫面間的路徑（例如「首頁 → 點擊 '+' → 新增項目 → 儲存 → 提示訊息 → 回到首頁」）。不要只在畫面間放一個 ↓——請在箭頭上寫下觸發條件。
每個具狀態的畫面至少 1 個狀態變體：空白 / 載入中 / 錯誤 / 成功。選擇重要的畫面（列表頁 → 空白狀態；表單 → 錯誤狀態）。
結尾事項 — 待解決問題 / TBD 列表 / 版本紀錄 / 下一步待決策事項

每個畫面的要求

每個畫面區塊必須包含：

圖號 — Fig. 02（書寫中文時使用本地化形式），依序編號，供流程圖參照
一行責任說明 — 「新增項目 · 從首頁的 '+' 按鈕進入；儲存時顯示提示訊息並返回首頁」
觸發註解 — 哪些入口可進入此處，哪些出口可離開
邊註 — 每個非平凡的畫面至少 1 條手寫側記（限制、邊際案例、「TBD」、開放問題）

版面

垂直堆疊 畫面，並在之間使用明確的箭頭 + 觸發標籤（不是被動的 ↓）
或水平流程條，畫面從左到右排列——適合線性流程（如入門流程 / 結帳流程）
不要將畫面放入無流程指示的網格中——那只是畫面畫廊，不是流程文件

內容密度紅線

< 5 個畫面 → 自行拒絕，要求使用者提供更多流程或誠實縮小範圍
無站點地圖 → 自行拒絕，沒有站點地圖的文件無法閱讀
無狀態變體 → 至少標記空白/錯誤位置，即使你沒有畫出它們（「空白狀態：請見 Fig. 04a / TBD」）
完全沒有邊註 → 你只複製了筆觸但沒有複製語言；回去加上註解

骨架 C — IA / 站點地圖圖表

純結構文件——無實際畫面，僅有節點-邊線圖表，呈現資訊架構、導覽、資料流程或狀態機。

所需區段：

標題 + 圖例 — 方框的意義、線條類型的意義（實線 = 直接導覽，虛線 = 條件式，雙線 = 資料綁定）
主圖表 — 樹狀圖/圖表本身，置中，大尺寸
每個節點的簡要規格 — 對於不顯眼的節點，1–3 行描述其中內容
權限/角色矩陣（如適用）
底部開放問題

顫動 + 手寫字型仍然適用。方框與線條的版面，大量留白，單一強調色用於「當前路徑」/「預設」高亮。

邊註語言（骨架 B 與 C 必須使用；骨架 A 可選）

邊註是區分真正低保真線稿與「偽裝成低保真的高保真草稿」的關鍵。使用以下手法：

標記	時機	做法
側記	限制或理由	以手寫字型、強調色寫入 `<aside class="margin">`，拉到邊界
圓圈 + 箭頭	指出特定元素	使用帶有 `filter:url(#wobble)` 的 SVG `<circle>` + `<path>`，強調色筆觸
TBD / ?	未解決的決策	手寫「TBD」搭配強調色，有時在顫動圓圈內
刪除線	保留舊想法以供參考	`text-decoration:line-through` + 輕微旋轉 `transform:rotate(-1deg)`
底線 + !	重要/必須討論	在文字下方使用 SVG 波浪底線
編號標註	參照下方圖例表格	強調色的圈內數字，搭配區段結尾的 `<ol>` 圖例

邊註墨水顏色 = 一個強調色（模板使用亮藍色）。主體墨水保持單色。

手繪標記

低保真線稿大量依賴當場繪製的標記，而非真實圖示或照片。在檔案頂部建立一個小型圖庫：

X 掉方框 — 圖片佔位符：<rect> + 兩條交叉 <line>，全部加上 filter:url(#wobble)
波浪文字 — 文字佔位符：3–5 條水平波浪 <path>，寬度遞減
線條圖示 — 導覽圖示以 8–16 px SVG 路徑呈現（房子、加號、圖表、齒輪），1.4 px 筆觸 + 顫動
載入旋轉器 — 帶缺口的顫動圓圈，靜態文件無需動畫
頭像圓圈 — 圓圈 + 手寫字型縮寫
圖表骨架 — 顫動的長條/點/線，除圖號外無軸標籤

不要匯入圖示字型、Lucide、Heroicons 等。真實圖示會與顫動效果衝突，立即破壞低保真感。

必要閱讀

先從頭到尾讀完這份 SKILL.md。在選定骨架之前，不要開啟 foolscap-wireframe.html。

然後：

骨架 A → 完整閱讀 foolscap，既學習結構也學習筆觸詞彙
骨架 B → 僅為了複製以下內容才開啟 foolscap：<filter> SVG 湍流值、點狀背景圖案、虛線/波浪分隔線路徑、手寫字型堆疊。不要複製刊頭/主打區塊/長文結構——那是錯誤的骨架。
骨架 C → 與 B 相同，僅提取筆觸

切勿完整複製 foolscap 的編輯型佔位文字、圖片說明或類別名稱。

設計策略

在頂部鎖定保真度的範圍：

純結構（僅方框 + 標籤，除欄位名稱外無實際文字）→ 最大顫動，最少內容
結構 + 樣本內容（佔位標題、真實標籤、假數字如 ¥3,280）→ 中度顫動，更多密度
結構 + 註解（箭頭、邊註、「TBD」、觸發標籤）→ 顫動 + 邊註 + 強調色標註

選定一項並在整個文件中保持一致——混合保真度會顯得風格不一致。骨架 B 幾乎總是要求第三層。

版面偏好

偏好的設定：

純白色紙背景——不要黃色法律紙假裝
單色墨水（黑色 + 2–3 種灰色），最多一種強調色（亮藍色或紅色）用於邊註和「當前/預設」高亮
一種手寫中文字型（馬善政 / 龍藏體）+ 一種手寫拉丁字型（Caveat / Kalam）
等寬字型堆疊（大寫、緊密字距）用於「標籤」/「圖號」/「標註」
區段間使用虛線或波浪分隔線——絕不使用筆直的實線
一致的顫動強度——不要在不同元素間調高調低；一個全域濾波器 + 可能一個用於小型形狀的「更強」濾波器
為文件中其他位置參照的所有項目編號（「Fig. 01」；書寫中文時使用本地化形式）
寬廣的側邊距以容納邊註

避免：

真實的產品圖示或精美的 SVG 插圖（會與草稿框架衝突）
彩色照片（使用草圖佔位符——X 掉方框或波浪文字）
表情符號
在同一頁面混合線稿與高保真元件
對每個元素都強加顫動濾鏡，直到頁面變得雜亂——顫動是調味料，不是底漆
使用單一 ↓ 作為流程註解——請在箭頭上寫下觸發條件
在 App 場景中只產出 3 個孤立畫面——那是畫面樣本，不是線稿文件

反模式（交付前自我檢查）

平台 / 尺寸

輸出為網頁，通常截圖為長圖以供嵌入 PRD / Notion / Confluence / Lark 文件。非設計為執行階段互動——它是靜態的、看起來像手繪的交付物。

對於骨架 B，頁面寬度 720–960 px 效果最佳（符合文件工具中的閱讀寬度）。對於骨架 A，960–1100 px（編輯型格式）。對於骨架 C，通常更寬（1200+）以容納站點地圖。

wireframe-sketch