從 Vibe Coding 到實踐：我如何利用 Google AI 系列工具重塑個人網站

從 Vibe Coding 到實踐：我如何利用 Google AI 系列工具重塑個人網站¶

這篇文章的靈感源自於 YouTube 頻道「與工程師下班有約」的一段精彩影片。影片中示範了一系列 Google 開發的 AI 網頁開發工具 — — 從入門級的 Gemini 到進階的 Google AI Studio，以及展現「Vibe Coding」魅力的 Antigravity。

看到這些強大的工具開放給大眾使用，我決定親自下場動手實驗，以下是我借鏡後的實作過程與心得。

第一階段：Gemini + Canvas — — 快速生成現代化 UI¶

我過去曾使用 Hugo 框架開發個人網站，當時主要是直接套用既有模板。這次我想嘗試看看「AI 眼中」現代化的前端介面長什麼樣子。

• 實作方式：我直接將個人部落格網址丟給 Gemini，請它讀取內容後生成適合的 UI 介面。接著，我利用 Google Sites 這個直觀的架站工具進行部署。
• 成果展示：我的個人簡介網頁
• 心得：在這個階段，使用者幾乎不需要具備深厚的程式基礎，就能輕鬆上手並完成高品質的網頁視覺設計。

第二階段：Google AI Studio — — 打造客製化工具¶

接下來，我進入了 Google AI Studio 的領域。比起一般對話機器人，這裡提供了更強大的客製化空間來規劃自己的 Project。

• 實作亮點：近期 Google 的 Gemini 2.0 Flash (即大家熱議的 Nano Banana) 表現非常亮眼。我要求 AI 幫我建立一個具備 UI 介面的「影像處理工具」，並透過串接個人的 API Token 來提供運算能力。這讓我意識到，AI 不只能寫網頁，更能快速產出具備功能的微型應用。

第三階段：Vibe Coding — — 複雜架構的深度整合¶

最後，我進入了最令開發者興奮的 Vibe Coding 領域。如果你曾體驗過 Cursor 的強大，那麼 Antigravity 的上手門檻會非常低。

• 挑戰任務：我要求 AI 讀取我現有的 Hugo 網站架構，並將第一階段生成的現代化 UI（我覺得設計得非常出色）融入到目前的部落格中。
• 過程與心法：這個過程並非一蹴而就，需要與 AI 反覆溝通、除錯。我發現 AI 對於「公開且通用的架構」理解力極強。只要你有足夠的耐心與毅力與它協作，即便架構複雜，AI 也能精準地完成修改。

結語：未來開發者的核心競爭力¶

經過這次實作，我更加確信：在不遠的未來，「寫程式的能力」依然重要，但「懂架構」與「理解邏輯」將變得前所未有的關鍵。

現在的開發重點已轉向：

• 精準描述需求：如何跟 AI 互動，決定了你的生產力。
• 判斷需求的合理性：唯有了解技術領域（Domain Knowledge）與專案管理，才能提出 AI 辦得到、且符合邏輯的需求。
  與 AI 協作是事半功倍的利器，持續精進程式底層邏輯與專案架構思維，將是我們在 AI 時代最重要的修煉。