Vibe Coding 做網站可行嗎？我用 Claude Code 做完一個 WordPress 站的真實經驗

Vibe Coding 做網站可行嗎？可行。我用 Claude Code 幫客戶從零做完一個 WooCommerce 電商站，含金流、商品上架、客製頁面，三天上線。

但「做出來」大概只佔整件事的 20%。剩下 80% 是部署、維運、安全、長期更新——這些 AI 不會自動幫你搞定。

這篇拆解我的真實經驗：哪些步驟 Vibe Coding 真的快到離譜，哪些地方你一定會卡住，以及為什麼我最後選 WordPress 當承接系統。

---

什麼是 Vibe Coding？

2025 年初，前 Tesla AI 總監 Andrej Karpathy 在 X 上丟出這個詞：你用自然語言描述需求，AI 幫你寫程式碼。你不用懂語法，只要把想法說清楚。

他的原話大意是：你沈浸在氛圍裡（vibe），看到結果不對就繼續跟 AI 對話修正，直到它能跑。

聽起來很夢幻，但實際操作後你會發現：Vibe Coding 快的不是語法，是槓桿——你用一句話換來一個雛形，用幾輪對話換來一個功能。真正考驗的是你能不能把需求拆小、說清楚。

比較項目	傳統開發	Vibe Coding
核心技能	程式語法、框架知識	需求描述力、結構化提問
開發速度	天～週	分鐘～小時
門檻	需要學 3-6 個月	能把話說清楚就能開始
除錯方式	讀 error log、查文件	把錯誤訊息貼給 AI
上限	取決於技術深度	取決於你對系統的理解

---

我用 Claude Code 做了什麼？

客戶是台中的甜點品牌「郭郭甜點」，需要一個 WooCommerce 電商站：商品展示、線上訂購、綠界金流、LINE 通知。

我用 Claude Code + WordPress MCP，全程用自然語言指令操作。

實際做了這些事：

① 頁面結構——用 Claude Code 生成首頁、關於我們、商品頁的 HTML 結構，再匯入 WordPress。一個頁面大約 5-10 分鐘。

② 商品上架——30 款甜點的品名、描述、價格、分類，我把 Excel 資料丟給 Claude Code，它透過 WooCommerce REST API 批次上架。手動要半天，AI 跑完 20 分鐘。

③ 金流串接——綠界 ECPay 的參數設定。Claude Code 幫我查官方文件、填參數、處理 callback URL。我只需要提供商店代號和 HashKey。

④ 客製功能——訂單成立自動發 LINE 通知、商品庫存低於 5 件發警示信。這些用 n8n + webhook 串。

時間表：

階段	花費時間
頁面結構 + 排版	3 小時
商品批次上架	20 分鐘
金流串接 + 測試	4 小時
自動化通知	2 小時
部署 + DNS + SSL	5 小時
測試 + 修 bug	3 小時
合計	約 17 小時（三個工作天）

---

Vibe Coding 哪些部分真的快？

① 頁面結構和排版——你跟 Claude Code 說「做一個甜點電商首頁，要有 hero banner、商品分類區塊、關於品牌故事、底部 CTA」，幾分鐘就有完整 HTML + CSS。來回修兩三輪就能用。

② 商品上架和描述生成——把品名和原料表丟進去，AI 幫你寫出有吸引力的商品描述，還能自動加上 SEO meta。30 款商品批次處理，手動做要一整天。

③ 金流設定——Claude Code 會去讀綠界的文件，幫你把 MerchantID、HashKey、HashIV 填到正確的位置，還會提醒你 callback URL 要設什麼。你省掉的是翻文件的時間。

④ 除錯——出現 error 直接把訊息貼給 AI，它通常能在 2-3 輪對話內定位問題。以前我可能要 Google 半小時的錯誤，現在 3 分鐘解決。

任務	AI 能做到什麼程度	你還需要自己做什麼
頁面 HTML/CSS	90% 可直接用	微調品牌細節
商品描述	80% 品質	確認語氣和正確性
金流參數設定	70% 自動填	提供金鑰、測試交易
SEO meta	85% 自動產	確認關鍵字策略
自動化流程	60% 生成	測試邊界情況

---

哪些地方一定會卡住？

做出來容易，養起來才是問題。以下是我實際踩到的坑：

① 部署和主機設定——DNS 解析、SSL 憑證、PHP 版本、伺服器環境變數。Claude Code 能告訴你指令，但它沒辦法幫你登入 Cloudways 控制台操作。光 DNS 傳播我就等了 4 小時。

② 第三方 API 串接的魔鬼細節——綠界 callback 的 CheckMacValue 驗證有個大小寫排序的坑，AI 第一次生成的程式碼沒處理好。LINE Notify 的 token 有效期問題，也是測試時才發現。這些都是文件沒寫清楚、要自己踩過才知道的。

③ 安全性——AI 生成的程式碼常見三個問題：權限檢查太鬆、資料驗證不夠完整、SQL 查詢沒有做好 sanitize。我每次讓 Claude Code 產出 WordPress 外掛，都會額外要求它用 current_user_can()、wp_nonce_field()、$wpdb->prepare() 這些標準做法。你要主動要求，AI 不會自動幫你守住這條線。

④ 長期維護——WordPress 核心更新、外掛相容性、PHP 版本升級、資料庫備份排程。這些不是 Vibe Coding 能解決的，是系統營運的基本功。客戶不會幫你想這些，但網站炸了找的是你。

面向	做出來（Day 1）	養起來（Day 30+）
頁面	AI 幾分鐘搞定	要改版、A/B test
金流	參數填完能跑	對帳、退款、爭議處理
安全	看起來正常	要定期掃描、更新修補
備份	沒人會在 Day 1 想到	出事才知道沒備份
效能	一開始很快	商品多了、流量來了就慢

---

為什麼我選 WordPress 當承接系統？

WordPress 全球市佔 43%。這個數字的意義是：你遇到的問題，幾乎都有人遇過，而且有解法。

我選 WordPress 承接 Vibe Coding 的產出，有三個理由：

① CMS 架構成熟——使用者管理、權限控制、內容版本、媒體庫，這些你不用自己寫。AI 生成的前端直接套進 WordPress 的骨架裡，省掉大量系統層的工作。

② 外掛生態——WooCommerce 處理電商、Yoast 處理 SEO、UpdraftPlus 處理備份。你不需要每個功能都從零開始。Vibe Coding 適合做客製的部分，標準功能交給外掛。

③ 可交接——這是最關鍵的。客戶將來要找別人維護，WordPress 工程師滿街都是。你用 Next.js 或自幹框架做出來的東西，交接成本是 WordPress 的三倍以上。

平台	上手速度	客製彈性	維護成本	交接難度	適合場景
WordPress	★★★★☆	★★★★★	★★★☆☆	★★★★★	電商、內容站、企業站
Next.js	★★☆☆☆	★★★★★	★★☆☆☆	★★☆☆☆	技術團隊、高度客製
Webflow	★★★★★	★★★☆☆	★★★★☆	★★★☆☆	形象站、Landing page
Shopify	★★★★☆	★★☆☆☆	★★★★★	★★★★☆	純電商、快速開店

---

一個人用 Vibe Coding 做網站的建議

① 先選系統，再開始寫——不要一頭栽進去做頁面。先決定你的網站要不要會員、要不要收費、要不要長期經營。如果答案有任何一個是「要」，請選一個有成熟 CMS 架構的系統。WordPress 是最穩的選擇。

② 把 AI 當加速器，不是替代品——Claude Code 能幫你省掉 60-70% 的手工時間，但剩下 30-40% 的判斷、測試、部署，你得自己來。心態上要把 AI 當作一個打字很快但不會幫你做決定的助手。

③ 從 Day 1 就想好維護方案——備份排程、更新策略、安全掃描。這些不性感，但決定了你的網站能不能活過第一年。我的做法是用 n8n 設排程自動備份到 R2，每週跑一次外掛相容性檢查。

如果你正在考慮用 AI 做網站、或已經做了但不知道怎麼養——歡迎訂閱《用減法瘦生活》電子報，我會持續分享 Vibe Coding + WordPress 的實戰經驗。需要一對一協助的話，也可以看看我的 WooCommerce 建置顧問服務。

---

如果你想試用 Claude Code，可以透過推薦連結註冊（雙方都會多拿到使用額度）。

常見問題

Vibe Coding 需要會寫程式嗎？

不需要會寫程式語法，但你需要有「把需求拆成步驟」的能力。能清楚描述你要什麼、按什麼順序做，AI 就能幫你產出。完全零基礎的人建議先從簡單頁面練起，不要一開始就做電商。

AI 生成的程式碼安全嗎？

看你怎麼用。AI 生成的 code 常漏掉權限檢查和資料驗證。如果你用 WordPress，可以要求 AI 遵循 WordPress Coding Standards，用內建的安全函式（nonce 驗證、prepare 語句、capability 檢查）。每次產出都要 review，不能直接上線。

Vibe Coding 跟 No-Code（Webflow、Wix）差在哪？

No-Code 工具讓你用拖拉做網站，快但彈性有限——想做的事超出模板範圍就卡住。Vibe Coding + WordPress 的組合可以在標準功能上用外掛，客製需求用 AI 生成程式碼，上限高很多，而且不被單一平台綁死。

一個人做得起來嗎？

做得起來，但你要想清楚「養的成本」。一個人做 WordPress 站，每個月大概要花 2-3 小時在維護上（更新、備份、安全檢查）。如果加上內容經營和 SEO，一週至少 5-8 小時。建議用自動化工具（n8n、Claude Code）把重複性工作壓到最低。

---

延伸閱讀：

• [[claude-code-guide-2026|Claude Code 完整教學：從安裝到實戰]]
• [[wordpress-plugins-2026|2026 WordPress 必裝外掛推薦]]
• [[woocommerce-ecpay|WooCommerce 綠界金流串接教學]]
• [[claude-code-ai-agent-guide|用 Claude Code 打造你的 AI Agent]]