人來過

用 Claude Code 做出你的第一個網站

7 步驟優化版 · 每步附提示詞 · 不會寫程式也能上線

← 回教學資源

做一個網站,只剩七個步驟

你現在看的這個網站,就是照下面這七步做出來的——沒有寫程式,全程跟 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

每改一個檔案都要你按一次同意,按到手軟。
打開自動執行模式(bypass permissions),交代完任務就去倒杯水,回來看成果。
開之前先確認:自動執行代表 AI 可以不經你同意就改檔案、跑指令。「方便」和「風險」是同一件事。兩種情況不要開:
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 說「我卡在這裡」。剩下的一成,歡迎來找我聊聊

下一步