Photo by Bernd 📷 Dittrich on Unsplash
你有沒有遇過這種情況：後端 API 還沒好，但你需要先做出前端頁面展示給老闆看？或者你想快速驗證一個 UI 想法，但不想等工程師排期？
這時候，用假資料（Mock Data）做靜態頁面就是最實用的技巧。而現在有了 AI，這件事變得更簡單——你只需要用自然語言描述需求，AI 就能幫你產出完整的 HTML、CSS、JavaScript，包含假資料。
這篇文章會以 Clawdbot 為例，教你如何跟 AI 溝通，快速產出可展示的前端頁面。
為什麼要用假資料？
在開發流程中，前後端通常是平行進行的。如果前端必須等 API 完成才能開工，專案時程就會被拉長。使用假資料的好處：
- 解耦開發：前端不用等後端，可以先用假資料開發 UI
- 快速驗證：用假資料呈現真實的畫面效果，早期發現設計問題
- 展示用途：Demo 給客戶或老闆看，不需要真的串接系統
- 測試邊界：可以故意塞極端資料（很長的名字、空值）測試 UI 是否正常
與 AI 溝通的核心原則
在開始實戰之前，先掌握幾個讓 AI 產出更精準的溝通原則：
原則一：描述「結構」而非「感覺」
❌ 不好的 Prompt：「做一個好看的商品列表」
✅ 好的 Prompt：「做一個商品列表，每個商品卡片包含：圖片（16:9）、商品名稱、價格、加入購物車按鈕，用網格排列，一排 3 個」
原則二：明確指定假資料的數量和內容
❌ 不好的 Prompt：「放一些假資料」
✅ 好的 Prompt：「產生 6 筆假商品資料，包含 id、name、price（500-2000 之間）、imageUrl（用 picsum.photos）」
原則三：指定技術棧和風格
❌ 不好的 Prompt：「做一個登入頁面」
✅ 好的 Prompt：「用純 HTML + Tailwind CSS 做一個登入頁面，風格簡潔現代，主色用藍色」
原則四：分步驟請求，而非一次全部
複雜的頁面不要一次講完，先做基本結構，再逐步加功能：
- 「先做一個基本的表格結構，顯示使用者列表」
- 「加上排序功能，點標題可以切換升降冪」
- 「加上搜尋框，可以即時篩選」
實戰案例一：商品列表頁面
讓我們從一個常見的案例開始：電商的商品列表頁面。
Step 1：描述基本結構
用 HTML + Tailwind CSS 做一個商品列表頁面：
- 頂部有一個搜尋框
- 下方是商品網格，一排顯示 3 個商品卡片
- 每個卡片包含：商品圖片、名稱、價格、「加入購物車」按鈕
- 產生 6 筆假商品資料，價格在 $299 - $1999 之間
- 圖片用 picsum.photos 隨機圖
Step 2：加上互動功能
加上以下功能：
- 搜尋框可以即時篩選商品（根據名稱）
- 點擊「加入購物車」按鈕後，按鈕變成「已加入」並禁用
- 右上角顯示購物車數量 badge
Step 3：處理邊界狀態
加上空狀態處理：
- 當搜尋結果為空時，顯示「找不到符合的商品」提示
- 加一個「清除搜尋」按鈕可以重置
透過這三步，你就能得到一個功能完整、有假資料、可互動的商品列表頁面，而且整個過程不需要寫任何程式碼。
實戰案例二：後台數據儀表板
假設你要做一個管理後台的 Dashboard，展示各種數據指標。
Prompt 範例
用 HTML + Tailwind CSS + Chart.js 做一個後台儀表板：
頂部統計卡片（一排 4 個）：
- 總用戶數：12,345
- 今日訂單：89
- 營收：$45,678
- 轉換率：3.2%
下方圖表區域：
- 左邊：折線圖顯示近 7 天的訂單數量（用假資料）
- 右邊：圓餅圖顯示訂單來源分布（直接訪問 40%、搜尋引擎 35%、社群媒體 25%）
底部：
- 最近訂單列表，顯示 5 筆，包含訂單編號、客戶名稱、金額、狀態（badge 顯示）
進階調整
把統計卡片加上跟昨天的比較：
- 用綠色箭頭 ↑ 表示上升，紅色箭頭 ↓ 表示下降
- 顯示百分比變化，例如「+12.5%」
實戰案例三：表單頁面
表單是最常見的 UI 元件，也是最容易出錯的地方。用假資料測試表單特別重要。
Prompt 範例
做一個會員註冊表單，包含以下欄位：
- 姓名（必填）
- Email（必填，要驗證格式）
- 密碼（必填，至少 8 字元，要顯示強度指示器）
- 確認密碼（必填，要與密碼一致）
- 手機號碼（選填，格式 09xx-xxx-xxx）
- 同意條款 checkbox（必須勾選才能送出）
驗證規則：
- 即時驗證，錯誤時欄位顯示紅框 + 錯誤訊息
- 送出時如果有錯誤，滾動到第一個錯誤欄位
送出後：
- 按鈕顯示 loading 狀態
- 2 秒後顯示成功訊息
假資料的最佳實踐
產生假資料時，注意以下幾點可以讓 Mock 更接近真實情況：
1. 使用真實感的假資料
不要用 test1、test2 這種資料，用看起來真實的名字和內容：
「用戶名稱用常見的中文名字，像是王小明、陳美華、林志偉」
2. 包含邊界情況
「其中一筆資料的名字要很長（超過 20 個字），測試文字截斷」
「有一筆資料的圖片是空的，測試 fallback 顯示」
3. 使用假圖片服務
常用的假圖片服務：
- picsum.photos：隨機照片，
https://picsum.photos/300/200 - placeholder.com：純色佔位圖，
https://via.placeholder.com/300x200 - ui-avatars.com：根據名字產生頭像，
https://ui-avatars.com/api/?name=John+Doe
4. 資料結構與真實 API 對齊
如果已經知道後端 API 的資料格式，假資料要用相同的欄位名稱：
「假資料的欄位用這個格式：{ id, userName, email, createdAt, status }」
常用 Prompt 模板
以下是幾個可以直接複製使用的 Prompt 模板：
列表頁面模板
用 HTML + Tailwind CSS 做一個 [項目類型] 列表頁面：
- 頂部有搜尋框和篩選下拉選單
- 用 [卡片/表格] 形式顯示資料
- 每個項目包含：[欄位1]、[欄位2]、[欄位3]
- 產生 [N] 筆假資料
- 支援分頁，每頁 [M] 筆
表單模板
做一個 [用途] 表單，欄位包含：
- [欄位1]（[必填/選填]，[驗證規則]）
- [欄位2]（[必填/選填]，[驗證規則]）
即時驗證，錯誤顯示紅框和訊息
送出後顯示 loading，然後顯示成功訊息
儀表板模板
做一個 [主題] 儀表板：
- 頂部統計卡片：[指標1]、[指標2]、[指標3]、[指標4]
- 圖表區：[圖表類型] 顯示 [數據說明]
- 列表區：最近的 [項目類型]，顯示 [N] 筆
用假資料填充所有數據
從 Mock 到正式開發的銜接
用 AI 產出的 Mock 頁面，如何交接給工程師？
1. 標註假資料的位置
請 AI 把假資料集中放在檔案最上方，並加上註解：
「把所有假資料放在 JS 檔案最上方，用 const MOCK_DATA 包起來，加上註解說明之後要換成 API」
2. 預留 API 串接點
「資料載入的部分寫成一個 async function fetchData()，裡面先 return 假資料，之後方便換成 fetch API」
3. 匯出程式碼
請 AI 把 HTML、CSS、JS 分開，或打包成一個可以直接運行的檔案：
「把程式碼整理成單一 HTML 檔案，CSS 用 style 標籤，JS 用 script 標籤，可以直接在瀏覽器開啟」
結語
用 AI 產生帶假資料的靜態頁面，是現代開發流程中非常實用的技能。它讓你可以：
- 快速驗證想法，不用等工程資源
- 提早發現問題，在開發前就確認 UI 邏輯
- 更有效溝通，用可互動的頁面取代文字描述
關鍵在於如何跟 AI 溝通。掌握本文介紹的原則和模板，你也可以在幾分鐘內產出專業級的前端頁面。
下次有 UI 需求時，不要再打開 Figma 畫半天，也不要等工程師排期。打開 Clawdbot，用自然語言描述你要什麼，讓 AI 幫你做出來。
會跟 AI 溝通，就是新時代的生產力。