第一次用 AI 做網站：不會寫程式硬著頭皮上線
文 / Coolkid發布：2026-05-06 · 最後更新：2026-06-11閱讀約 13 分鐘
短答給趕時間的人：不會寫程式也做得出能上線的小網站，卡住的地方多半是環境設定跟指令怎麼下，不是程式碼。三件事先知道就少繞路。第一，資料夾名稱只用英文，我用中文命名，Claude Code 讀進去整個變問號，卡了 1 小時。第二，Windows 跑指令跳出一整片紅字，那是電腦的安全設定擋住，跟 AI 寫的程式碼無關，用系統管理員開 PowerShell 跑一次 Set-ExecutionPolicy 就過。第三，AI 常常只交一份規劃，沒動到檔案，開頭補一句「不要規劃，直接動手改 [檔名] 的 [功能]」。整套做到 Vercel 上線 30 到 60 分鐘。
我朋友開的投資理財教育公司想要一個小工具，讓使用者測自己的投資個性。這件事就丟給我做。
我不會寫程式，以前看到 HTML 這幾個字都會頭痛。但用 Claude Code 一陣子之後，還是硬著頭皮接了下來。
中間踩了 4-5 個雷才上線。
這篇把當初撞過的牆整理成一篇教學，一步一步帶你做完。
讀完你會做出一個能公開上線的「條件式問答工具」。
投資個性測驗、MBTI、新手引導的篩選器、產品推薦器這些都算，任何「照使用者條件挑題目」的需求都套得上。
30-60 分鐘可以全部跑完，動手之前要先準備四樣東西。
Claude Code 要先裝好，還沒裝的先看 Windows 安裝那篇。資料夾要用英文命名。
Vercel 帳號跟 GitHub 帳號各申請一個，兩個都是免費的。
另外要有 Anthropic 的 Pro 訂閱，一個月 US$20。
第一次用 AI 做網站要從哪裡開始？（資料夾命名 + 開檔習慣）
從「正確命名一個英文資料夾」開始。聽起來很笨，但這是新手最常卡住的第一關。
我自己第一次用中文資料夾名稱，Claude Code 讀進去整個變問號，卡了整整 1 小時，才發現問題出在這裡。
正確的開檔流程有三步。
- 在桌面新建一個資料夾，名稱用英文加連字號，例如 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 的錯。是我的電腦不讓我這樣執行指令，跟 AI 寫的程式碼沒有關係。
那第一次遇到紅字，到底要先改哪一個設定？Windows 的解法，是用系統管理員身分打開 PowerShell。
輸入 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 之後按 Enter。跳出確認的時候打 Y。
設定一次就終身有效。詳細的步驟看「Claude Code Windows 安裝踩雷實錄」那篇第 3 節。
Mac 幾乎不會遇到這關。如果跳出 sudo 提示，輸入電腦密碼按 Enter，就會過。
Mac 預設的安全設定，比 Windows 寬鬆很多。
這裡可以整理出一個分工。AI 是幫你寫東西的助手，你的電腦歸你自己管。
電腦的環境、設定、權限這些東西，最後還是要自己懂一點基本概念，因為電腦這一層沒設好，AI 再厲害也動不了。
卡住的時候，新手要怎麼判斷問題出在哪一層？
新手最容易把所有問題都丟給 AI 去修。但畫面出問題的時候，第一個該懷疑的是哪一層？
先分清楚問題在哪一層，AI 才能幫對忙。下面是我自己找問題的順序，從最常見的排到最少見的，照著從上往下看一遍，大概就知道問題是卡在哪一層。
- 畫面有亂碼或問號 → 通常是檔案命名或編碼問題。先檢查資料夾名稱裡有沒有中文或特殊符號。
- PowerShell 或 Terminal 跳紅字 → 通常是電腦安全設定或環境變數，跟 AI 寫的程式碼沒關係。先看第 2 節的解法。
- 自己電腦看得到、網路上看不到 → 還沒部署到雲端，要 push 到 GitHub + Vercel。看第 6 節。
- AI 一直在規劃但沒真的改檔 → 要明確下指令「不要規劃，直接動手改 [檔名]」。看第 4 節。
- 改完看不到效果 → 瀏覽器快取或 Vercel 部署延遲，用無痕視窗打開，才不會被舊版畫面誤導。
先判斷再請 AI 動手。這樣可以省掉 90% 的卡關時間。
我現在遇到問題一定先做這一步。
怎麼讓 AI 從「規劃模式」切到「動手模式」？
用明確的指令告訴 AI「不要規劃，直接動手」就好。
AI 預設會先給你一份規劃文件，看起來很專業，但不會真的改到檔案。
新手第一次用很容易被漂亮的規劃唬過去，以為 AI 已經做完了。
我自己卡過一次。請 AI 照使用者填進去的條件給出不同題目，AI 回了一份「執行策略」，又附上一份「優先順序」的排序清單。
規劃寫完之後，Claude Code 跟我說「我不記得有什麼計畫，你想要我改什麼？」那一刻真的謝囉。
那句範本到底該怎麼寫才有用？我每次要 AI 真的動工，開頭都會講這一句。
「不要規劃，直接動手改 [檔名] 的 [功能]。需要的時候才回報進度。」
這個範本可以省掉 1-2 次無效規劃。
寫程式碼的時候，我會把 [檔名] 換成 index.html，把 [功能] 換成「年齡篩選邏輯」這種具體的東西。講得越具體，AI 越不會自己多想。
第一個能跑的網站怎麼從 0 做到 100？（條件式問答工具完整 5 步驟）
下面用「條件式問答工具」當範例，一步一步做完一輪。
做完你會有一個小網站，能照使用者填進去的年齡跟身份，自動挑出對應的題目。
投資個性測驗、MBTI、新手引導的篩選器，背後都是同一套做法，換掉題目跟標籤，就會變成完全另一個工具。
- 步驟 1：跟 AI 講清楚需求。在 Claude Code 輸入：「我想做一個 [主題] 測驗網站。每題有屬性標籤，使用者輸入年齡跟身份，系統照條件挑出 10 題隨機抽。請建一個 index.html 加一個 quiz.js，題目用 JSON 結構放在 data.js。不要規劃，直接建檔。」
- 步驟 2：給 AI 樣本題目。準備 5-10 題範例題目給 AI 看格式，像是：{ q: '20 歲剛出社會應該優先做什麼？', tag: ['young', 'low-asset'], options: [...] }。AI 會照這個結構產生剩下的題目。題目給得越具體，AI 生出來的越接近你要的。
- 步驟 3：在自己電腦上看效果。資料夾裡有 index.html，直接點兩下用瀏覽器打開。輸入年齡跟身份按下去，看有沒有跳出對應的題目。沒對的就把錯誤截圖丟回 Claude Code，說「這裡卡住了，看怎麼修」。
- 步驟 4：邏輯對上之後再加美化。叫 AI 用 Tailwind CSS、NES.css 或任何你喜歡的 CSS 框架做介面。一句指令就好：「幫我用 [風格] 重做介面，保留現有功能不要改邏輯。」
- 步驟 5：寫 README.md。叫 AI 寫一份 README 說明這個專案是什麼、怎麼跑、怎麼部署，為下一步上架 GitHub 做準備。
跑完五步，你已經有一個能在自己電腦上跑的網站。
看到「20 歲、剛出社會」跳出珍奶的題目、「60 歲、資產 1000 萬以上」跳出信託退休理財的題目，那個「邏輯對上了」的瞬間會很有感。
新手大概會冒出一句「乾，我居然真的做出來了」。
下一步是把這個網站公開上線。
（補充：本範例工具示範用，不構成投資建議，也不推薦任何金融商品。）
做完之後怎麼把網站從「自己電腦」公開到「全世界」？（GitHub + Vercel 5 步部署）
東西在自己電腦上跑起來之後，要怎麼讓別人也打得開？用 GitHub 做版本控管，用 Vercel 做部署。
兩個都免費，五分鐘就設定完。
之後改完程式碼，會自動重新部署。下面是完整的五個步驟。
- 步驟 1：註冊 GitHub 帳號（github.com），建一個新的 repository，名稱跟資料夾一樣，例如 my-quiz-site。要設成 Public，之後 Vercel 免費方案才用得了。
- 步驟 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 整套指令。第一次推上去會問 GitHub 帳號密碼，照填就好。
- 步驟 3：註冊 Vercel 帳號（vercel.com），用 GitHub 帳號登入最快。點 Add New → Project，找剛剛推上去的那個專案，按 Deploy。Vercel 會自動偵測檔案結構，1-2 分鐘部署完。
- 步驟 4：部署完 Vercel 會給你一個網址，例如 my-quiz-site.vercel.app。用手機打開那個網址實際測一遍功能，能跑就過關。
- 步驟 5：之後每次改完程式碼，在 Claude Code 講「push 到 GitHub」，Vercel 偵測到變動會自動重新部署，1-2 分鐘新版就上線。不需要手動上傳任何東西。
用手機打開那個公開的網址，看到自己做的東西在外面真的能用，那個瞬間的成就感，會讓人想馬上動手做下一個東西。
這種信心比技術本身值錢，技術可以慢慢學，但相信自己做得出來，才會有下一次動手的動力。
不想自己做、想直接被帶怎麼辦？
上面這套流程自己跑完大概要 30-60 分鐘，前提是有耐心把整篇文章讀完，也願意在卡住的時候自己動手找問題。下面三條中了任何一條，可能就不適合自己跑。
- 沒時間自己研究、看長文會頭痛
- 想要一個專屬於你領域的工具（像是客戶新手引導的篩選器、產品推薦器、品牌測驗），不是公版範例
- 卡住的時候不想自己去 Stack Overflow 找答案
這時候可以直接找 不想自己研究我教你（規劃中）。
一對一帶你把整套跑完，從需求釐清、Claude Code 安裝、第一個專案上線，到公開紀錄過程的帳號開起來。
好處是不用自己找問題，不用讀長文，卡住的時候有人可以問。代價是要付費。
適合沒時間自己研究、不想看長文，又想直接從 0 做到 1 的人。
第一次用 AI 做網站，一步一步的完整流程。1) 用英文命名的資料夾開檔。2) Windows 跑 Set-ExecutionPolicy 處理電腦安全設定。3) 卡住先判斷是哪一層的問題（檔名、環境、部署、規劃模式）。4) 用「不要規劃，直接動手改 [檔名]」這句指令範本切換 AI 的模式。5) 五步建出條件式問答工具（投資測驗、MBTI、新手引導篩選器都能套）。6) GitHub 加 Vercel 五步部署上線，之後改完程式碼會自動重新部署。全部跑完 30-60 分鐘。沒時間自己跑，就看上面的 不想自己研究我教你。
名詞解釋
- Claude Code
- Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- GitHub
- 放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
- Vercel
- 把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- 部署（deploy）
- 把做好的網站或程式「推上線」讓所有人用得到的動作。
- 終端機（terminal）
- 「用文字指令操作電腦的視窗」的統稱。Mac 叫 Terminal，Windows 上就是 PowerShell，兩者角色相同。
- PowerShell
- Windows 內建的指令視窗：用打字下指令的方式操作電腦，Claude Code 在 Windows 上就在這裡面跑。按 Win + X 可以叫出來。
- 編碼（encoding）
- 電腦儲存文字的方式。Windows 中文環境常用 Big5，多數程式假設 UTF-8，兩邊對不上就變亂碼 — 所以資料夾、檔案建議用英文命名。
- 提交（commit）
- Git 的一個存檔點：把這次改動連同一句說明記錄下來，之後隨時可以回到這個版本。
- 無程式碼（no-code）
- 不寫程式、用拖拉跟設定做出應用的工具或方法。AI 代理出現後，「會描述需求」比「會不會寫程式」更關鍵。
如果內容對你有用就太好了
隨喜斗內
相關文章
▸ 常見問題
第一次用 AI 做網站要會寫程式嗎？
不需要。用 Claude Code 這種 AI 寫程式的工具，你的角色是「把需求講清楚」加「驗證對不對」，不是自己寫每一行程式碼。我自己是全職交易者，完全沒有寫程式背景，跟著本文一步一步做，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 免費方案最適合非工程師。流程是把專案推到 GitHub（免費），Vercel 用 GitHub 帳號登入，點 Add New Project 選那個專案，按 Deploy，1-2 分鐘給你一個 .vercel.app 網址。之後每次改完程式碼推到 GitHub，Vercel 偵測到會自動重新部署，不用手動上傳。完整步驟看本文第 6 節。
AI 卡在「規劃模式」一直不動手怎麼辦？
用明確的指令範本：「不要規劃，直接動手改 [檔名] 的 [功能]。需要的時候才回報進度。」AI 預設會先給規劃文件，看起來很專業但不會真的改到檔案。指令裡明講「不要規劃」，再指定具體的檔名跟功能，AI 才不會空轉。我自己每次要 AI 真的動工都會用這個範本，可以省掉 1-2 次無效規劃。詳細看本文第 4 節。
AI 第一次寫的 code 跑不起來怎麼辦？
先判斷錯誤在哪一層，再決定怎麼修。從最常見的排下來：1）資料夾命名有中文，改成英文。2）電腦安全設定擋住，PowerShell 跳紅字，跑 Set-ExecutionPolicy。3）瀏覽器快取沒清，用無痕視窗打開。4）AI 沒真的改到檔案，用「不要規劃，直接動手」指令。5）部署延遲，等 1-2 分鐘讓 Vercel 重新部署。找問題的順序看本文第 3 節，這個順序可以省 90% 的卡關時間。
第一個 AI 網站專案做什麼題材最好上手？
做「自己每天會用、家人會用、朋友需要」的小工具最好上手。技術門檻低，需求也清楚，做完馬上能用，新手建立信心最快。像是條件式問答工具（投資測驗、MBTI）、待辦清單、家庭行事曆、童裝庫存管理頁、家族 LINE 機器人。不要挑「我要做一個訂閱制產品來賺錢」這種題目當第一個，需求太大會中途放棄。我自己第一個專案是幫朋友的投資理財教育公司做的條件式問答工具，第二個是給老婆童裝店的庫存管理頁，都是身邊真實的需求。
看完這篇之前先確認:
- 完全沒寫過程式 想做網站不知從哪開始
- 願意花 30-60 分鐘 trial-and-error
- 想第一次就把東西公開出去 不藏私
- 想第一次就做到完美的人
- 想學工程師等級 best practice 的人
- 完全沒 30 分鐘可投資的人
做到要給別人用的時候，註冊、登入、資料庫這些會一次冒出來。想有人陪你把這段做到能上線，可以看產品上線陪跑（試營運價 NT$ 16,800）。