接到一個「聽起來很簡單」的案子
前陣子幫朋友公司改版網站，這案子挺有意思的。那是一間典型的小型 B2B 公司，用了十幾年的網站早該換了。朋友的需求很直接：內容架構不動，只要把那個「上個世紀」的視覺感換掉就好。我本來以為這就是個普通的改版案，但這次我決定換個方式玩，結果讓我對「網站建置」這件事有了完全不同的看法。
什麼是 Vibe Coding？
簡單說「Vibe Coding」，就是「用自然語言描述你想要的東西，讓 AI 生成對應的程式碼」。你不需要是工程師，也不需要懂語法。你只需要把需求說清楚 —— AI 負責把它變成可以跑的網頁。
最近 Vibe Coding 這個詞很紅，雖然聽起來有點玄，但我這次試著在 Google AI Studio 裡先幫自己 build 了一個「網站產生器」（我管它叫 SiteGen AI）。我沒直接叫 AI 生出成品，而是把網站的 Header、內容區塊、風格模組化，讓 AI 根據我的描述去組裝。
做完這場實驗，我最大的體悟是：AI 時代，寫程式的能力正在讓位給「描述需求」的能力。
以前做網站，大部分時間都在跟 HTML/CSS 奮鬥；但這次，只要我的描述夠具體，產出的結果就已經非常接近完工。比如 Hero Section 要用什麼色調營造專業感、CTA 按鈕要低調還是搶眼，這些以前要設計師跟前端反覆對齊的事，現在幾句 Prompt 就能搞定。
完整的工作流程，分成六步驟
改版前先跟朋友坐下來談清楚：要什麼風格？保留哪些內容？哪些頁面是必要的？這一步沒有捷徑，溝通愈清楚，後面的 AI 產出就愈準確。
既然是換皮，視覺素材就很重要。用 Midjourney 根據網站主題生成一批圖片與動態素材，讓整個網站看起來更有質感、更現代。
Google AI Studio 是 Google 推出的瀏覽器端 AI 開發環境，讓你可以直接測試和使用 Gemini 模型，不需要任何安裝。我直接在對話框裡描述我想建立的工具，AI Studio 就幫我把 SiteGen AI 建出來了。
工具建好後，開始填入網站需求：淺色系 Theme、純 HTML + CSS、共 8 頁、極簡乾淨設計搭配綠色與黃色調，以及每一頁的詳細版面描述。Prompts 愈詳細，第一次產出就愈接近目標。
把 AI 生成的網站程式碼下載到電腦，直接在瀏覽器打開確認效果。
最後把 Midjourney 產出的圖片優化後，換入對應位置，整個網站改版就正式完成。
效果比預期還好
整體下來，AI 生成的網站程式碼品質相當不錯，版面結構清晰、樣式也符合需求。
最重要的是 —— 它幫我省下非常多手刻的時間。傳統方式可能要花幾天的 coding 時間，這次透過 Vibe Coding 的流程，在 AI 這一段幾乎是「一次到位」。
真正花最多時間的，不是 Coding
這次最諷刺的是，Coding 反而成了整個專案裡最輕鬆、花最少時間的部分。我把力氣都花在跟朋友對需求、整理資料、想風格，還有去 Midjourney 生圖。對做了這麼多年網站的人來說，這感覺很新鮮——開發流程從「設計、切版、修改」變成了「描述、生成、重生版本」。
快是真的很快，但這也暴露了一個問題：如果技術不再是門檻，那你到底知不知道自己想做出什麼樣的東西？
我不覺得 AI 會取代開發者，它只是把我們從重複性的實作裡拉出來。Vibe Coding 讓我重新思考需求和使用者體驗，而不是陷在 Code 裡打轉。工作方式真的在變，這套基於 Google AI Studio 的 Workflow 我還在優化，等研究更透徹一點再跟各位分享細節。
專案耗時處：
- 圖片製作與調整
用 Midjourney 生成圖片不難，但要挑選、調整、讓它符合網站整體風格，還是需要時間反覆打磨。 - 與客戶反覆確認
需求、內容、方向 —— 這些東西溝通清楚，才能讓 AI 一次產出接近目標的結果。這個過程急不來。 - 整理需求、轉化成清晰的 Prompts
AI 的輸出品質，完全取決於你給的描述有多清楚。這次之所以能「第一次就滿意」，是因為在打 Prompts 之前，所有需求已整理得非常完整。