作者：吳恭漢 / 臺灣大學計算機及資訊網路中心程式組行政專員
你有沒有想過，寫程式其實可以像點餐一樣簡單？你不需懂任何一行Code，也不用背語法。只需要描述你想要的『氛圍』與『畫面』，剩下的工作AI會全權處理。
前言
你有沒有想過，寫程式其實可以像點餐一樣簡單？這就是最近矽谷爆紅的 "Vibe Coding"。
它的核心概念很迷人：你不需懂任何一行Code，也不用背語法。你只需要憑著直覺，描述你想要的『氛圍』與『畫面』，那些繁瑣的工作，AI會全權處理。
準備好了嗎？今天我們來做個小實驗。利用強大的Google AI Studio，我們從零開始，用你的『感覺』來寫出一個漂亮的靜態網頁。
壹.準備工具
- Google AI Studio: aistudio.google.com (免費，使用Google帳號登入即可)
圖1.Google AI Studio網頁畫面
- 記事本(或是任何電腦內建的文字編輯器)
貳.什麼是Vibe Coding？
傳統寫程式是：「我要在此處建立一個寬度200px的div，背景色碼為#f0f0f0...」Vibe Coding是：「給我一個像無印良品那種極簡風格的咖啡店首頁，要有一種溫暖、安靜的感覺。」重點在於描述「氛圍」與「你想要的是？」。
參.實戰教學：三步驟完成一個靜態網頁
步驟一：進入Google AI Studio
- 進入Google AI Studio網站
- 打開Google AI Studio。點選左上角的" Build "。
- 如下圖在右側Model選單中，建議選擇Gemini 3.0 Flash (速度極快)或Gemini 3.0 Pro(邏輯更強)。
圖2.Google AI Studio介面圖
步驟二：輸入你的"Vibe"提示詞(Prompt)
在對話框中，輸入以下這段指令（你可以隨意修改成你喜歡的主題！以下為範例說明）：
「請幫我寫一個單一檔案的HTML靜態網頁(包含 CSS 和 JavaScript)」
主題：一個個人的攝影作品集網站。Vibe(氛圍)：我想要一種『賽博龐克(Cyberpunk)』的風格。背景要是深色的，帶有霓虹紫和藍色的光暈，字體要有未來感。
功能：
- 首頁要有一個帥氣的標題寫著 "Night City Visions"。
- 中間有一個圖片展示區（用佔位圖片即可），滑鼠移過去要有發光特效。
- 底部有一個『聯絡我』的按鈕，按下去會跳出一個簡單的彈跳視窗。
- 請直接給我完整的程式碼讓我能一鍵複製到微軟的新增文字檔.txt改為index.html就可以使用。
- 如圖3.Google AI Studio指令輸入圖。
圖3.Google AI Studio指令輸入圖
步驟三：見證AI奇蹟
圖4.Google AI Studio網站預覽
- 按下Build。Google AI Studio會在幾秒鐘內吐出一長串程式碼和做出網站的預覽畫面如上所示，AI就生成出一個靜態網頁範例。
- 此範例重點要在左邊的對話框中再給一次提示詞：請直接給我完整的程式碼讓我能一鍵複製到微軟的新增文字檔.txt改為index.html就可以使用。
- AI就會直接產生一個index.html，如圖所示點擊Download就可下載回本地打開這個檔案，就可以是一個完整的靜態網頁。
圖5.index.html下載
肆.最終成果
圖6.完成網站首頁
伍.進階技巧：如果不喜歡怎麼辦？
這就是Vibe Coding的精隨：繼續對話。如果你覺得網頁太暗了，你可以直接對AI說：「現在的感覺太壓抑了，幫我改成『夏日海灘』的Vibe，顏色要明亮，字體要活潑一點。」AI會立刻重寫程式碼。你不需要去改CSS參數，你只需要調整你的「感覺」跟「想像」。
陸.結語
未來的程式設計，可能不再是關於「如何寫代碼」，而是關於「如何精準描述你的想像」。Google AI Studio 是一個極佳的新手練工遊戲場，讓你零成本體驗這種未來。從零開始，我們一起試著用 Vibe Coding 做一張電子卡片送給朋友吧！
參考文獻
- Google AI. (2024). Google AI Studio: Build with Gemini models. Retrieved from https://aistudio.google.com/
- Karpathy, A. (2024). The hottest new programming language is English. [Social Media Post]. X (formerly Twitter).
- Google DeepMind. (2024). Gemini 1.5 Pro: Our latest next-generation model.