第一次用 AI 做網站：一個非工程師的真實心路歷程
我朋友開的投資理財教育公司想要一個給用戶測自己投資個性的小工具，丟給我做。我不會寫程式，以前看到 HTML 都會頭痛。但用 Claude Code 一陣子之後還是硬著頭皮接了，做了 4-5 個雷之後總算上線。
這篇把當初撞過的牆全部重整成 step-by-step 教學，讀完你會做出一個能公開上線的「條件式問答工具」——投資個性測驗、MBTI、新手 onboarding 篩選器、產品推薦器，任何「根據用戶條件挑題目」的需求都套得上。
30-60 分鐘可全跑完。前置條件：Claude Code 已裝好（沒裝看 Windows setup 那篇）、英文命名的資料夾、Vercel 帳號（免費）、GitHub 帳號（免費）。Pro 訂閱 US$20/月。
第一次用 AI 做網站要從哪裡開始？（資料夾命名 + 開檔習慣）
從「正確命名一個英文資料夾」開始。聽起來很笨，但這是新手 100% 卡的第一關。我自己第一次用中文資料夾名稱，Claude Code 讀進去整個變問號，卡了 1 小時才發現問題出在這裡。
正確開檔流程 3 步：
- 在桌面新建一個英文 + 連字號的資料夾，例如 my-quiz-site。不要用中文、不要用空格、不要用特殊符號。
- 打開 PowerShell（Windows）或 Terminal（Mac），用 cd C:\Users\你的名字\Desktop\my-quiz-site 進到資料夾。
- 輸入 claude 啟動 Claude Code，這個資料夾就變成 AI 的工作目錄，後面所有檔案都會建在這裡。
資料夾這關過了之後，下一關是電腦本身的安全設定，特別是 Windows 用戶會撞。
為什麼 AI 寫程式會跳一片紅字？（電腦安全設定怎麼處理）
AI 那麼強，但連我電腦上的安全設定、權限這些雜事都不會自己搞定。資料夾改好之後第一次叫 Claude Code 跑指令，畫面跳一片紅字，AI 解釋了一堆聽不懂的東西。後來才發現問題不在 AI 寫的 code，是電腦本身的安全設定不讓我這樣執行。
Windows 解法：用系統管理員身分開 PowerShell，輸入 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 按 Enter，跳出確認時打 Y。設一次就終身有效。詳細看「Claude Code Windows 安裝踩雷實錄」那篇第 3 節。
Mac 解法：幾乎不會遇到。如果跳 sudo 提示，輸入電腦密碼按 Enter 就過。Mac 預設的安全設定比 Windows 寬鬆。
整理一下分工：AI 是寫東西的助手，不是電腦本身的維護員。電腦的環境、設定、權限這些東西，最後還是要自己懂一點點基本概念，AI 沒辦法越過電腦自己長腳。
卡住時怎麼判斷是「哪一層」的問題？（新手 debug 順序）
新手最容易把所有問題都丟給 AI 修，但其實要先分清楚問題在哪一層，AI 才能幫對忙。下面是我自己 debug 的順序，從最常見排到最少見：
- 畫面有亂碼或問號 → 通常是檔案命名或編碼問題。先檢查資料夾名稱有沒有中文、有沒有特殊符號。
- PowerShell 或 Terminal 跳紅字 → 通常是電腦安全設定或環境變數，跟 AI 寫的 code 沒關係。先看第 2 節解法。
- 自己電腦看得到、網路上看不到 → 還沒部署到雲端，要 push 到 GitHub + Vercel。看第 6 節。
- AI 一直在規劃但沒真的改檔 → 要明確下指令「不要規劃，直接動手改 [檔名]」。看第 4 節。
- 改完看不到效果 → 瀏覽器快取或 Vercel 部署延遲，用無痕視窗打開避免被舊版騙。
先判斷哪一層再請 AI 修，可以省掉 90% 的卡關時間。我自己現在 debug 一定先做這一步。
怎麼讓 AI 從「規劃模式」切到「動手模式」？（關鍵指令範本）
用明確的指令告訴 AI「不要規劃，直接動手」就好。AI 預設會先給規劃文件，看起來很專業但不會真的改檔。新手第一次用很容易被「漂亮的規劃」騙，以為 AI 已經做完了。
我自己卡過一次：請 AI 根據用戶條件給不同題目，AI 給了一份「執行策略」「優先順序」，規劃完它跟我說「我不記得有什麼計畫，你想要我改什麼？」那一刻真的謝囉。
之後我每次要 AI 真的動工，開頭都會講這句指令範本：
「不要規劃，直接動手改 [檔名] 的 [功能]。需要的時候才回報進度。」
這個範本可以省掉 1-2 次無效規劃。寫 code 的時候我會把 [檔名] 換成 index.html、把 [功能] 換成「年齡篩選邏輯」這種具體的東西。具體 > 抽象，AI 才不會多想。
第一個能跑的網站怎麼從 0 做到 100？（條件式問答工具完整 5 步驟）
下面用「條件式問答工具」當範例做完整 step-by-step。讀完你能做出一個根據用戶條件挑題目的小網站，例如投資個性測驗、MBTI、新手 onboarding 篩選器，任何「根據用戶條件挑題目」的需求都套得上。
- Step 1 — 跟 AI 講清楚需求。在 Claude Code 輸入：「我想做一個 [主題] 測驗網站。每題有屬性標籤，用戶輸入年齡跟身份，系統根據條件挑出 10 題隨機抽。請建一個 index.html + 一個 quiz.js，題目用 JSON 結構放在 data.js。不要規劃，直接建檔。」
- Step 2 — 給 AI 樣本題目。準備 5-10 題範例題目給 AI 看格式，例如：{ q: '20 歲剛出社會應該優先做什麼?', tag: ['young', 'low-asset'], options: [...] }。AI 會照這個結構生剩下的題目。題目越具體，AI 生出來的越貼。
- Step 3 — 在自己電腦看效果。資料夾裡有 index.html，直接雙擊用瀏覽器打開。看用戶輸入年齡跟身份按下去，有沒有跳出對應題目。沒對的就把錯誤截圖丟回 Claude Code，說「這裡卡住了，看怎麼修」。
- Step 4 — 邏輯對上之後加美化。叫 AI 用 Tailwind CSS、NES.css 或任何你喜歡的 CSS 框架包介面。一句指令：「幫我用 [風格] 重做介面，保留現有功能不要改邏輯。」
- Step 5 — 寫 README.md。叫 AI 寫一個 README 描述這個專案是什麼、怎麼跑、怎麼部署。為下一步 GitHub 上架做準備。
跑完 5 步，你已經有一個能在自己電腦跑的網站。看到「20 歲、剛出社會」跳出珍奶的題目、「60 歲、資產 1000 萬以上」跳出信託退休理財的題目，那種「邏輯對上了」的瞬間，新手會有一種「乾，我居然真的做出來了」的感覺。下一步把它公開上線。
（補充：本範例工具示範用，不構成投資建議，也不推薦任何金融商品。）
做完之後怎麼把網站從「自己電腦」公開到「全世界」？（GitHub + Vercel 5 步部署）
用 GitHub 做版本控管 + Vercel 做部署。兩個都免費、5 分鐘 setup 完、之後改 code 自動重新部署。下面完整 step-by-step：
- Step 1 — 註冊 GitHub 帳號（github.com），建一個新的 repository 取名跟資料夾一樣（例如 my-quiz-site）。設成 Public（之後 Vercel 免費方案需要）。
- Step 2 — 在 Claude Code 跟 AI 說：「把現有資料夾 push 到 GitHub repo [your-username]/my-quiz-site，需要的話幫我 init git。」AI 會跑 git init / git add / git commit / git remote add / git push 整套指令。第一次 push 會問 GitHub 帳號密碼，照填。
- Step 3 — 註冊 Vercel 帳號（vercel.com），用 GitHub 帳號登入最快。點 Add New → Project → 找剛剛 push 上去的 repo → Deploy。Vercel 自動偵測檔案結構，1-2 分鐘部署完。
- Step 4 — 部署完 Vercel 給你一個網址（例如 my-quiz-site.vercel.app）。用手機打開那個網址實測功能。能跑就過關。
- Step 5 — 之後每次改 code 在 Claude Code 講「push 到 GitHub」，Vercel 偵測到變動會自動重新部署，1-2 分鐘新版上線。不需要手動上傳任何東西。
用手機打開那個公開網址、看到自己做的東西在外面真的能用的瞬間，新手第一次的成就感真的很重。這個信心比技術本身值錢。
不想自己做、想直接被帶怎麼辦？
上面這套 step-by-step 自己跑大概 30-60 分鐘，前提是有耐心讀文章 + 願意 debug。如果符合下面任一條，可能不適合自己跑：
- 沒時間自己研究、看長文會頭痛
- 想要一個專屬於你領域的工具（例如客戶 onboarding 篩選、產品推薦器、品牌 quiz），不是公版範例
- 卡住的時候不想去 Stack Overflow 翻問題
這時候可以直接找 不想自己研究我教你（規劃中）。1-on-1 帶你從需求釐清、Claude Code 安裝、第一個專案上線、build-in-public 開戶整套跑完。Pro：不用自己 debug、不用看長文、有人帶。Con：要付費。適合：沒時間自己研究、不想看長文、想直接從 0 到 1 的人。
第一次用 AI 做網站完整 step-by-step：1) 用英文資料夾開檔；2) Windows 跑 Set-ExecutionPolicy 處理安全設定；3) 卡住先判斷哪一層（檔名 / 環境 / 部署 / 規劃模式）；4) 用「不要規劃，直接動手改 [檔名]」指令範本切換 AI 模式；5) 5 步建出條件式問答工具（投資測驗 / MBTI / onboarding 篩選都能套）；6) GitHub + Vercel 5 步部署上線，之後改 code 自動重新部署。30-60 分鐘可全跑完。沒時間自己跑 → 看上面 不想自己研究我教你。
相關文章
▸ 常見問題
第一次用 AI 做網站要會寫程式嗎？
不需要。用 Claude Code 這種 AI coding 工具的時候，你的角色是「需求講清楚」+「驗證對不對」，不是自己寫每一行 code。我自己是全職交易者，完全沒有寫程式背景，跟著本文 step-by-step 30-60 分鐘可以做出第一個能上線的網站。比較重要的是知道怎麼跟 AI 講需求、卡住時怎麼判斷哪一層出問題（看本文第 3 節）。
AI 寫網站需要付費工具嗎？
需要 Anthropic Pro 訂閱（US$20/月）才能用 Claude Code。GitHub 跟 Vercel 都免費。一個月成本 US$20，相當於 NT$650 左右，跟 Netflix 差不多。如果只想試試看再決定要不要付，Pro 月繳可以隨時停。完全免費的替代方案有 Cursor 免費版或 GitHub Copilot 免費版，但對非工程師來說 Claude Code 的中文對話跟「直接改檔」體驗最順。
AI 做的網站怎麼免費部署上線？
Vercel 免費方案最適合非工程師。流程：把專案 push 到 GitHub（免費）→ Vercel 用 GitHub 帳號登入 → Add New Project 選 repo → Deploy → 1-2 分鐘給你一個 .vercel.app 網址。之後每次改 code push 到 GitHub，Vercel 偵測到自動重新部署，不用手動上傳。完整 step-by-step 看本文第 6 節。
AI 卡在「規劃模式」一直不動手怎麼辦？
用明確指令範本：「不要規劃，直接動手改 [檔名] 的 [功能]。需要的時候才回報進度。」AI 預設會先給規劃文件，看起來很專業但不會真的改檔。指令裡明講「不要規劃」+ 指定具體檔名跟功能，AI 才不會空轉。我自己每次要 AI 真的動工都會用這個範本，可以省掉 1-2 次無效規劃。詳細看本文第 4 節。
AI 第一次寫的 code 跑不起來怎麼辦？
先判斷錯誤在哪一層，再決定怎麼修。從最常見排序：1）資料夾命名有中文 → 改英文；2）電腦安全設定擋住（PowerShell 紅字）→ 跑 Set-ExecutionPolicy；3）瀏覽器快取 → 用無痕視窗打開；4）AI 沒真的改檔 → 用「不要規劃，直接動手」指令；5）部署延遲 → 等 1-2 分鐘 Vercel 重新部署。debug 順序看本文第 3 節，這個順序可以省 90% 的卡關時間。
第一個 AI 網站專案做什麼題材最好上手？
做「自己每天會用、家人會用、朋友需要」的小工具最好上手。技術門檻低、需求清楚、做完馬上能用，新手建立信心最快。範例：條件式問答工具（投資測驗、MBTI）、待辦清單、家庭行事曆、童裝庫存管理頁、家族 LINE Bot。不要挑「我要做一個 SaaS 賺錢」這種題目當第一個，需求太大會中途放棄。我自己第一個專案是幫朋友的投資理財教育公司做的條件式問答工具，第二個是給老婆童裝店的庫存管理頁，都是身邊真實需求。
看完這篇之前先確認:
- 完全沒寫過程式 想做網站不知從哪開始
- 願意花 30-60 分鐘 trial-and-error
- 想第一次就把東西公開出去 不藏私
- 想第一次就做到完美的人
- 想學工程師等級 best practice 的人
- 完全沒 30 分鐘可投資的人
- 一開始就想做太大 結果 AI 卡住
- 跟 AI 講半句話以為它懂
- 不存 git 直接改 改錯沒辦法回去