不會寫程式怎麼用 AI 做網站？5 階段實作
文 / Coolkid發布：2026-06-01 · 最後更新：2026-09-02閱讀約 13 分鐘
短答給趕時間的人：不會手寫程式，也可以用 AI 做出網站，但不是按一下就完成。我是非工程師，2026 年 4 月中開始用 Claude Code，第一個網站花了一個下午上線，其中部署就卡了 3 小時。後來把同一套做法用在這個 136 篇文章的網站與 13 個工作流，再整理成 5 階段：選小問題、說清楚需求、做出最小版本、部署、用真實使用慢慢修。
「不會寫程式可以做網站嗎？」這個問題我自己問過。
以前我以為選項只有兩種：自己學會寫程式，或被網站模板限制。
2026 年 4 月中開始用 Claude Code 後，我才多看到第三條路。
我不必手寫每一行程式，但要把需求講清楚、看懂畫面哪裡不對、測試功能，最後確認部署真的上線。
這篇是整條路徑的主幹文，把「非工程師用 AI 做網站」一次講清楚。
我把自己走過的路拆成 5 階段：挑小問題、選工具、做出最小版本、部署、再長成個人品牌網站。
這不是保證幾小時完成的捷徑，而是一條可以從小成果開始、每一步都能驗收的路。
適合誰？完全不會寫程式，但想要一個「真的屬於自己、能自由改」的網站。
下面兩種人不太適合。
只想要 link-in-bio 一頁就好的，有專門那篇 1 天搞定。
想做高流量的 SaaS 或電商的，這篇只到個人品牌等級。
階段 1：不會手寫程式，仍然能做網站嗎？
先給短答，答案是可以。
要換掉的前提不是「程式已經不重要」，而是「每一行都必須由我親手寫」。AI 可以產生程式，但需求、資料安全、測試與上線結果仍然要有人負責。
新的分工是：我說清楚給誰用、要解決什麼、完成後怎麼驗收，AI 把需求轉成檔案與程式。第一版出來後，我實際打開、點按鈕、找問題，再請它修。
我沒有手寫每一行程式碼，但也不是完全不用碰技術。檔案位置、網址、帳號權限與錯誤訊息，仍要在出問題時一項一項確認。
「會講需求」聽起來很模糊，具體是什麼意思？
是能講出「我要一個讓家人記行程的網站」、「我要一個能在手機上開的交易日誌」、「我要一個放我所有連結的個人入口頁」這種使用情境的描述。
不是「我要用 React 加 TypeScript 加 Tailwind 做網站」那種技術需求。
非工程師的優勢不是比工程師更會做網站，而是更容易先從使用情境描述需求。
「我要讓家人用手機記行程」比「幫我用某個框架」更接近真正問題。技術選擇可以請 AI 解釋，但誰會用、資料放哪、什麼算完成，不能全部外包。
AI 把手寫程式的門檻降低了，沒有拿走需求、測試與部署責任。第一站先求能用、能回復、能驗收。
階段 2 工具選擇(10 分鐘讀)：Claude Code、ChatGPT、Cursor、免寫程式的工具怎麼選？
用 AI 做網站的入口很多。先不要問哪個最強，先看你要不要長期維護、願不願意碰專案檔案，以及網站是否涉及登入、付款或敏感資料。
下面的選法以我實際走過的 Claude Code 路線為主，其他工具只列適用情境，不用容易過期的固定價格判斷。
| 工具 | 需要適應 | 適合的工作 | 後續責任 | 適合誰 |
|---|---|---|---|---|
| Claude Code | 專案檔案與版本紀錄 | 長期維護同一個網站 | 檢查修改與部署結果 | 願意管理專案檔案的人 |
| Cursor | 程式編輯器介面 | 邊看檔案邊修改 | 檢查程式與版本 | 已習慣編輯器的人 |
| ChatGPT | 對話或 Agent 入口 | 先做原型、整理需求或操作網頁 | 依模式管理資料與權限 | 想從熟悉入口開始的人 |
| Wix / Squarespace | 拖拉介面與平台規則 | 快速完成介紹頁 | 功能與搬家受平台限制 | 只要簡單網站的人 |
我最後選 Claude Code，不代表每個非工程師都該選它。
它適合我，是因為我要長期改同一個網站，也願意學會看檔案、版本紀錄與部署結果。
如果你只要一頁介紹、不打算維護，拖拉式工具通常更快。
如果網站要登入、付款或保存私人資料，先縮小功能，必要時找專業工程師檢查安全與資料處理。
那什麼時候不該選 Claude Code？
你只要一頁 link-in-bio，沒打算後續一直改，那就用 linktree 那種 1 天搞定的工具就好。
你完全不想碰任何命令列，Wix 適合你。
你要做高流量電商，找 Shopify 或者專業團隊。
選工具先看後續責任。只要一頁，選最快上線的入口。要長期維護，才值得學會管理檔案、版本與部署。
階段 3：用 5 步做出第一個可上線版本
假設你選了 Claude Code。
我第一個網站花了一個下午，其中部署卡了 3 小時。你的時間會受功能、安裝與排錯影響，所以先把目標訂成「今天做出能打開的最小版本」，不要拿固定分鐘數逼自己。
- 步驟 1：選入口並完成安裝。我走 Claude Code 路線，Windows 現行安裝與登入方式整理在Claude Code Windows 安裝。價格與方案會變，動手前直接看官方頁面，不把舊文章的數字當報價單。
- 步驟 2：用 3 句話定義最小版本。寫出給誰用、解什麼問題、完成後要能做哪 3 件事。例如「給家人用的行程頁，手機能開，可以新增、刪除與看清單，不先做登入」。
- 步驟 3：先要求計畫，再做第一版。把 3 句需求交給 AI，先請它列出檔案、步驟與風險。確認後再做最小版本。登入、付款與資料庫先不要塞進第一版。
- 步驟 4：用真實動作驗收。不要只看畫面漂亮。用手機開一次、按過每個按鈕、重新整理、輸入錯誤資料，再把實際結果與預期差異交給 AI 修正。
- 步驟 5：部署後再從公開網址重測。可用 Vercel、Netlify 或 GitHub Pages。部署完成不等於成功，要打開公開網址確認版本、手機畫面與主要操作，再把可回復的版本紀錄留下來。
第一個網站建議選「給自己用」或「給家人用」的小工具，不要選「給市場用的產品」。
理由是什麼？給自己用的工具，改的動力最強，因為你每天打開都會看到痛點，而給市場用的要等別人回饋才知道哪裡要改，速度慢上幾倍。
我自己第一個網站，是給老婆做的童裝庫存管理頁。
從零到上線花了一個下午，部署那段卡了 3 小時。「本機看得到、公開網址沒有更新」是我真的遇過的問題，但不是每個人都會碰到，也不只一種原因。
詳細看 Vercel 部署不更新踩雷實錄。
階段 4 部署：Vercel、Netlify、GitHub Pages 怎麼選？
做完 HTML 在自己電腦看得到，要怎麼讓陌生人也能開？
這就是「部署」。個人靜態網站常見的起點有 Vercel、Netlify 與 GitHub Pages，免費方案的用途與額度會變，上線前要看各平台現行條款。
| 平台 | 免費方案定位 | 上線方式 | 要注意 | 適合誰 |
|---|---|---|---|---|
| Vercel | 個人、非商業用途，有用量上限 | 連 GitHub 自動部署 | 商業用途與額度要看現行條款 | 持續更新的個人專案 |
| Netlify | 有免費方案，額度依官方為準 | 連 GitHub 自動部署 | 功能與用量限制會調整 | 偏好 Netlify 工作流的人 |
| GitHub Pages | 公開儲存庫可部署靜態頁 | 從儲存庫設定 Pages | 不適合需要伺服器功能的網站 | 純靜態站與文件頁 |
我目前用 Vercel，理由主要是 GitHub 推送後會自動部署，也能產生預覽網址。
對我這種會持續更新內容的人，自動部署比手動上傳省事。
Vercel Hobby 是個人、非商業用途的免費方案，而且有用量上限，不是「永久無流量上限」。現行額度與限制請看Vercel Hobby 官方文件。
HTTPS、CDN 與預覽部署是我留下來使用的功能，但平台選擇仍要看網站用途。
如果網站開始商業化或超過免費方案限制，就要重新看方案，不能因為第一版免費就假設永遠免費。
這個 Lab 與我的幾個個人專案目前部署在 Vercel。這只證明它符合我現在的用途，不代表任何規模都能一直用免費方案。
我會看實際用量與平台條款，而不是用訪客數猜還剩多少額度。
部署最常踩的雷是「本地看得到、Vercel 看不到」。
我會先查 3 類原因。第一是檔名大小寫不一致，Windows 本機可能看不出來，部署到 Linux 環境才出錯。
第二是路徑用了 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 做起來，目前 136 篇文章、GEO 盤點分數 81/100。
該選哪一個等級？看你「3 年內想做什麼」。
想單純有個網路名片，選等級 1。
想做自由工作者展示作品，選等級 2。
想做內容、教學、服務，選等級 3。
等級 1 到 3 可以漸進升級，不用一開始就決定。
新手最常撞的 5 個坑 (與解法)
- 坑 1：想一次到位做完美。第一版永遠不該完美，1.0 上線之後照讀者回饋改 2.0 才有用。解法：每次只追求「比現在好一點」，設一個期限，強迫自己把不完美的版本推上線。
- 坑 2：工具選得比需求還早。還不知道網站給誰用，就先糾結 Claude Code、Wix 或框架。解法：先寫出使用者、問題與 3 個驗收動作，再選能最快完成那個版本的工具。
- 坑 3：把路徑問題都怪給中文。我確實遇過 Windows 中文路徑與編碼問題，但不是中文資料夾一定會壞。解法：新專案先用英文、數字與連字號降低變數，出錯時仍要看真正的錯誤訊息。
- 坑 4：部署成功就以為網站已更新。本機版本、GitHub 提交與線上部署可能不是同一版。解法：依序看 git status、遠端提交、部署紀錄，再從公開網址確認實際內容。
- 坑 5：把做完畫面當成做完網站。至少要用手機開一次、按過主要功能、測錯誤輸入與重新整理。能打開不代表能使用，公開網址驗收才算完成。
不會手寫程式也能用 AI 做網站，但 AI 不會替你決定需求、驗收結果或承擔資料安全。我的 5 階段是：挑一個小問題、選適合長期責任的工具、做出最小版本、部署後從公開網址重測、再用真實使用慢慢擴充。第一個網站花了我一個下午，其中部署卡了 3 小時。
名詞解釋
- 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 同類，但走「圖形介面編輯器」路線而非終端機路線。
- Codex
- OpenAI 的程式型 AI 代理，跟 Claude Code 同類：能讀寫你的檔案、跑指令、動手把功能做出來。
- SaaS（軟體即服務）
- 訂閱制的雲端軟體服務。新手第一個專案不建議直接挑戰這個，範圍太大。
- Tailwind
- 寫網頁外觀的捷徑：不另外開一個樣式檔，直接在標籤上寫顏色、間距這些關鍵字就能改長相。
- Git
- 程式碼的版本紀錄系統：每次改動存成一個「存檔點」（commit），隨時可以回溯、比對、還原，不怕改壞。
如果內容對你有用就太好了
隨喜斗內
常見問題FAQ
不會寫程式真的能用 AI 做網站嗎？
可以，但更準確的說法是「不用親手寫每一行程式」。你仍要說清楚給誰用、完成後要能做什麼，並實際測試與確認部署。我從 2026 年 4 月中開始用 Claude Code，第一個網站花了一個下午，其中部署卡了 3 小時。
Claude / ChatGPT / Cursor 哪個做網站最好？
沒有固定第一名。只要一頁介紹、很少修改，可以先用拖拉式工具。想長期維護專案檔案，我自己選 Claude Code。已習慣程式編輯器的人可看 Cursor。符合資格的付費方案也可用 ChatGPT Work 處理多步任務，程式開發則另有 Codex。先看用途與後續責任，再看品牌。
用 AI 做網站要多少錢？
成本至少分成 AI 工具、網域與部署 3 塊，而且方案會變。第一版可以先用免費網址與個人專案方案驗證，但 Vercel Hobby 限個人、非商業用途，也有用量上限。不要把文章裡的舊價格當報價單，訂閱前直接看官方方案頁。
我做的網站只給家人 / 自己用，需要學這套嗎？
很適合拿來當第一個專案，因為使用者就在身邊，問題也容易驗收。我第一個網站就是給家人用的小工具。先不做登入、付款與敏感資料，從手機能開、能完成 3 個動作的最小版本開始。
我做完網站要怎麼讓人看到？
先確認公開網址真的能開，再談推廣。內容型網站可逐步做 SEO 與 AI 搜尋引用，社群則適合分享實作過程與取得早期回饋。兩條路可以並行，但第一步都是確認讀者從公開網址能完成你設計的動作。
我做了模板覺得醜，可以叫 AI 改視覺嗎？
可以，但不要只丟一句「做得像某品牌」。附上目前截圖，指出想保留與想改的地方，再要求 AI 先列視覺差異。改完要檢查手機版、文字對比、按鈕與圖片尺寸。我自己的 Lab 也用過參考圖加 AI 實作的流程，但每一輪仍要人工驗收。
看完這篇之前先確認:
- 完全不會寫程式想用 AI 做網站
- 想做個人品牌網站但不知道從哪開始
- 用過 Wix / Squarespace 但想要更彈性的方案
- 已經會寫程式 (這篇是給完全 0 基礎的)
- 只想做一頁 link-in-bio (有專門那篇)
- 想做高流量 SaaS / 電商 (這是個人品牌等級)
想有一個自己的個人或品牌網站，又不想從零開始摸的話，可以看網頁製作（試營運價 NT$ 26,800）。