新版舊版
用 Claude Code 做出你的第一個網站
7 步驟改良版 · 每步附提示詞 · 不會寫程式也能上線
黃志弘 Leo
2026-07-03 發佈 · 2026-10-08 更新 · 83 人看過
做一個網站，只剩七個步驟
你現在看的這個網站，就是照下面這七步做出來的，沒有寫程式，全程跟 Claude 用中文聊。每一步都給你可以直接複製的提示詞，新手最容易出錯的兩個地方也先標好了，照著走就行。
想要從「註冊帳號」開始的保母級流程，看另一篇12 個 prompt 完整教學；這一篇是讓成品「看起來像設計師做的」方法論。兩篇搭配用。
步驟一：從截圖開始，不要用形容的
STEP 1
「幫我做一個簡約、有質感、現代感的網站」——然後得到一個跟大家長一樣的 AI 網站。
找一個你喜歡的網站，整頁截圖，直接丟給 Claude Code：「照這個版型和感覺做，但內容換成我的主題。」
去 Dribbble、Awwwards 或任何你覺得好看的網站截一張圖。AI 看一張圖，比聽你形容一百句更準——因為「有質感」在你我心中是兩個不同的畫面，但截圖只有一個標準答案。
這是我喜歡的網站截圖。請照這個版型、配色和整體感覺，做一個我的網站。我的主題是：［你的主題，例如：手作甜點工作室］。內容先用合理的假文字佔位，之後我會換成真的。步驟二：給一份 design.md，整站才會像同一個人做的
STEP 2
每做一頁風格就漂移一次，首頁是極簡風、關於頁變成花花綠綠。
開工前先讓 Claude 寫一份 design.md（設計規範檔）：定好色彩、字體、間距、按鈕樣式，之後每一頁都遵守這份文件。
在動工之前，先根據我給你的截圖，幫我寫一份 design.md 設計規範檔，內容包括：主色與輔色（附色碼）、標題與內文字體、間距規則、按鈕與卡片的樣式。之後做任何頁面，都要遵守這份文件的規範。這一步是「成品看起來專業」的關鍵。每一頁都照同一份規範做，整站看起來才會像同一個人做的。
步驟三：讓 AI 訪談你，不要自己瞎猜要寫什麼
STEP 3
努力寫一大段需求說明，寫到一半就放棄，或漏掉重要的東西。
把角色反過來：讓 AI 當技術長，一次問你一個問題，把需求從你腦袋裡挖出來。
你是我的技術長，我是老闆。我不懂程式，請不要跟我講任何術語。你的任務是：一次問我一個問題，把這個網站需要知道的事情都問清楚（目標對象、要放哪些內容、希望訪客做什麼），全部問完之後再開始動工。你不用自己寫需求，回答它的問題就好。
步驟四：讓它自動執行，開始前先看這段
STEP 4
每改一個檔案都要你按一次同意，按到手軟。
用 auto mode 自動執行。2026 年 8 月起，新版 Claude Code 預設就是 auto mode，由另一個模型幫你審每個動作，不用一直按同意。交代完任務就去倒杯水，回來看成果。
開之前先確認：auto mode 會先讓另一個模型審過，再自己改檔案、跑指令。網路上也有人教開 bypass permissions 跳過所有確認，官方只建議在隔離的容器或虛擬機裡用，個人電腦不要開。兩種情況不要讓它自動執行：
1. 公司的電腦——先問過 IT 部門。
2. 這台電腦有重要資料又沒備份——先備份，或開一個乾淨的專案資料夾再說。
個人電腦＋獨立的專案資料夾＋重要東西有備份，這三個條件都成立，再放心開。
1. 公司的電腦——先問過 IT 部門。
2. 這台電腦有重要資料又沒備份——先備份，或開一個乾淨的專案資料夾再說。
個人電腦＋獨立的專案資料夾＋重要東西有備份，這三個條件都成立，再放心開。
步驟五：一次一小塊，先把首頁做對
STEP 5
一口氣列十二個需求，結果每一個都做一半。
一則訊息只交代一件小事：「先把首頁做好」，驗收完再說下一句。
我們一次只做一件事。現在先把首頁做到好：包含主視覺區、三個特色介紹、一個聯絡按鈕。做完停下來，我確認過再繼續。步驟六：壞掉就截圖，不用看程式碼
STEP 6
打開程式碼想找哪裡錯，看了半小時更混亂。
打開網頁用眼睛看，哪裡跑版、哪個按鈕沒反應，截圖丟回去：「修這個。」
AI 說「修好了」，不代表真的修好了。它回報完成，只代表它「認為」改完了。每一輪修完，你要自己重新整理網頁、親眼確認、每個按鈕都點一次。驗收永遠是你的工作，這一步不能外包給 AI。一頁通常來回 5、6 輪是正常的，不是你的問題。
步驟七：上線，拿到你的網址
STEP 7
以為上線要租伺服器、搞網域、設定一堆東西。
跟 Claude 說「幫我部署上線」，照著它給的步驟做，幾分鐘後你就有一個公開網址。用哪家免費空間都沒差，讓 Claude 幫你選就好。
網站我驗收完成了。請幫我部署上線，用免費方案就好，一步一步教我操作，用不懂程式的人聽得懂的方式講。第一版醜一點沒關係，先上線拿到網址，再慢慢改。
七步驟總表
1. 丟截圖，不要用形容的
2. 先要一份 design.md 設計規範
3. 讓 AI 訪談你：「一次問我一個問題」
4. 確認環境安全，再開自動執行
5. 一則訊息一件事，先做對首頁
6. 壞掉截圖丟回去，修完親自驗收
7. 部署上線，先求有再求好
常見問題
完全不會寫程式，真的做得出來嗎？
可以。整個流程你只做三件事：用中文對話、複製貼上提示詞、截圖回報問題。我自己沒學過程式，這個網站跟我的三個產品都是這樣做出來的。
要花多少錢？
Claude 訂閱費之外，做一個形象網站可以完全免費：Vercel 和 Netlify 的免費方案對個人網站綽綽有餘，網域想要自己的名字才需要花錢（一年幾百塊）。
卡住了怎麼辦？
九成的卡關用同一招解決：把你看到的畫面截圖，丟給 Claude 說「我卡在這裡」。剩下的一成，歡迎來找我聊聊。