不會寫程式怎麼用 AI 做網站？5 階段上線法
文 / Coolkid發布：2026-06-01 · 最後更新：2026-08-04閱讀約 12 分鐘
短答給趕時間的人：完全不會寫程式，也可以用 AI 做網站。我是非工程師的全職交易者，3 個月用 Claude Code 做了這個 105 篇文章的網站、個人品牌入口，加上 10 個自動化 workflow，沒寫過半行程式碼。最快路徑是選 Claude Code(US$20/月)，認知層搞懂 30 分鐘，安裝 30 分鐘，第一個能上線的網站 30 到 60 分鐘，Vercel 部署 10 分鐘。總計第一站大約 2 到 3 小時上線。後續每週再花 5 到 10 小時慢慢改，網站會一直長。
「不會寫程式可以做網站嗎？」這個問題我自己問過。
2024 年之前的答案是「可以，但要靠 Wix 或 Squarespace，鎖在模板裡」。
2025 年之後答案變了。
因為 AI Agent 出現，像 Claude Code、Cursor 這類工具，只要「會講需求」就能做出網站。
這篇是整條路徑的主幹文，把「非工程師用 AI 做網站」一次講清楚。
分成 5 個階段：認知、工具選擇、30 到 60 分鐘上線、部署、個人品牌應用。
每個階段都連結到完整的實作文，可以照抄。
適合誰？完全不會寫程式，但想要一個「真的屬於自己、能自由改」的網站。
下面兩種人不太適合。
只想要 link-in-bio 一頁就好的，有專門那篇 1 天搞定。
想做高流量的 SaaS 或電商的，這篇只到個人品牌等級。
階段 1 認知層(5 分鐘讀)：不會寫程式真的能做網站嗎？
先給短答，答案是可以。
但要先換掉一個錯誤前提：「做網站等於寫 HTML、CSS、JavaScript」，這個前提在 2024 年之前對，2025 年之後 AI Agent 出現，就不成立了。
新的前提是這樣：做網站等於想清楚要什麼網站，跟 AI Agent 講需求，看結果不滿意就說哪裡要改。
寫程式碼那一段完全是 AI Agent 做的，你不用碰。
「會講需求」聽起來很模糊，具體是什麼意思？
是能講出「我要一個讓家人記行程的網站」、「我要一個能在手機上開的交易日誌」、「我要一個放我所有連結的個人入口頁」這種使用情境的描述。
不是「我要用 React 加 TypeScript 加 Tailwind 做網站」那種技術需求。
非工程師在這件事上反而有優勢。
我們不被既有的寫法綁住，可以直接用「我要什麼」描述需求，AI Agent 反而做得更好，而工程師很多時候會被「我習慣這樣寫」綁住，跟 AI Agent 溝通反而卡。
做網站的瓶頸從「會不會寫程式」改成「會不會講清楚要什麼」。後者是非工程師可以從第一天就開始練的。
階段 2 工具選擇(10 分鐘讀)：Claude Code、ChatGPT、Cursor、免寫程式的工具怎麼選？
現在(2026)可以選的「用 AI 做網站」工具，大致分成 4 類。
下面這張對照表，是基於我自己用過的視角整理的：
| 工具 | 技術門檻 | 彈性 | 費用 | 適合誰 |
|---|---|---|---|---|
| Claude Code | 中 (要裝命令列) | ★★★ 任意改 | US$20/月 | 想做自己網站、長期迭代 (我推這個) |
| Cursor | 中 (要會編輯器) | ★★★ 任意改 | US$20/月 | 已會寫程式想用 AI 加速 |
| ChatGPT | 低 (瀏覽器) | ★★ 要自己貼 code | 免費 / Plus US$20 | 做網頁原型、學概念 |
| Wix / Squarespace | 低 (拖拉) | ★ 鎖在模板 | US$10-30/月 | 只要一頁、不想動腦 |
我推非工程師選 Claude Code，理由有三個。
第一，不需要懂編輯器介面，直接對話描述需求就好。
第二，可以做任意網站，不會被模板綁住。
第三，學會了可以接著做機器人、自動化、其他工具，長期投資回報高。
那什麼時候不該選 Claude Code？
你只要一頁 link-in-bio，沒打算後續一直改，那就用 linktree 那種 1 天搞定的工具就好。
你完全不想碰任何命令列，Wix 適合你。
你要做高流量電商，找 Shopify 或者專業團隊。
選工具不是比誰最強，是看你的「用 1-3 年的長期意願」。長期就學 Claude Code，短期一頁就用免寫程式的工具。
階段 3：一步一步，30-60 分鐘上線第一個網站
假設你選了 Claude Code。
下面是「從零到網站上線」的完整步驟，預計 2 到 3 小時，含找問題的時間。
- 步驟 1：訂閱加安裝(30 分鐘)。去 claude.ai 訂閱 Pro(US$20/月) → 開 PowerShell 跑官方一行安裝指令 irm https://claude.ai/install.ps1 | iex(2026 年現在的推薦裝法，不用先裝 Node.js) → 重開終端機打 claude 進入對話介面。詳細步驟看 Claude Code Windows 安裝踩雷實錄。
- 步驟 2：想清楚要什麼網站(10 分鐘)。寫 3 句話描述：(a) 給誰用(我家人、我自己、陌生客戶) (b) 解什麼痛點(記行程、看交易日誌、接受詢問) (c) 必備功能 3 到 5 個。例如「我要做給家人填寫的童裝庫存管理頁，手機可開，可新增、刪除、看清單，不用登入」。
- 步驟 3：跟 Claude Code 描述(5 分鐘)。在 PowerShell 把步驟 2 的 3 句話貼給 Claude Code，加一句「請幫我做出來，用單一 HTML 檔，部署到 Vercel」。Claude Code 會問你細節，像是顏色、版面、資料存哪，你照感覺回答即可。
- 步驟 4：看結果再改(30-60 分鐘)。Claude Code 寫出第一版 HTML，你點兩下用瀏覽器開來看效果。哪裡不滿意就直說，像是「按鈕太大」「顏色換成藍色」「我要加一個搜尋框」，它會照著改。改個 5 到 10 輪，通常就到能用的程度。
- 步驟 5：部署到 Vercel(10 分鐘)。詳細看階段 4，簡述是去 vercel.com 註冊 → 連 GitHub(或者直接把整個資料夾拖進去) → 5 分鐘後給你一個 .vercel.app 網址，任何人都能開。
第一個網站建議選「給自己用」或「給家人用」的小工具，不要選「給市場用的產品」。
理由是什麼？給自己用的工具，改的動力最強，因為你每天打開都會看到痛點，而給市場用的要等別人回饋才知道哪裡要改，速度慢 10 倍。
我自己第一個網站，是給老婆做的童裝庫存管理頁。
從零到上線在 Vercel 花了一個下午，但部署那段卡了 3 小時，「我自己電腦看得到、網路上完全沒變化」這個玄學問題，新手 100% 會撞到。
詳細看 Vercel 部署不更新踩雷實錄。
階段 4 部署：Vercel、Netlify、GitHub Pages 怎麼選？
做完 HTML 在自己電腦看得到，要怎麼讓陌生人也能開？
這就是「部署」，下面三個免費選項：
| 平台 | 免費額度 | 難度 | 速度 | 適合誰 |
|---|---|---|---|---|
| Vercel | Hobby plan 永久免費 個人專案 | ★ 連 GitHub 自動部署 | 全球 CDN 快 | 個人專案 / 大部分人選這個 |
| Netlify | Starter 永久免費 | ★ 連 GitHub 自動部署 | 全球 CDN 快 | 想用 Netlify Forms / Identity |
| GitHub Pages | 完全免費 | ★★ 要手動設定 | GitHub CDN 中等 | 純靜態站 / 想用 GitHub 工作流 |
我推 Vercel，理由有四個。
第一，設定最簡單，連上 GitHub repo 就自動跑。
第二，免費額度大方，Hobby 方案對個人專案沒有流量上限。
第三，自動 HTTPS 加上 CDN，速度很快。
第四，自動預覽部署，你推一個分支上去，就自動給你一個預覽網址可以測。
我自己這個 Lab、link-in-bio 個人入口、10 個 workflow，全部部署在 Vercel，完全免費。
月流量幾千訪客，遠低於 Hobby 方案的上限。
部署最常踩的雷是「本地看得到、Vercel 看不到」。
99% 是三個原因。第一是檔名大小寫不一致，Vercel 跑的是 Linux、嚴格區分大小寫，Windows 卻不分，所以本地開得起來。
第二是路徑用了 Windows 的反斜線，沒改成正斜線。
第三是 git push 根本沒成功。
詳細解法看 Vercel 部署排錯。
階段 5 個人品牌應用：從 link-in-bio 到完整網站
做出第一個工具或網站之後，個人品牌應用有 3 種常見模式，按複雜度排序：
- 等級 1：Link-in-Bio 個人入口(1 天上線)：一頁放你所有社群連結加簡介。適合 IG、Threads 的「網站」連結。我做的 link.coolkidlab.com 就是這個。詳細看 link-in-bio 個人入口 6 踩坑與 1 天上線方法論。
- 等級 2：個人品牌入口站(1-2 週)：About 頁加作品集加聯絡。比 link-in-bio 多了敘事跟 SEO 入口。適合自由工作者、創作者。
- 等級 3：內容加服務型網站(1-3 個月)：像這個 Coolkid AI Lab，多篇文章、自動化 SEO、服務頁、訂閱機制。適合想做 build-in-public 或內容創業的人。我做這個 Lab 用 Claude Code 從 0 做起來，目前 105 篇文章、GEO 盤點分數 81/100。
該選哪一個等級？看你「3 年內想做什麼」。
想單純有個網路名片，選等級 1。
想做自由工作者展示作品，選等級 2。
想做內容、教學、服務，選等級 3。
等級 1 到 3 可以漸進升級，不用一開始就決定。
新手最常撞的 5 個坑 (與解法)
- 坑 1：想一次到位做完美。第一版永遠不該完美，1.0 上線之後照讀者回饋改 2.0 才有用。解法：每次只追求「比現在好一點」，設一個期限，強迫自己把不完美的版本推上線。
- 坑 2：用 Wix 或 Squarespace 模板覺得「夠了」。模板會鎖死你日後想改的彈性，半年後你會後悔。解法：有預算學 Claude Code 就學，免寫程式的工具留給「真的只要 1 頁」的場景。
- 坑 3：中文資料夾名稱。Windows 的中文路徑被 Big5 或 GBK 編碼搞，Claude Code 讀進去檔名變問號。解法：所有跟 AI 對接的資料夾，用英文、數字、連字號命名，例如 my-website，不要用「我的網站」。
- 坑 4：部署後本地能開、網路看不到。99% 是檔名大小寫、路徑符號、git push 失敗。解法：檢查 git status 確認推上去了 → 看 Vercel 的部署紀錄找錯誤訊息 → 對一次檔名大小寫。
- 坑 5：光讀文章不動手。看 10 篇教學，不如做 1 個能上線的網站。解法：讀完階段 1 的認知層之後別讀第二輪，直接訂 Claude Code 開始階段 2。
不會寫程式可以用 AI 做網站。我是非工程師的全職交易者，3 個月用 Claude Code 做了 105 篇文章的 SEO 網站、link-in-bio 個人入口，加 10 個自動化 workflow，沒寫過半行程式碼。5 個階段的完整路徑：階段 1 認知(做網站的瓶頸從會不會寫程式，變成會不會講需求) → 階段 2 工具選擇(推 Claude Code，因為彈性大、長期回報高) → 階段 3 用 30 到 60 分鐘上線第一個網站(訂閱、安裝、描述、慢慢改、部署共 5 步) → 階段 4 部署選 Vercel(Hobby 方案永久免費) → 階段 5 個人品牌 3 個等級(link-in-bio、入口站、內容服務站)。最常撞的 5 個坑：想一次做完美、模板鎖死、中文路徑、部署細節、光讀不動手。30 天可以從 0 到第一個網站上線。
名詞解釋
- Claude Code
- Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- native 安裝（原生安裝）
- 官方提供的獨立安裝方式：一行指令下載完整程式，不依賴 Node.js 這類其他環境，裝完會自動更新。2026 年官方文件的推薦裝法。
- Node.js
- 讓電腦能執行 JavaScript 程式的基礎環境。Claude Code 的 npm 舊裝法才需要先裝它；2026 年官方推薦的 native 一行安裝不用。免費，從官網 nodejs.org 下載安裝。
- PowerShell
- Windows 內建的指令視窗：用打字下指令的方式操作電腦，Claude Code 在 Windows 上就在這裡面跑。按 Win + X 可以叫出來。
- 部署（deploy）
- 把做好的網站或程式「推上線」讓所有人用得到的動作。
- Vercel
- 把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- 無程式碼（no-code）
- 不寫程式、用拖拉跟設定做出應用的工具或方法。AI 代理出現後，「會描述需求」比「會不會寫程式」更關鍵。
- GitHub
- 放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
- SEO（搜尋引擎優化）
- 讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。
- AI 代理（AI agent）
- 會「動手做事」的 AI：自己讀檔案、寫程式、跑指令、修錯誤，你只負責描述需求跟監督方向。跟只會「回答問題」的聊天機器人是兩種東西。
- HTML
- 網頁的骨架語言，定義「這是標題、這是段落、這是圖片」。
- ChatGPT
- OpenAI 的對話式 AI。本站常拿它跟 AI 代理對比：ChatGPT 給你答案、你自己動手；AI 代理直接幫你把事做完。
- Cursor
- 內建 AI 的程式編輯器，跟 Claude Code 同類，但走「圖形介面編輯器」路線而非終端機路線。
如果內容對你有用就太好了
隨喜斗內
▸ 常見問題
不會寫程式真的能用 AI 做網站嗎？
可以。我是非工程師的全職交易者，3 個月用 Claude Code 做了 105 篇文章的 SEO 網站，加上 10 個 workflow，完全沒寫過程式。瓶頸從「會不會寫程式碼」變成「會不會講清楚要什麼」，後者非工程師反而有優勢，因為不被既有的寫法綁住。
Claude / ChatGPT / Cursor 哪個做網站最好？
看你的目標。Claude Code 做自己的網站、長期一直改最強，我推這個(US$20/月)。Cursor 適合已經會寫程式、想加速的人。ChatGPT 適合做網頁原型、學概念。如果你只要 1 頁 link-in-bio，沒打算後續一直改，直接用 linktree 那種免寫程式的工具 1 天搞定，別折騰去學 Claude Code。
用 AI 做網站要多少錢？
Claude Code Pro US$20/月 = NT$650/月。部署 Vercel Hobby 永久免費 (個人專案無流量上限)。網域名稱年費 US$10-15 (約 NT$300-450) 但可選不買用 .vercel.app 也行。總成本第一年：US$20 × 12 = US$240 (NT$7800)。對比工程師接案 NT$50000+ 起跳，自學 AI Agent 是非工程師最划算的投資。
我做的網站只給家人 / 自己用，需要學這套嗎？
看你願意花多少時間維護。給自己用的工具，像我做的交易日誌，反而最適合，因為你每天打開會發現痛點、有動力一直改。給家人用的 LINE 機器人或提醒系統也很適合，家人實際用了會給你回饋。如果你只是想體驗一下，先用 ChatGPT 免費版聊聊看 AI 怎麼幫你做網站。
我做完網站要怎麼讓人看到？
兩條路。第一條是 SEO 加 GEO，寫文章被 Google 或 ChatGPT 引用，像這個 Lab 的策略，長期但有複利。我有完整的 SEO Journey 系列 42 篇連載。第二條是社群推廣，在 Threads、IG、X 分享 build-in-public 的過程，短期就看得到反應。我自己兩條都做，SEO 累積長期、社群觸發短期回饋。
我做了模板覺得醜，可以叫 AI 改視覺嗎？
可以。把現在的網站截圖丟給 Claude Code(或者 ChatGPT 也行)，說「我要改成像 Stripe、Apple、Vercel 那種感覺」。AI 會分析那些網站的視覺風格，色彩、字體、留白、動畫，然後改你的網站。我自己整個 Lab 的視覺，都是用「丟參考圖給視覺模型 → Claude Code 實作」這套做的。詳細看 用 AI 兩天大改網站視覺。
看完這篇之前先確認:
- 完全不會寫程式想用 AI 做網站
- 想做個人品牌網站但不知道從哪開始
- 用過 Wix / Squarespace 但想要更彈性的方案
- 已經會寫程式 (這篇是給完全 0 基礎的)
- 只想做一頁 link-in-bio (有專門那篇)
- 想做高流量 SaaS / 電商 (這是個人品牌等級)
- 用 Wix / Squarespace 模板覺得「夠了」 — 結果鎖在模板裡改不動
- 想一次到位做完美 — 永遠 launch 不出來，先做能上線的 v1
- 選太多 AI 工具想全部一起學 — 先選 1 個做出第一個站再說