新手教學 · 多頁產品網站 step-by-step · 最後更新：2026-05-15

我用 AI 做了一個有 14 頁的產品網站：分階段比一次做完更重要

前面做的工具都是「給自己用」的——交易日誌、自動發文 bot、簡單個人網站。「給自己用」跟「給別人用」是兩個完全不同的層級。當我想做一個會有付費方案、會員區、研究文章的真正產品時，14 頁要設計、認證系統要做、還要長得像專業品牌，複雜度跳好幾級。

後來用 Claude Code 做了一個 14 頁的產品網站，4 個付費方案、會員儀表板、文章系統、完整視覺風格，2-3 週分階段上線完。重點不是技術，是「分階段方法論」——產品不是一次做完的，是慢慢長出來的。

這篇是 step-by-step 教學，讀完你會做出：1) 一份 14+ 頁的網站全貌 mock；2) 一個「世界觀導向」的設計系統；3) 4 階段分批上線計畫，每階段都能跑。範例是教育平台，但 SaaS / 課程平台 / 媒體網站 / 投資組合都套得上。2-3 週可全跑完。

「給自己用」vs「給別人用」差在哪？（複雜度跳級的原因）

給自己用的工具只要「我會用」就好；給別人用的產品要「讓陌生人從不認識到願意付費」。中間這條路長很多，每一頁都有自己的責任。下面是 14 頁的角色分工：

1. 說服層（3 頁）：首頁 / 產品介紹 / 方案比較。負責讓陌生人想了解 → 想付費。
2. 信任層（3 頁）：關於 / 客戶見證 / 研究文章。負責建立 credibility。
3. 轉換層（2 頁）：申請入會 / 結帳。負責把「想付費」變成「付了費」。
4. 服務層（4 頁）：會員儀表板 / 課程 / 直播 / 作業。負責付費後的體驗。
5. 支援層（2 頁）：商品 / 消費紀錄 / 個人設定。負責長期黏著。

每層的功能完全不同，設計的目標也不同。新手最容易犯的錯：14 頁全部當「同等重要」來做，結果每頁都做不深。下一節教怎麼快速生出全貌再分階段做深。

為什麼要先做「mock 全貌」再回頭填內容？（先動再對）

本能是「一頁一頁做到完美」，但 14 頁產品這樣做會卡住。原因：首頁要連到課程頁但課程頁還沒做；方案頁要寫「會員可以看的研究」但研究頁還沒做；會員儀表板要顯示「你正在上的課程」但什麼都還沒接起來。每一頁都依賴別的頁，沒有一頁是真的能跑的。

正解：先把 14 頁全部用「mock 版」生出來——所有頁面都有但內容是 placeholder、圖也是預設、會員系統用最簡單的本地端模擬。這樣可以看到整個網站全貌、導覽連得起來、頁面切換很順、每一頁都「在那邊」。內容假但結構真。

mock 階段指令範本：「請用 Claude Code 建一個 14 頁的網站架構，所有頁面都用 placeholder 內容（範例文字 或範例文字），所有圖用灰色方塊代替，會員系統用 LocalStorage 模擬。重點是頁面切換要順、導覽要對、結構要完整。不要花時間在內容跟設計細節，先讓全部會動。」

mock 完成的好處：1) 突然看到全貌，會發現哪些頁其實不重要；2) 利害關係人（合夥人 / 客戶 / 老婆）可以實際點點看給回饋，而不是看你描述；3) 後面填內容的時候有目標，不會迷路。

怎麼給 AI「世界觀」讓設計自動對齊？（設計系統 step-by-step）

設計不是「做漂亮」，是「定一個明確的世界觀，然後讓所有東西都長成同一個樣子」。AI 在這件事上比想像中強，但你要給它「世界觀」不是「需求」。世界觀 4 步驟：

1. Step 1 — 用一句話定義產品的「視覺隱喻」。例如「建築師工作室的藍圖」「日本傳統茶室」「Y2K 賽博龐克」「Apple Newton 復古科技」。越具體越好，越抽象 AI 越亂猜。
2. Step 2 — 翻譯成 5 個視覺要素。把隱喻翻成可執行的設定:配色（3-4 色）、字體（中文 + 英文各 1 套）、形狀語言（圓角 / 直角 / 手繪）、留白密度（緊密 / 寬鬆）、特殊紋理（網格 / 噪點 / 漸層）。寫成一份 design_system.md。
3. Step 3 — 跟 AI 講世界觀不講需求。指令範本：「這個專案的世界觀是 [一句話隱喻]，視覺要素看 design_system.md。請用這個世界觀重做 [頁面名]，所有元件要符合世界觀。」AI 會自動把線條粗細、留白比例、字級對比、配色節奏對齊。
4. Step 4 — 第一頁做完之後 lock 住，後面所有頁都拿這頁當「視覺基準」。指令範本：「請參考 [基準頁].html 的視覺風格做下一頁，所有元件用同一套設計系統。」

我自己的「方舟藍圖」用「建築師工作室藍圖」當世界觀，深宇宙紫 + 米色紙張 + 螢光青點綴 + 工程粗體英文 + 藍圖網格紋理。14 頁設計風格高度一致，新加任何元件都不用再想風格，速度快 3 倍。

怎麼把 14 頁產品分 4 階段上線？（每階段都能跑）

mock 全貌完成之後是「分階段把假的換成真的」。我自己的拆法 4 階段，每階段做完都能上線都能跑，只是功能逐步打開：

1. 階段 0（第 1 週）— 純前端 + LocalStorage 假會員系統。14 頁全部 mock + 設計風格 lock。網站上線到 Vercel，會員系統假的但能登入登出。利害關係人可以點點看給意見。
2. 階段 1（第 2 週）— 接真的會員系統。把 LocalStorage 換成 Supabase Auth，可以真的註冊、登入、忘記密碼。會員資料存在雲端。階段 0 的 mock 內容大部分還在但已經有真會員。
3. 階段 2（第 3 週）— 把會員資料跟付費系統對接。Stripe / TapPay 接金流，付完款之後會員等級自動升級。會員儀表板顯示真的訂閱狀態。
4. 階段 3（第 4 週起）— 上真的內容。把 mock 文字逐步換成真的研究文章、課程影片、教材。後台編輯系統做完。網站正式對外開放。

分階段 3 個好處：1) 隨時能看到產品的當前樣子，不會做到一半看不到希望；2) 每階段都有里程碑，士氣維持得住；3) 中途決定砍某個功能，前面做的不會白費（mock 都先做了）。

新手最容易犯的錯：想一次做到階段 3 才上線。結果做 2 個月還沒上線、士氣崩盤、半途而廢。正解：階段 0 第 1 週就上線，哪怕內容全是假的。「能看到的東西」比「完美的計畫」重要 10 倍。

14 頁產品網站怎麼從 0 做到 100？（5 步 step-by-step）

把上面方法論濃縮成可執行的 5 步驟：

1. Step 1 — 列 14 頁清單 + 角色分工。用第 1 節 5 層分類法（說服 / 信任 / 轉換 / 服務 / 支援），把所有頁分類，確認哪些頁是核心哪些是支援。
2. Step 2 — 寫 design_system.md（用第 3 節 4 步驟）。一句話世界觀 + 5 個視覺要素 + 範例引用。這份文件之後每次叫 AI 寫頁面都會用到。
3. Step 3 — Claude Code 一次性 mock 14 頁。指令：「請建一個 14 頁的網站架構，頁面清單：[列出 14 頁]。所有頁用 placeholder 內容，視覺風格參考 design_system.md。技術選 Next.js + Tailwind 或純 HTML+CSS+JS。會員系統用 LocalStorage 模擬。導覽連起來、可以點點看。不要規劃，直接建檔。」
4. Step 4 — push 到 GitHub + Vercel 部署。階段 0 上線，分享給合夥人 / 老婆 / 早期客戶點點看給回饋。這時候你會發現「啊原來這頁不需要」「啊那邊應該加個 X 功能」。
5. Step 5 — 按第 4 節 4 階段時間表逐步上線。每階段做完都 push + 通知利害關係人。2-3 週後階段 3 完成，產品正式對外。

跑完 5 步你有一個 14 頁的真實產品網站。2-3 週可全跑完（每天 2-3 小時）。重點不是寫得多快，是節奏正確 — 先看到再做深、先全貌再細節、先上線再完美。

不想自己 setup 怎麼辦？

上面這套自己跑大概 2-3 週（每天 2-3 小時）。如果符合下面任一條，可能不適合自己跑：

• 想做的是真正的 SaaS（要接金流 + 會員 + 後台），複雜度不只 14 頁
• 沒有設計背景，寫 design_system.md 不知道怎麼下手
• 想要全套品牌設計（logo / 配色 / VI），不只是網站

可以找 不想自己研究我教你（規劃中）。1-on-1 帶你從產品 wireframe、design system、14 頁 mock、4 階段上線整套跑完。Pro：有人幫你做設計選擇、卡關 5 分鐘解決、2-3 週一次到位。Con：要付費。適合：想做真正產品但沒設計背景、想加速產品上市的人。

看完這篇之前先確認:

← 回新手教學