我用 AI 做了 14 頁產品網站：分階段上線法
文 / Coolkid發布：2026-05-10 · 最後更新：2026-08-07閱讀約 14 分鐘
短答給趕時間的人：14 頁的產品網站做得出來，關鍵在順序，不在技術。先讓 AI 把 14 頁一次生出假版：內容全是佔位文字，圖用灰色方塊，會員登入先在瀏覽器本機演一次。結構先對。再一頁一頁換成真的。給 AI 的要是一句話的視覺世界觀，再加一份寫下配色、字體、留白的設計說明，風格就不用每頁重想。上線分 3 階段：只做畫面、真會員加後台、接金流串自動化，每個階段做完都能跑。每天 2 到 3 小時，2 到 3 週跑完能收錢的第一版。真內容不算在裡面，我自己填了 2 個月。手上還沒有一個自己每天在用的小工具，就先做那個再回來。
前面做的工具都是「給自己用」的，像是交易日誌、自動發文機器人、簡單的個人網站。還沒有做過第一個網站的人，先從非工程師用 AI 上線網站的 5 階段開始，這篇直接進多頁產品站。
但「給自己用」跟「給別人用」，是兩個完全不同的層級。中間隔的東西比想像中多。
當我想做一個有付費方案、有會員區、還有研究文章的真正產品，複雜度一下子就跳好幾級，整個做法都不一樣了。
14 頁要設計，認證系統要做，還要長得像一個真正的專業品牌，不能一看就知道是自己隨手做出來的東西。
後來我用 Claude Code 做了一個 14 頁的產品網站，分 3 階段 2-3 週做到能收錢，真內容不算在裡面，後面另外花時間慢慢補齊。
裡面有 4 個付費方案、會員儀表板、文章系統，還有一套完整的視覺風格。
真正的重點其實是「分階段方法論」，不是技術。產品是慢慢長出來的，很少有一次就做完的。
這篇是一步一步的教學，讀完你手上會多出三樣東西，而且每一樣都能直接拿去用。
一份 14 頁以上的網站全貌假版，一套「世界觀導向」的設計系統，還有一份 3 階段分批上線的計畫，每個階段做完都能跑。
範例是教育平台，但 SaaS、課程平台、媒體網站、作品集都套得上。
能收錢的第一版 2-3 週可以跑完，真內容是另一段路。
「給自己用」跟「給別人用」到底差在哪？
給自己用的工具只要「我會用」就好，給別人用的產品卻要做到讓一個陌生人從完全不認識你，一路走到願意掏錢付費。
中間這條路長很多，而且每一頁都有自己要負責的事，少了一頁整條路就斷掉。
下面是這 14 頁的角色分工。
- 說服層（3 頁）：首頁、產品介紹、方案比較。負責讓陌生人從想了解，變成想付費。
- 信任層（3 頁）：關於、客戶見證、研究文章。負責建立可信度。
- 轉換層（2 頁）：申請入會、結帳。負責把「想付費」變成「付了費」。
- 服務層（4 頁）：會員儀表板、課程、直播、作業。負責付費之後的體驗。
- 支援層（2 頁）：商品、消費紀錄、個人設定。負責長期黏著。
每一層的功能完全不同，設計要達成的目標也不一樣，不能用同一套標準做完。
新手最容易犯的錯，是把 14 頁全部當成「同等重要」來做，結果每一頁都做不深。
那要怎麼快速生出全貌，再分階段把每一頁做深？下一節就講這個。
為什麼要先做出全貌假版，再回頭填內容？
本能是「一頁一頁做到完美」，但 14 頁的產品為什麼這樣做一定會卡住？
首頁要連到課程頁，但課程頁還沒做。方案頁要寫「會員可以看的研究」，但研究頁也還沒做。
會員儀表板要顯示「你正在上的課程」，但整套課程資料都還沒接起來。
每一頁都依賴別的頁，等於沒有一頁是真的跑得起來的，你只能一直在原地打轉。
該做的是先把 14 頁全部用假版生出來，再回頭一頁一頁換成真的。
所有頁面都在，內容是佔位文字，圖是預設的灰色方塊，會員系統先用最簡單的本地端模擬撐著，登入登出都是演的。
這樣你可以看到整個網站的全貌，導覽連得起來，頁面切換很順，每一頁都「在那邊」。
內容是假的，結構是真的。
假版階段的指令範本：「請用 Claude Code 建一個 14 頁的網站架構，所有頁面都用佔位內容（範例文字 或範例文字），所有圖用灰色方塊代替，會員系統用 LocalStorage 模擬。重點是頁面切換要順，導覽要對，結構要完整。不要花時間在內容跟設計細節，先讓全部會動。」
假版做完之後，你到底拿到什麼好處？
第一，突然看到全貌，你會發現有幾頁其實沒那麼重要，可以先放著。
第二，合夥人、客戶、老婆可以實際點點看給回饋，不用只聽你口頭描述。
第三，後面填內容的時候有目標，不會做到一半就迷路，也不用整段重寫。
怎麼給 AI 一個「世界觀」，讓設計自動對齊？
設計真正在做的事，是「定一個明確的世界觀，然後讓所有東西都長成同一個樣子」。
不是把單一頁面做漂亮而已。
AI 在這件事上比想像中強，但你真正該餵進去的是世界觀，還是需求？
定世界觀分成下面 4 個步驟。
- 步驟 1，用一句話定義產品的「視覺隱喻」。例如「建築師工作室的藍圖」「日本傳統茶室」「Y2K 賽博龐克」「Apple Newton 復古科技」。越具體越好，越抽象 AI 越亂猜。
- 步驟 2，翻譯成 5 個視覺要素。把隱喻翻成可以執行的設定：配色（3-4 色）、字體（中文跟英文各 1 套）、形狀語言（圓角、直角、手繪）、留白密度（緊密、寬鬆）、特殊紋理（網格、噪點、漸層）。寫成一份 design_system.md。
- 步驟 3，跟 AI 講世界觀，不要講需求。指令範本：「這個專案的世界觀是 [一句話隱喻]，視覺要素看 design_system.md。請用這個世界觀重做 [頁面名]，所有元件要符合世界觀。」AI 會自動把線條粗細、留白比例、字級對比、配色節奏對齊。
- 步驟 4，第一頁做完之後就鎖住，後面所有頁都拿這一頁當「視覺基準」。指令範本：「請參考 [基準頁].html 的視覺風格做下一頁，所有元件用同一套設計系統。」
我自己的「方舟藍圖」用的是「建築師工作室藍圖」這個世界觀。
整套配色是深宇宙紫加米色紙張，再用螢光青點綴，字體選工程感的粗體英文，底紋再鋪上一層淡淡的工程藍圖網格。
14 頁的設計風格高度一致，新加任何元件都不用再想風格，速度快上幾倍。
怎麼把 14 頁產品分成 3 階段上線？
全貌假版做完之後，接下來就是「分階段把假的換成真的」，一次換一塊。
我自己分成 3 個階段，每個階段做完都能上線、都能跑，只是功能逐步打開。跑完這 3 個階段就是 MVP，真的能註冊、能付費。
- 階段 0（第 1 週），純前端加上 LocalStorage 假會員系統。14 頁全部做成假版，設計風格鎖定。網站上線到 Vercel，會員系統是假的，但能登入登出。利害關係人可以點點看給意見。
- 階段 1（第 2 週），接上真的會員系統。把 LocalStorage 換成 Supabase Auth，可以真的註冊、登入、忘記密碼。會員資料存在雲端，後台管理介面也在這一階段建起來。階段 0 的假內容大部分還在，但已經有真的會員。
- 階段 2（第 3 週），把會員資料跟付費系統對接。用 Stripe 或 TapPay 接金流，付完款之後會員等級自動升級，再串 n8n 自動偵測等級變化。會員儀表板顯示真的訂閱狀態。跑到這裡就能收錢了。
這 3 個階段跑完就能收錢，但網站上大部分還是假文字。真內容是另一段路：把假文字逐步換成真的研究文章、課程影片、教材，後台編輯系統也在這時候補完。這一段我自己花了 2 個月，而且是邊上線邊填，不是等填完才上線。
分階段到底好在哪裡？
第一，你隨時看得到產品目前的樣子，不會做到一半看不到希望。
第二，每個階段都有里程碑，士氣維持得住，不會做到懷疑人生。
第三，就算中途決定砍掉某個功能，前面做的也不會白費，因為那些頁面在假版階段就已經一次先做好放在那裡了。
新手最容易犯的錯，是想連真內容都填完才上線，中間完全不給別人看。
結果做了 2 個月還沒上線，士氣崩盤，最後半途而廢。
該做的是階段 0 第 1 週就上線。內容全是假的也沒關係。
別人看得到你還在做，你才不會自己先放棄。
14 頁產品網站怎麼從 0 做到 100？（5 步做完）
把上面的方法論濃縮成 5 個可以直接照著跑的步驟。
- 步驟 1，列出 14 頁清單跟角色分工。用第 1 節的 5 層分類法（說服、信任、轉換、服務、支援），把所有頁分類，確認哪些頁是核心，哪些是支援。
- 步驟 2，寫一份 design_system.md，做法看第 3 節那 4 步。一句話世界觀，加 5 個視覺要素，再加範例引用。這份文件之後每次叫 AI 寫頁面都會用到。
- 步驟 3，用 Claude Code 一次生出 14 頁假版。指令：「請建一個 14 頁的網站架構，頁面清單：[列出 14 頁]。所有頁用佔位內容，視覺風格參考 design_system.md。技術選 Next.js 加 Tailwind，或純 HTML 加 CSS 加 JS。會員系統用 LocalStorage 模擬。導覽連起來，可以點點看。不要規劃，直接建檔。」
- 步驟 4，推上 GitHub 再用 Vercel 部署。階段 0 上線，分享給合夥人、老婆、早期客戶點點看給回饋。這時候你會發現「啊原來這頁不需要」「啊那邊應該加個功能」。
- 步驟 5，按第 4 節的 3 階段時間表逐步上線。每個階段做完都推上去，順便通知利害關係人。2-3 週後就能註冊、能收費，真內容再邊上線邊填。
跑完這 5 步，你會有一個 14 頁、真的能收費的產品網站，不是只有一份作品集。
這 3 個階段 2-3 週可以跑完，每天大概花 2-3 小時。
順序是先讓自己看得到東西，再回頭把細節做深，網站能早點上線就早點上線，剩下的慢慢修到滿意為止。
不想自己從頭設定怎麼辦？
上面這套自己跑到能收錢大概要 2-3 週，每天 2-3 小時。如果你符合下面任何一條，可能就不適合自己跑。
- 想做的是真正的 SaaS，要接金流、會員跟後台，複雜度不只 14 頁
- 沒有設計背景，寫 design_system.md 不知道怎麼下手
- 想要全套品牌設計，logo、配色、視覺識別都要，不只是網站
如果不想自己從頭摸索，可以找「不想自己研究我教你」這個服務（規劃中）。
一對一帶你從產品線框稿開始，把設計系統定出來，14 頁假版一次生完，再照 3 階段跑到產品對外上線、能註冊能收費為止。
好處是有人幫你做設計選擇，卡關 5 分鐘解決，2-3 週把能收錢的第一版做到位。
代價很直接，就是要付費。
適合想做真正的產品但沒有設計背景、或是想加速上市的人。
用 AI 做多頁產品網站的完整做法：1) 先把 14 頁分成說服、信任、轉換、服務、支援這 5 層角色。2) 先做出全貌假版，再回頭填內容，先動起來再對細節。3) 給 AI 的是「世界觀」，不是「需求」，用一句話隱喻加 5 個視覺要素，寫進 design_system.md。4) 分 3 階段上線，從純前端到真會員加後台，再到接金流串自動化，每個階段都能跑。5) 五個步驟一步一步做完，列頁面、寫設計系統、生 14 頁假版、部署、分階段上線。能收錢的第一版 2-3 週可以跑完，真內容我自己再填了 2 個月。範例是教育平台，SaaS、課程平台、媒體網站、作品集都套得上。沒有設計背景的話，看上面那段「不想自己研究我教你」。
名詞解釋
- Claude Code
- Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- Supabase
- 免費起步的雲端資料庫服務，提供資料庫＋登入驗證＋API，個人專案很夠用。
- SaaS（軟體即服務）
- 訂閱制的雲端軟體服務。新手第一個專案不建議直接挑戰這個，範圍太大。
- 部署（deploy）
- 把做好的網站或程式「推上線」讓所有人用得到的動作。
- Vercel
- 把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- HTML
- 網頁的骨架語言，定義「這是標題、這是段落、這是圖片」。
- CSS
- 網頁的造型語言，管顏色、字體、排版跟動畫。
- 最小可行產品（MVP, Minimum Viable Product）
- 先做出「能用的最簡版本」給真實使用者驗證，再決定要不要繼續加功能，避免閉門造車。
- n8n
- 把不同服務串起來自動跑的工具：「有人付款」就自動「升級會員等級、寄信、更新表格」，不用自己寫程式接每一支 API。開源可以自己架，也有雲端版。
- LocalStorage（瀏覽器本機儲存）
- 資料只存在你自己這台電腦的瀏覽器裡，換一台裝置或清掉瀏覽器資料就沒了。適合做「先演一次」的假登入，不適合真的會員系統。
- Stripe
- 國際的線上收款服務，讓網站能收信用卡、處理訂閱自動扣款，不用自己去接每一家銀行。
- TapPay
- 台灣本地的線上收款服務，做的事情跟 Stripe 同一類：讓網站能收信用卡、處理金流。
- JavaScript
- 網頁的程式語言：瀏覽器裡會動的東西（按鈕、動畫、互動）幾乎都是它做的。Node.js 讓它也能在電腦本機執行。
- Next.js
- 蓋網站用的框架，把換頁、抓資料這些每個網站都要做的雜事先搭好架子，不用每一頁從零寫起。
- Tailwind
- 寫網頁外觀的捷徑：不另外開一個樣式檔，直接在標籤上寫顏色、間距這些關鍵字就能改長相。
如果內容對你有用就太好了
隨喜斗內
相關文章
▸ 常見問題
用 AI 做多頁產品網站要從哪裡開始？
從「列 14 頁清單跟角色分工」開始，不要從「做第一頁」開始。用 5 層分類法把頁面分好：說服層（首頁、產品介紹、方案），信任層（關於、見證、研究），轉換層（申請、結帳），服務層（會員、課程、直播、作業），支援層（商品、紀錄、設定）。先看清楚 14 頁各自的角色再做假版，才不會做到一半發現結構錯了。詳細看本文第 1 節。
怎麼讓 AI 設計出來的網站不像 template？
給 AI 的要是「世界觀」，不是「需求」。具體做法有四步：1) 用一句話定義視覺隱喻，例如「建築師藍圖」「Y2K 賽博龐克」，越具體越好。2) 翻譯成 5 個視覺要素寫進 design_system.md，包含配色、字體、形狀、留白、紋理。3) 跟 AI 講世界觀，不要講需求。4) 第一頁做完就鎖住當基準，後面所有頁都參考那一頁。詳細看本文第 3 節。
14 頁產品網站要做多久？
分兩段看。用「先做全貌假版，再分 3 階段上線」這套方法，做到能收錢是 2-3 週，每天大概 2-3 小時。階段拆解是這樣：第 1 週純前端加假會員，14 頁假版全部上線。第 2 週接 Supabase Auth，後台一起建。第 3 週接 Stripe 金流，再串 n8n 自動偵測會員等級。真內容是另一段路，我自己花了 2 個月才填完，這 2 個月網站早就上線在收錢，是邊做邊補的。新手最容易犯的錯剛好相反，是堅持真內容填完才肯上線，結果卡了 2 個月還沒上線，最後放棄。該做的是第 1 週就上線，哪怕內容全是佔位文字。詳細看本文第 4 節。
為什麼一頁一頁做產品會卡住？
因為 14 頁互相依賴。首頁要連課程頁，但課程頁還沒做。方案頁要寫「會員可以看的研究」，但研究頁還沒做。會員儀表板要顯示「你正在上的課程」，但什麼都還沒接起來。每一頁都依賴別的頁，沒有一頁是真的跑得起來的。該做的是先把全部做成假版，讓結構先對，再回頭填內容。詳細看本文第 2 節。
Mock 階段該用什麼技術？
新手建議用純 HTML 加 CSS 加 JS 加 Tailwind，或是 Next.js 加 Tailwind。會員系統先用 LocalStorage 模擬就好，後面階段 1 才換成 Supabase Auth。圖片用灰色方塊，或用 placeholder.com 這類服務生成佔位圖。文字直接放範例文字。重點是「結構真，內容假」。技術不要選太複雜的，免得假版階段就卡在學框架上。
分階段上線跟一次做完有什麼差別？
差很多。分階段的好處：1) 隨時看得到產品目前的樣子，不會做到一半看不到希望。2) 每個階段都有里程碑，士氣維持得住。3) 利害關係人早期就能給回饋，不用等 2 個月。4) 中途砍功能，前面也不會白做。一次做完的問題：1) 做 2-3 個月看不到上線，士氣容易崩盤。2) 利害關係人只能聽你描述。3) 中途砍功能，前面的工夫全白費。新手多數都死在「想一次做完美」這個陷阱裡。詳細看本文第 4 節。
看完這篇之前先確認:
- 給自己用的工具不夠了 想做給別人用
- 14+ 頁網站想分階段做不會崩潰
- 願意花週數而非小時做完
- 還沒有第一個自己用的工具的人
- 想一個週末做完整套產品的人
- 不打算收費的純興趣專案
做到要給別人用的時候，註冊、登入、資料庫這些會一次冒出來。想有人陪你把這段做到能上線，可以看產品上線陪跑（試營運價 NT$ 16,800）。