一句話總結：wireframe（線框圖）就是產品的「草圖藍圖」，先用最簡單的方框和線條，把每個畫面有什麼、按鈕在哪、點下去會怎樣講清楚，設計師和工程師才有依據可以往下做。這篇先講 wireframe 跟 mockup、prototype 到底差在哪，再講在 PRD 裡一份 wireframe 該定義哪些東西，最後實測 4 個能用 AI 幫你生成 wireframe 的工具。
你有沒有遇過這種會議？你講了半小時需求，工程師點頭說懂了，兩週後做出來的東西跟你腦袋裡的完全是兩回事。問題通常不在誰笨，是在你們兩個人腦袋裡的畫面從來沒有對過。wireframe 就是把那個畫面掏出來擺在桌上的工具，它不負責好看，只負責讓大家對到同一件事。
Wireframe、Mockup、Prototype 差在哪？
這三個字很多人混著用，然後在會議上各講各的。我用一個身體的比喻你就分得清楚了：wireframe 是骨架，mockup 是皮膚，prototype 是肌肉。
| 它在管什麼 | 主要用途 | 出現的階段 | |
|---|---|---|---|
| Wireframe 線框圖 | 骨架與邏輯 | 確立資訊層級、功能區塊位置、畫面之間的動線 | 需求收斂、專案初期溝通 |
| Mockup 視覺稿 | 皮膚與視覺 | 呈現最終長相，包含配色、字體、精細排版 | 進入 UI 設計階段 |
| Prototype 原型 | 肌肉與互動 | 模擬真實操作，點下去有反應、有轉場、有條件判斷 | 開發前做可用性測試，或跟老闆、客戶展示體驗 |
為什麼要先分清楚？因為階段搞錯，浪費的是整個團隊的時間。你在需求還沒收斂的時候就叫設計師出精美的 mockup，等於是逼他把還會被砍掉的東西畫到完美。反過來，你只給一張灰白線框圖就想拿去跟客戶談體驗，對方大概只會問你「這是還沒做好嗎」。
產品經理的主戰場是第一欄，骨架是你的責任，皮膚交給設計師，肌肉看專案需要再決定要不要做。
低保真還是高保真？看你現在要解決哪個問題
wireframe 本身還分兩種細緻度，選錯一樣會卡。
- 低保真（low-fidelity）：只用灰階色塊和簡單線條，文案就先放假字，圖片就一個打叉的方框。適合專案極早期，團隊要快速對焦功能架構、腦力激盪，或是你想一次攤出三種版面讓大家選。畫得醜是刻意的，因為醜才沒有人會去糾結圓角幾度，大家才會專心討論邏輯。
- 高保真（high-fidelity）：尺寸和比例要準，排版接近最終樣子，而且要填入「有代表性的真實文案與資料」。適合需求規格已經底定、準備交接給開發團隊，或是要拿去做實際操作測試的時候。
這裡有個我覺得最容易被忽略的細節：高保真的假資料，要放「最長的那一種」。你欄位裡填「王小明」，上線後遇到一個名字十二個字的客戶，版面就爆了。要測排版空間，就拿極端值去測，這是產品經理該有的職業病。
在 PRD 裡，一份 wireframe 該定義哪些東西？
線框圖不是把方塊排好就交差，它要能讓設計師知道長什麼樣、讓工程師知道怎麼接、讓測試知道怎麼驗。以下是我自己在寫 PRD 時會逐項檢查的清單：
頁面層級
先標清楚這個畫面在整個系統的哪一層。使用者是從哪裡進來的、上一頁是什麼、離開之後會去哪。少了這一層，工程師拿到的就是一堆孤島畫面，接不起來。
定義
清晰描述功能是什麼，例如搜尋按鈕的位置與行為。
資料來源
指出資訊從哪裡來，可能是用戶上傳或後台提供等。這一項是工程師最在意的，因為它直接決定他要不要開 API、要不要多建一張表。你沒寫，他就會來問你，問一次就是一個來回。
互動
涵蓋各種互動方式，如點擊、長按等（UI/UX 的範圍一定要和設計師討論）。除了操作方式，按鈕的各種狀態也要一起交代：預設、滑過（hover）、點擊中、還有「不能按」的禁用狀態。很多需求的漏洞就藏在「什麼情況下這顆按鈕不該讓人按」。
邊界
描述特殊情況下的表現，如無內容時的顯示方式（總之要想到各種 corner case，因為好的 QA 工程師一定會測到）。常見的幾種你先背下來：完全沒資料的空白狀態、載入中、載入失敗、權限不足、網路很慢的時候畫面要呈現什麼。
驗收標準
設定標準，因為好的 QA 工程師一定會「正面測一次、反面測一次」找出你的邏輯問題。所以你自己寫的時候就要正反各想一遍，不要等到被測出來才發現需求根本沒定義。
邏輯註解
最後在圖旁邊用文字或連線，把資料來源、點擊後的跳轉路徑、條件判斷規則講給工程師聽。線框圖畫得再漂亮，沒有這些註解，它就只是一張圖。
怎麼畫？五個步驟就好
- 釐清目標與需求：盤點這個畫面必須具備的資料欄位、功能按鈕和業務邏輯。這一步是在紙上做，不是在軟體裡做。
- 規劃使用者動線：確定使用者進到這個畫面的前一步是什麼、做完之後會去哪，把整條流程理順，想把流程和線框畫在同一張圖上，可以參考 Wireflow 的畫法。
- 紙筆速寫：先不要開軟體。用最快的方式在紙上畫幾個版面配置，挑出最好的那一個。開軟體最大的風險就是你會開始調對齊，然後忘記你本來在想邏輯。
- 軟體繪製數位版：把挑中的草圖數位化，用標準元件、注意比例，畫面保持乾淨。
- 標註邏輯與邊界情況：補上空白狀態、錯誤提示，以及工程師需要知道的所有條件判斷規則。
產品經理畫 wireframe 最常犯的四個錯
這四個我自己都犯過，也看團隊裡的人反覆犯，講出來給你避坑：
- 越線去管視覺：你應該專注在邏輯和資訊架構，結果忍不住幫按鈕上色，還用螢光黃、螢光綠去標重點。這不只干擾閱讀，也會影響設計師後面的視覺判斷，甚至讓他覺得你在畫他的圖。骨架就好好畫骨架。
- 只畫最美的那一版：資料剛好三筆、文字剛好一行、使用者剛好有權限。真實世界不是這樣。空狀態、錯誤、權限不足你沒處理，工程師開發到一半就會一直回頭找你確認，你的時間反而被切得更碎。
- 尺寸比例嚴重失真：隨手拉方塊，圖上看起來所有欄位都放得下，實際進開發才發現根本塞不進去，只能重新調架構。用工具的標準元件和真實的螢幕尺寸去畫，不要憑感覺。
- 邏輯斷層：頁面之間沒有動線連線，或是缺少條件觸發的說明文字。開發團隊看不出功能實際怎麼運作，最後只能照自己的理解做，做出來不對又是你的問題。
4 個用 AI 生成 wireframe 的工具，我實際測過
以下是我自己下指令測過的心得，不過要先說清楚一件事：這類工具幫你省的是「把草圖數位化」的時間，不是幫你想邏輯。你自己腦袋裡沒有動線，它生出來的也只是好看的空殼。
Banani
Banani 是一家利用 AI 技術幫助設計自動化的公司，讓 UI 設計變得更輕鬆。只要輸入一些文字描述，就能快速生成 wireframe 和介面，省下設計師和產品經理在初期設計時耗費的時間和精力。
這很適合那些需要快速原型設計的團隊或新創公司，即使你沒有專業的設計背景，只要有個大概的想法，Banani 就能幫你把它變成視覺化的成果。對於想要簡化流程、加速產品開發的人來說，這真的是個好幫手。
我當初實測時最大的抱怨是一次只能生成一頁，沒辦法一口氣把整個流程做出來。這點後來改掉了：它現在可以從文字描述、參考圖片甚至 PRD 直接生成多頁面、可互動的原型，也能匯出到 Figma 或 HTML 與 CSS。如果你當年跟我一樣因為這個限制放棄，可以回頭再試一次。
Banani｜AI Copilot for UI Design
Uizard
Uizard 也是一個基於 AI 的設計工具，能快速生成 UI 設計和 wireframe。這個工具也是讓用戶輸入文字描述，就能迅速轉化為 wireframe，真的節省了大量的時間和人力。
但是產出的 UI 和我輸入的文字描述差距很多，可能還需要花不少時間和 Uizard 好好「溝通」。
它的免費方案限制蠻緊的，每月只有 3 次 AI 生成、2 個專案，基本上只夠你試試水溫，付費方案從每月 12 美元起跳。如果你只是偶爾要出一張圖，這個額度會讓你很焦慮。
Visily
Visily 這個工具的特色是簡單易用，結合 AI 技術，讓用戶只需拖放元件、下些文字描述，就能迅速設計出 wireframe。Visily 支援團隊協作，讓多個成員能夠在同一專案中即時進行編輯和反饋，非常適合跨功能團隊使用。
目前看起來它蠻適合多人一起討論和協作的，文字描述下好之後產出的 wireframe 也不會離我想像中的差太多。
免費方案給到每月 300 次 AI 額度、2 個可編輯的版面，付費從每月 11 美元起，而且付費之後可以跟 Figma 雙向匯入匯出，甚至直接匯出程式碼。四個裡面我會說它的免費額度最實用。
Visily｜AI-powered UI design software
Relume
Relume 也是一家專注於設計和開發工具的公司，能提供更高效率的去建立網站或是 App，它們主要是透過 Webflow 的元件庫，讓使用者能快速拖拉設計元素，簡化整個網頁設計的流程。
目前的感受是，它的指令理解程度蠻好的，大家可以試試。
要注意它的定位跟前三個不太一樣：Relume 更偏「做網站」而不是「畫產品介面」，它能一路從網站地圖、線框圖生到設計稿，元件庫有上千個 Webflow 與 React 元件（免費方案限 30 個），付費從每月 14 美元起。你要做的是行銷網站或官網，它很順；你要做的是後台系統或 App，前面三個比較對。
Relume｜Websites designed and built faster with AI
所以該選哪一個？
| 你的情況 | 我建議 |
|---|---|
| 只是想快速把腦中的畫面變成圖，而且不想花錢 | Visily，免費額度最夠用 |
| 要一次生出整個流程的多頁面原型 | Banani |
| 團隊要一起在同一份稿上討論和留言 | Visily |
| 做的是官網或行銷網站，之後要接 Webflow | Relume |
| 需求很明確、只是要一張圖交差 | 其實紙筆加手機拍照就夠了，別被工具綁住 |
最後這一列不是在開玩笑，我見過太多人花一整個下午在比較工具，那個下午本來可以把三個畫面的邏輯都想完。
最後一句話
wireframe 畫得漂亮沒有加分，畫得清楚才有。工程師看完不用問你問題、設計師看完知道往哪走、測試看完知道怎麼刁你，這張圖就成功了。
AI 工具現在很會生介面，但它不會幫你想「沒資料的時候要顯示什麼」。那是你的工作，也是你這個職位真正的價值所在。
