新手教學 · Route A pillar · 不會寫程式做網站

發布：2026-06-01 · 最後更新：2026-06-11

不會寫程式怎麼用 AI 做網站?2026 非工程師 5 phase 從 0 到上線 (Claude Code 實作)

「不會寫程式可以做網站嗎?」這個問題我自己問過,但 2024 年之前答案是「可以,但要靠 Wix / Squarespace 鎖在模板裡」。2025 年之後答案變了 — 因為 AI Agent (Claude Code、Cursor 這類) 出現,「會講需求」就能做網站。

這篇是 Route A pillar — 把「非工程師用 AI 做網站」整套路徑一次講清楚。5 個 phase:認知 → 工具選擇 → 30-60 分鐘上線 → 部署 → 個人品牌應用。每個 phase 都連結到完整實作文,可以照抄。

適合誰:完全不會寫程式但想要一個「真的屬於自己、能自由改」的網站。不適合:只想要 link-in-bio 一頁就好 (有專門 1 天搞定那篇)、或想做高流量 SaaS / 電商 (這篇是個人品牌等級)。

Phase 1 — 認知層:不會寫程式真的能做網站嗎? (5 分鐘讀)

短答:可以。但要先換掉一個錯誤前提:「做網站 = 寫 HTML / CSS / JavaScript」。這個前提在 2024 年之前對,2025 年之後 AI Agent 出現後不成立。

新前提:「做網站 = 想清楚要什麼網站 + 跟 AI Agent 講需求 + 看結果不滿意說哪裡要改」。寫 code 那段完全是 AI Agent 做的,你不用碰。

「會講需求」聽起來模糊,具體是:能講出「我要一個讓家人記行程的網站」、「我要一個能在手機上開的交易日誌」、「我要一個放我所有連結的個人入口頁」這種「使用情境」描述。不是「我要用 React + TypeScript + Tailwind 做網站」那種技術需求。

非工程師反而在這件事上有優勢 — 我們不被既有寫法綁住,可以直接用「我要什麼」描述需求,AI Agent 反而做得更好。工程師很多時候會被「我習慣這樣寫」綁住,跟 AI Agent 溝通反而卡。

Phase 2 — 工具選擇:Claude Code / ChatGPT / Cursor / no-code 怎麼選? (10 分鐘讀)

現在(2026)可選的「用 AI 做網站」工具大致 4 類。下面對照表,基於我自己用過的視角:

我推非工程師選 Claude Code 的理由:(1) 不需要懂編輯器 UI,直接對話描述需求 (2) 可以做任意網站不被模板綁 (3) 學會了可以接著做 bot、自動化、其他工具,長期投資回報高。

什麼時候不該選 Claude Code:(a) 你只要一頁 link-in-bio 沒打算迭代 — 用 link.coolkidlab.com / linktree 那種 1 天搞定 (b) 你完全不想碰任何命令列 — Wix 適合你 (c) 你要做高流量電商 — 找 Shopify 或專業團隊。

Phase 3 — 30-60 分鐘上線第一個網站 (step-by-step)

假設你選了 Claude Code。下面是「從零到網站上線」的完整 step-by-step。預計 2-3 小時 (含 debug)。

1. Step 1 — 訂閱 + 安裝 (30 分鐘)。去 claude.ai 訂閱 Pro (US$20/月) → 安裝 Node.js 18+ (Windows 從 nodejs.org 下載 LTS) → 開 PowerShell 跑 npm install -g @anthropic-ai/claude-code → 打 claude 進入對話介面。詳細 step-by-step 看 Claude Code Windows 安裝踩雷實錄。
2. Step 2 — 想清楚要什麼網站 (10 分鐘)。寫 3 句話描述:(a) 給誰用 (我家人 / 我自己 / 陌生客戶) (b) 解什麼痛點 (記行程 / 看交易日誌 / 接受詢問) (c) 必備功能 3-5 個。例:「我要做給家人填寫的童裝庫存管理頁,手機可開,可新增 / 刪除 / 看清單,不用登入」。
3. Step 3 — 跟 Claude Code 描述 (5 分鐘)。在 PowerShell 把 Step 2 的 3 句話貼給 Claude Code,加一句「請幫我做出來,用單一 HTML 檔,部署到 Vercel」。Claude Code 會問你細節 (顏色 / 版面 / 資料存哪),你照感覺回答即可。
4. Step 4 — 看結果迭代 (30-60 分鐘)。Claude Code 寫出第一版 HTML,你 double-click 用瀏覽器開看效果。哪裡不滿意就跟它說「按鈕太大」「顏色換成藍色」「我要加一個搜尋框」,它會改。改 5-10 輪通常就到能用。
5. Step 5 — 部署到 Vercel (10 分鐘)。詳細看 Phase 4,簡述:去 vercel.com 註冊 → 連 GitHub (或直接 drag 整個資料夾) → 5 分鐘後給你一個 .vercel.app 網址,任何人可開。

第一個網站建議選「給自己用」或「給家人用」的小工具,不要選「給市場用的產品」。理由:給自己用的工具迭代動力強 (每天打開會看到痛點),給市場用的等別人 feedback 才知道哪裡要改,迭代速度慢 10 倍。

我自己第一個網站是給老婆做的童裝庫存管理頁。從零到上線在 Vercel 花了一個下午,但部署那段卡了 3 小時 — 「我自己電腦看得到、網路上完全沒變化」這個玄學問題,新手 100% 會撞到。詳細看 Vercel 部署不更新踩雷實錄。

Phase 4 — 部署:Vercel / Netlify / GitHub Pages 怎麼選?

做完 HTML 在自己電腦看得到,要怎麼讓陌生人也能開?這就是「部署」。三個免費選項:

我推 Vercel:(1) 設定最簡單 (連 GitHub repo 自動跑) (2) 免費額度大方 (Hobby 無流量上限給個人專案) (3) 自動 HTTPS + CDN 速度快 (4) 自動 preview deployment (你 push 一個 branch 自動給你預覽網址測)。

我自己這個 Lab + link-in-bio 個人入口 + 10 個 workflow 全部部署在 Vercel,完全免費。月流量幾千訪客遠低於 Hobby plan 上限。

部署最常踩的雷 — 「本地看得到、Vercel 看不到」。99% 是 (a) 檔名大小寫不一致 (Vercel Linux 嚴格、Windows 不分) (b) 路徑用反斜線 (Windows) 沒改正斜線 (c) git push 沒成功。詳細解法看 Vercel 部署排錯。

Phase 5 — 個人品牌應用:從 link-in-bio 到完整網站

做出第一個工具 / 網站後,個人品牌應用有 3 種常見模式 (按複雜度):

1. Level 1 — Link-in-Bio 個人入口(1 天上線):一頁放你所有社群連結 + 簡介。適合 IG / Threads 的「網站」連結。我做的 link.coolkidlab.com 就是這個。詳細看 link-in-bio 個人入口 6 踩坑與 1 天上線方法論。
2. Level 2 — 個人品牌入口站(1-2 週):About 頁 + 作品集 + 聯絡。比 link-in-bio 多敘事跟 SEO 入口。適合自由工作者、創作者。
3. Level 3 — 內容 + 服務型網站(1-3 個月):像這個 Coolkid AI Lab — 多篇文章 + 自動化 SEO + 服務頁 + 訂閱機制。適合想做 build-in-public 或內容創業的人。我做這個 Lab 用 Claude Code 從 0 蓋,目前 70+ 篇文章 + GEO audit 81/100。

選哪個 Level?看你的「3 年內想做什麼」 — 想單純有個網路名片 → Level 1;想做自由工作者展示作品 → Level 2;想做內容 / 教學 / 服務 → Level 3。Level 1 → 3 可以漸進升級,不用一開始就決定。

新手最常撞的 5 個坑 (與解法)

• 坑 1 — 想一次到位做完美。第一版永遠不該完美,1.0 上線後讀者 feedback 改 2.0 才有用。解法:每次只追求「比現在好一點」,設 deadline 強制 launch 不完美版。
• 坑 2 — 用 Wix / Squarespace 模板覺得「夠了」。模板鎖死你日後想改的彈性,半年後你會後悔。解法:有預算學 Claude Code 就學,no-code 留給「真的只要 1 頁」的場景。
• 坑 3 — 中文資料夾名稱。Windows 中文路徑被 Big5 / GBK 編碼搞,Claude Code 讀進去檔名變問號。解法:所有跟 AI 對接的資料夾,英文 + 數字 + 連字號命名 (例如 my-website 不要 我的網站)。
• 坑 4 — 部署後本地能開網路看不到。99% 是檔名大小寫 / 路徑符號 / git push 失敗。解法:檢查 git status 確認 push 成功 → 看 Vercel deployment log 找 error → 對檔名大小寫。
• 坑 5 — 光讀文章不動手。看 10 篇教學不如做 1 個能上線的網站。解法:讀完 Phase 1 認知層後別讀第二輪,直接訂 Claude Code 開始 Phase 2。

名詞解釋

Claude Code

Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。

部署（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 工具，
以及 Lab 新文的個人版（你會比公開版早一週收到）。

→ 訂閱（雙週一封，第一封自動寄起步清單）

跳轉 Substack、隨時取消、不轉賣 email。

如果內容對你有用就太好了
隨喜斗內

看完這篇之前先確認:

← 回新手教學