【AI 新趨勢】什麼是Vibe Coding?用 Gemini 實現出一張嘴寫程式

更新 發佈閱讀 6 分鐘
vocus|新世代的創作平台

您是否曾經有過這樣的時刻: 腦中跳出一個絕佳的工具點子(例如:「如果有個網頁能自動幫我算學生成績」或「好想做一個專屬的記帳介面」),但因為不懂寫程式(Coding),最後只能默默放棄?

今天湯姆士老師要介紹一個正在席捲科技圈的新概念—— "Vibe Code"(氛圍編碼),以及如何利用 Google Gemini 在幾分鐘內實現它。

所謂的 "Vibe Code",簡單來說就是:您不需要懂程式語法,您只需要負責把「感覺(Vibe)」和「需求」說出來,AI 就會負責把程式碼寫好並跑給您看。 這徹底改變了我們創造工具的方式。

這不是單純的產生程式碼片段,而是一個 所見即所得(What You See Is What You Get)的全新創作體驗。



🚀 體驗 "Vibe Code with Gemini"

過去的作法:以前我們用 ChatGPT 寫程式,通常是:「AI 給我程式碼」→「複製」→「貼到我的編輯器」→「跑不動」→「再問 AI」。

全新的解法:在 Google AI Studio 中,我們可以直接體驗這種開發模式。它定位介於「聊天機器人」與「專業程式開發環境(IDE)」之間。

Vibe Code with Gemini 的流程裡,這一切都在同一個視窗完成:

  1. 描述 Vibe(想法與感覺)
  2. Gemini 寫程式 + 預覽畫面(立刻跑給您看)。
  3. 即可直接試用並修改

✨ 為什麼該嘗試 Vibe Code?(四大亮點)

1. Prompt-to-App(一句話生成應用)

您不需要懂 HTML、CSS 或 JavaScript。您只要說:「幫我做一個計算每月開銷的 App,要用圓餅圖呈現數據,風格要簡約現代」,幾秒鐘後,一個完整的互動網頁就會出現在右側視窗。

2. 對話式微調(用說的就能改)

這是 Vibe Code 最方便的地方。如果您覺得預覽畫面中的某個按鈕顏色太醜,或想把標題移到中間,您不需要去翻找那是第幾行程式碼。只需要看著預覽畫面,在對話框直接打字說:「把那個藍色的送出按鈕改成紅色」或「把標題字體放大一點」,AI 就能理解您指的是哪個區塊並進行精準修改。就像身旁坐了一位隨叫隨到的工程師一樣。

3. 即時迭代(Iterative Refinement)

App 做出來後,您可以像跟工程師開會一樣繼續對話:「這裡加一個『匯出成 Excel』的功能」、「字體換成看起來更活潑一點的」。它會即時更新,讓您邊玩邊改,直到那個 "Vibe" 對了為止。

4. 不只是玩具:完整的程式碼控制權

對於懂一點程式的朋友,Gemini 不會把您當傻瓜。您可以隨時切換到 "Code" 分頁,查看它生成的 React 、TypeScript 或 JavaScript 程式碼,甚至手動微調。完成後,還可以一鍵部署(Deploy)Google Cloud Run 或匯出到 GitHub。



🛠️ 手把手教學:如何開始您的 Vibe Code 之旅

現在,我們就來實際操作一次。

步驟一:進入工作台 前往 Google AI Studio 並登入帳號。

步驟二:輸入您的咒語(Prompt) 在對話框輸入「點子」。

範例 Prompt: 「請幫我製作一個『番茄鐘工作計時器』。介面要簡潔,要有 25 分鐘專注和 5 分鐘休息的按鈕,並且在倒數結束時發出提示音。」

vocus|新世代的創作平台

步驟三:測試與微調 右側會出現您的工作計時器。試著點點看(Preview / Code切換)。

生成APP完成:檢視程式碼

生成APP完成:檢視程式碼

生成APP完成:檢視使用者介面

生成APP完成:檢視使用者介面

  • 有沒有發現問題? 在對話框試說:「倒數計時的字太小了,請放大兩倍。」
vocus|新世代的創作平台
  • 想要更多? 說:「請增加一個『工作清單』功能,讓我可以寫下今天要專注的任務。」
vocus|新世代的創作平台

步驟四:分享成果 經過功能測試且也滿意後,可點擊右上角的 "Share"(分享),您會得到一個網址,直接傳給朋友或同事,他們就能使用您剛剛做出來的 App 了!當然也可以點擊右上角的 "Deploy"(佈署)註1,您可以把APP公開在雲端上,且會開出一個伺服器來運行這個APP。

註1:寫好的程式或應用程式,從開發者的電腦移到伺服器或雲端,使其能被使用者透過網路存取、運行,這過程包含環境設定、上傳程式碼、啟動服務等一系列動作。 當然Google會跟您收取雲端使用費的。
vocus|新世代的創作平台

按下分享後,即可分享專案

vocus|新世代的創作平台

當然,也可以進行Advanced share permissions,細步調整權限

vocus|新世代的創作平台



💡 實用場景推薦(給不同領域的您)

  • 教育工作者: 快速製作互動式單字卡(Flashcards)、隨堂小測驗系統,或是視覺化的物理原理模擬圖。
  • 行政/PM: 製作專案進度儀表板(Dashboard)、簡易的 CRM 客戶資料整理工具。
  • 個人生活: 旅遊行程規劃表、個人記帳本、習慣追蹤器(Habit Tracker)。
  • 創業者/開發者: 用最快速度做出 MVP(最小可行性產品)原型,拿去向投資人或團隊展示概念。
  • 其他議題:可以想想工作上好想要什麼工具,不妨現在自己來開發吧!



結語

AI 工具的演進速度極快,從「對話」到「生成圖片」,現在已經進展到 "Vibe Code" 的時代。這意味著,技術門檻不再是阻礙,您的想像力才是唯一的限制。現在就打開 Google AI Studio,試著把您擱置已久的那個點子,用最直覺的方式實現出來吧!

(歡迎在下方留言分享您用 Vibe Code 做出了什麼有趣的 App!)

留言
avatar-img
湯姆士老師的創作空間
113會員
26內容數
以 AI 研究與教育創新為核心,我在這裡分享創作、教學與實驗成果。希望透過作品與想法,陪伴每位學習者與創作者一起探索、一起提問、一起把靈感變成可能。歡迎走進這個充滿好奇與創造力的空間,一起讓未來更靠近我們一點。
2025/12/09
本文以益生菌補充品數據集為例,引導讀者從資料清理、變數轉換、探索性數據分析到挖掘洞察,完整走一遍零售業數據分析流程。透過 AI 工具的協作,揭示「終端貨架陳列」、「地區業務代表」以及「試吃活動」對銷售量的關鍵影響,並證實了「人」與「位置」在實體零售中的重要性,同時也打破了價格戰迷思。
Thumbnail
2025/12/09
本文以益生菌補充品數據集為例,引導讀者從資料清理、變數轉換、探索性數據分析到挖掘洞察,完整走一遍零售業數據分析流程。透過 AI 工具的協作,揭示「終端貨架陳列」、「地區業務代表」以及「試吃活動」對銷售量的關鍵影響,並證實了「人」與「位置」在實體零售中的重要性,同時也打破了價格戰迷思。
Thumbnail
2025/12/09
還在為 VLOOKUP 卡關而焦慮?本文章教你用 AI 取代死背公式!只要掌握「資料在哪、做什麼、放哪裡」的黃金三角指令,就能讓 AI 幫你搞定飲料統計、名單清洗與跨表合併等棘手任務。在 AI 時代,你不必是 Excel 函數大師,只要懂得精準發號施令,就能從「操作員」晉升為高效的「問題解決者」!
Thumbnail
2025/12/09
還在為 VLOOKUP 卡關而焦慮?本文章教你用 AI 取代死背公式!只要掌握「資料在哪、做什麼、放哪裡」的黃金三角指令,就能讓 AI 幫你搞定飲料統計、名單清洗與跨表合併等棘手任務。在 AI 時代,你不必是 Excel 函數大師,只要懂得精準發號施令,就能從「操作員」晉升為高效的「問題解決者」!
Thumbnail
2025/12/09
本篇文章是一個實戰教學,示範如何利用 Google 試算表與 Gemini,將臺灣公開的空氣品質指標 (AQI) 數據,從下載、整理、分析、生成資訊圖表,一路到產出簡報大綱及製作簡報,無需程式碼,僅透過提示詞,即可快速將數據轉化為具備洞察力的視覺化作品,大幅提升數據分析與溝通的效率。
Thumbnail
2025/12/09
本篇文章是一個實戰教學,示範如何利用 Google 試算表與 Gemini,將臺灣公開的空氣品質指標 (AQI) 數據,從下載、整理、分析、生成資訊圖表,一路到產出簡報大綱及製作簡報,無需程式碼,僅透過提示詞,即可快速將數據轉化為具備洞察力的視覺化作品,大幅提升數據分析與溝通的效率。
Thumbnail
看更多
你可能也想看
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
前幾天分享過我利用 AI 做出的幾個實際用途範例,其中我每天都很依賴的就是自動抓新聞的小程式。每次執行都只需幾秒,會自動去抓最新的新聞,幫我省下非常多瀏覽各新聞網站的時間,而且可以自己管理要抓哪些新聞,避開我不想看的垃圾資訊。
Thumbnail
前幾天分享過我利用 AI 做出的幾個實際用途範例,其中我每天都很依賴的就是自動抓新聞的小程式。每次執行都只需幾秒,會自動去抓最新的新聞,幫我省下非常多瀏覽各新聞網站的時間,而且可以自己管理要抓哪些新聞,避開我不想看的垃圾資訊。
Thumbnail
【人工智慧技術進展與應用挑戰】— 創新、風險與未來趨勢! AI技術正快速融入各領域,從OpenAI的GPT-5更新到Apple的智慧硬體計劃,這些突破不僅改變了生活方式,也帶來了技術應用的潛在風險與社會影響。快來了解最新動態!
Thumbnail
【人工智慧技術進展與應用挑戰】— 創新、風險與未來趨勢! AI技術正快速融入各領域,從OpenAI的GPT-5更新到Apple的智慧硬體計劃,這些突破不僅改變了生活方式,也帶來了技術應用的潛在風險與社會影響。快來了解最新動態!
Thumbnail
Google推出最新Gemini 2.5 Pro 谷歌最近推出了其最新的人工智慧模型——Gemini 2.5 Pro,這一升級版本在多個領域展現了卓越的性能,並在市場上取得了顯著的競爭優勢。 以下是關於這一升級的主要亮點: 主要特點 * 性能提升: * 整體 Elo 分數提
Thumbnail
Google推出最新Gemini 2.5 Pro 谷歌最近推出了其最新的人工智慧模型——Gemini 2.5 Pro,這一升級版本在多個領域展現了卓越的性能,並在市場上取得了顯著的競爭優勢。 以下是關於這一升級的主要亮點: 主要特點 * 性能提升: * 整體 Elo 分數提
Thumbnail
Google 於2025年6月5日推出了 Gemini 2.5 Pro Preview 06-05 Thinking ,這款被譽為 Google 迄今最智能的AI模型,帶來了令人矚目的功能改進。TN科技筆記將帶領各位介紹這款模型的特色、效能表現及應用場景。
Thumbnail
Google 於2025年6月5日推出了 Gemini 2.5 Pro Preview 06-05 Thinking ,這款被譽為 Google 迄今最智能的AI模型,帶來了令人矚目的功能改進。TN科技筆記將帶領各位介紹這款模型的特色、效能表現及應用場景。
Thumbnail
Google 在 2025 年 8 月 1 日正式推出的 Gemini 2.5 Deep Think,讓 AI 能夠像人類專家一樣,花費「思考時間」來處理極度複雜的難題。對於所有希望利用 AI 解決真正棘手問題的人來說,這是一個不能錯過的發展,快跟TN科技筆記一起來看看吧!
Thumbnail
Google 在 2025 年 8 月 1 日正式推出的 Gemini 2.5 Deep Think,讓 AI 能夠像人類專家一樣,花費「思考時間」來處理極度複雜的難題。對於所有希望利用 AI 解決真正棘手問題的人來說,這是一個不能錯過的發展,快跟TN科技筆記一起來看看吧!
Thumbnail
我自己經常看到某些 YouTube 影片的內容很吸引我,但是看到那十幾二十分鐘起跳的長度就望而卻步。更何況如果想看很多影片的話咧?實在沒辦法花時間全部看完 (懶)。其實我們真正需要的可能就影片中的那幾個重點,AI 可以幫大忙,把影片內容濃縮成一張清楚的資訊圖,一目了然。
Thumbnail
我自己經常看到某些 YouTube 影片的內容很吸引我,但是看到那十幾二十分鐘起跳的長度就望而卻步。更何況如果想看很多影片的話咧?實在沒辦法花時間全部看完 (懶)。其實我們真正需要的可能就影片中的那幾個重點,AI 可以幫大忙,把影片內容濃縮成一張清楚的資訊圖,一目了然。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
[AI代理程式] AWS與Anthropic合作,推出AI市集,推動企業應用普及 [影音生成技術] Google Gemini新增圖像轉視訊功能,並導入數位浮水印技術 [智慧硬體] Apple傳聞推出平價MacBook與更薄iPhone 17 Air
Thumbnail
[AI代理程式] AWS與Anthropic合作,推出AI市集,推動企業應用普及 [影音生成技術] Google Gemini新增圖像轉視訊功能,並導入數位浮水印技術 [智慧硬體] Apple傳聞推出平價MacBook與更薄iPhone 17 Air
Thumbnail
深度解析 Google 最新的 AI 平台 Gemini Enterprise。它如何透過「電腦使用模型」讓 AI 代理能像人一樣操作軟體,全面自動化枯燥的辦公室工作流程,以及它將為企業帶來哪些機會與挑戰。
Thumbnail
深度解析 Google 最新的 AI 平台 Gemini Enterprise。它如何透過「電腦使用模型」讓 AI 代理能像人一樣操作軟體,全面自動化枯燥的辦公室工作流程,以及它將為企業帶來哪些機會與挑戰。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News