跳至主要內容
Vibe Coding:不會寫程式也沒關係,用自然語言打造你的數位作品

Vibe Coding:不會寫程式也沒關係,用自然語言打造你的數位作品

TL;DRVibe Coding 是用自然語言與 AI 對話來創造數位作品的全新方式——你不需要會寫程式,只要能清楚描述需求。本文涵蓋從 1956 年 AI 誕生到今天生成式 AI 時代的演進、核心開發流程、Lovable/Cursor/Claude Code 等工具比較,以及有效實踐的五大關鍵。AI 時代的核心能力是提問、溝通、判斷、學習與創意——這些是每個人都能精進的軟實力,不是技術門檻。更多生產力系統

從 1956 年到今天:AI 不是新鮮事,但這次不一樣

很多人以為 AI 是這兩三年才出現的新玩意兒,其實不然。早在 1956 年,人工智慧的概念就已經問世,至今已有將近 70 年的歷史。只不過,過去的 AI 是工程師和少數專家學者的專利,一般人幾乎感受不到它的存在。然而,這兩三年生成式 AI 的爆發,徹底改變了這個格局——它不再遙不可及,而是跟我們每個人的工作與生活息息相關。

AI 的演進:從1956到生成式 AI 時代 ▲ AI 的演進:從 1956 到生成式 AI 時代

現在的 AI 可說是「十八般武藝,樣樣精通」,不只能寫文章、畫圖,還能設計網站、進行數據分析和協助學習,甚至完成各種技術開發。過去我們認為這些是工程師才能做的事,如今各行各業的人——包括老師、行政人員或自由工作者——都能透過 AI 來進行協作。這誠然是一個巨大的轉變,也是一個前所未有的機會。

AI 時代的及格分數:不再是 60 分

在 AI 還沒有普及之前,我們對工作成果的及格標準大約是 60 分。但現在,AI 隨便幫我們做一做,可能就有 60 分的水準了。這意味著,我們的及格門檻已經被拉高到 80 分、85 分,甚至 90 分。可想而知,未來的競爭只會愈來愈激烈,我們必須不斷提升自己的能力,才能脫穎而出。

AI 時代最重要的五項核心能力:提問能力、溝通能力、判斷能力、學習能力與創意能力。這些不是技術性的門檻,而是每個人都能透過練習來精進的軟實力。

AI 時代五大核心能力 ▲ AI 時代五大核心能力

那麼,AI 時代最重要的核心能力是什麼?我認為有五項:提問能力、溝通能力、判斷能力、學習能力與創意能力。這五項能力不是技術性的門檻,而是每個人都能透過練習來精進的軟實力。未來學家艾文・托佛勒(Alvin Toffler)曾說過一句名言:

「未來的文盲不是不會讀寫的人,而是不會學習的人。」

這句話在 AI 時代更加適用,值得我們相互勉勵。

什麼是 Vibe Coding?用說的方式寫程式

簡單來說,Vibe Coding 是一種全新的創作方式——你不需要學會複雜的程式語言,只要用自然語言跟 AI 對話,就能讓它幫你生成程式碼。「Vibe」的意思是氛圍、感覺,所以 Vibe Coding 就是「把你要的感覺說出來,讓 AI 幫你實現」。

什麼是 Vibe Coding? ▲ 什麼是 Vibe Coding?

以往我們要寫程式,需要懂邏輯、懂各種程式語言的語法,學習門檻非常高。但現在,只要你能把想要的結果說得清楚,AI 基本上就能幫你完成。如此一來,不僅大幅降低了進入程式設計世界的門檻,也縮短了想法與實現之間的距離。

舉個例子:我對音樂很感興趣,但我不是音樂系出身,甚至連五線譜都看不太懂。可是透過 Vibe Coding,我有機會做出一個音樂相關的 App。話說回來,這就是 Vibe Coding 促進跨領域創新的魅力所在。

為什麼要學 Vibe Coding?

嗯,原因很簡單——從小到大,我們每個人都有很多想法、夢想,但過去這些往往需要請專家來幫忙實現,甚至要花很多時間和金錢。如今,透過 Vibe Coding 的方式,我們可以在幾個小時內就做出一個雛形或一個網站,完全不假他人之手。

Vibe Coding 三大優勢 ▲ Vibe Coding 三大優勢

Vibe Coding 的三大優勢,可說是非常明顯:第一,它很容易入門;第二,它可以非常快速地做出雛形;第三,迭代修改相對簡單。以我自己開設的 Vibe Coding 課程為例,學員只要三個小時就能做出自己的成品——而且,這些學員大多沒有任何程式設計背景。

先求有,再求好。如果你剛開始接觸 Vibe Coding,可以先從你熟悉的東西或規模較小的頁面開始練習。

那麼,Vibe Coding 適合做什麼?個人網站、作品集、銷售頁、報名網頁、小遊戲或心理測驗……這些都非常適合。不過,如果你想要做購物網站或金流系統這類需要考量資訊安全的複雜專案,我建議必須先進行更審慎的規劃,甚至需要專業工程師的協助。

我的建議是:如果你剛開始接觸 Vibe Coding,可以先從你熟悉的東西或規模較小的頁面開始練習。舉例來說,開發一個網頁小遊戲、一個心理測驗都很好,慢慢累積經驗和心得之後,再挑戰更大規模的專案。先求有,再求好。

Vibe Coding 的核心流程

Vibe Coding 的流程其實很直覺,可以歸納為五個步驟。

Vibe Coding 核心流程 ▲ Vibe Coding 核心流程

首先,你要有初步的想法或藍圖。如果可以的話,準備一些紙筆,畫出你的草稿或藍圖,甚至用手機拍下來傳給 AI 參考。接著,把你的需求描述清楚——這一步非常關鍵,因為你描述得愈精準,AI 就愈能理解你想要什麼?

然後,讓 AI 幫你生成草稿。第一版的作品你可能不會很滿意,但沒關係,我們可以持續優化。接下來就是不斷的迭代修改,直到滿意為止。最後,再把成品部署上線。

過去用傳統的方式來開發一個網頁作品,可能至少要兩三天。現在透過 Vibe Coding,也許兩個小時就會有初步的結果。

過去用傳統的方式來開發一個網頁作品,可能至少要兩三天。現在透過 Vibe Coding,也許兩個小時就會有初步的結果。這個效率的提升,自然是非常驚人的。

在這個過程中,你其實同時扮演了三個角色:工程師(負責開發)、產品經理(負責規劃)以及行銷企劃(負責呈現)。話說回來,這正是 AI 時代跨領域發展的最佳體現。

有效 Vibe Coding 的關鍵要素

要讓 Vibe Coding 的效果最大化,有幾個關鍵要素值得特別注意。

有效 Vibe Coding 的五大關鍵 ▲ 有效 Vibe Coding 的五大關鍵

第一,需求描述要清楚。 不要只是告訴 AI「請你幫我做一個很漂亮的網站」——AI 很難理解什麼叫「很漂亮」。你需要給它具體的方向:要什麼配色、什麼排版、什麼風格。如果你能直接提供色碼(比如 #2196F3),或是說「我要像 Facebook 那樣的藍色」,AI 就能更準確地理解你的需求。

第二,不要太貪心。 不要一次就把所有功能都丟給 AI,而是按照計畫逐步推進。就像小時候玩積木一樣,可以先做一個小東西,慢慢堆積起來。把大目標拆解成小任務,逐一完成。

第三,每做一個小功能都要驗證。 Code Review(程式碼檢核)很重要。你可以自己檢查,也可以讓 AI 檢查,甚至可以把程式碼貼給另一個 AI 工具交叉驗證。當然,如果是大型專案,還是要請真正的專家來檢核會比較保險唷!

第四,做好版本控制與備份。 這一點我要特別強調。因為 AI 有時候會出錯、會改錯方向,如果你沒有做好備份,可能會讓之前的努力付諸東流。

第五,保持耐心,享受過程。 AI 的確很厲害,但它難免會有幻覺或出錯。有時候你需要反覆溝通、多次迭代,這些都是正常的。重要的是保持耐心和好奇心,享受 Vibe Coding 所帶來的創作樂趣。


🎯 想親手打造你的第一個數位作品?

Vibe Coding 實戰工作坊 中,你將在三小時內從零開始,用自然語言做出自己的網站或 App——不需要任何程式設計背景。無論你是老師、行銷人、自由工作者還是創業者,都能在這裡找到屬於你的創作方式。

Vibe Coding 實戰工作坊

👉 立即報名 Vibe Coding 實戰工作坊


善用參考範例,找到自己的風格

如果你想做一個網站或小遊戲,看到別人有不錯的作品,當然可以拿來參考。不過,你要先提示 AI 你要參考的是哪個部分——是配色、排版、互動方式,還是整體風格。事先把方向說清楚,AI 才不會「亂學」。

像我自己最近重新打造了個人網站(vista.tw),我就慢慢發展出自己喜歡的色系和風格。我甚至為上稿流程訂定了一套規範,讓 AI 按照我的規則來執行,不需要每次反覆提示。我建議大家也可以慢慢建立自己專屬的模板和提示詞,這樣日後的開發效率會大幅提升。

好的提示詞怎麼寫?

提示詞(Prompt),可以說是人跟 AI 溝通最重要的橋梁。好的提示詞會直接影響 AI 輸出的品質。如果你到現在還是用比較簡單的方式跟 AI 溝通,成品可能就只有五、六十分。但如果你願意多花一點心思精煉你的提示詞,成果的差距會非常顯著。

好的提示詞 (Prompt) 怎麼寫? ▲ 好的提示詞 (Prompt) 怎麼寫?

一個好的 Prompt,應該包含幾個要素:清楚的情境設定、具體的任務描述、足夠的細節、上下文脈絡,以及可驗證的產出標準。你可以想像自己在跟一個很聰明但不認識你的助理說話,如果你說得愈清楚,它做出來的東西就會愈接近你要的。

不要只是說「我要專業的」、「我要活潑的」——這些都太籠統了。你要告訴 AI 具體的方向:標題字體要多大、顏色要什麼色碼、版面是兩欄還是三欄。

在描述設計風格時,不要只是說「我要專業的」、「我要活潑的」——這些都太籠統了。你要告訴 AI 具體的方向:標題字體要多大、顏色要什麼色碼、版面是兩欄還是三欄、視覺風格是文青風還是科技風。指示越明確,AI 就越能做出讓你滿意的作品。

拆解任務:像堆積木一樣開發

在修改流程上也是一樣。不要只說「這邊改一下」、「那邊調整一下」,而是要明確告訴 AI:「把標題字體改成 24px、顏色改成 #333333、三欄改成兩欄」。先掌握大方向,再修飾細節,這是最有效率的做法。

拆解任務:像堆積木一樣開發 ▲ 拆解任務:像堆積木一樣開發

常用 Vibe Coding 工具大盤點

目前市面上有很多 Vibe Coding 工具可以選擇,以下介紹幾個我認為值得關注的。

Vibe Coding 工具比較 ▲ Vibe Coding 工具比較

Lovable 是一個介面非常友善、適合初學者的工具。它的操作介面比較可愛、活潑,不像其他工具那麼「黑漆漆」的讓人有壓力。你只要用自然語言描述你的需求,它就能快速生成成品。比方說,你想做一個俄羅斯方塊的網頁小遊戲,只要這樣告訴它,它就能很快做出來。Lovable 有免費和付費版本,初學者可以先用免費帳號試試看。不過它的功能相對基礎,如果要做比較複雜的應用,可能需要考慮其他工具。

Claude Code 是 Anthropic 推出的專業程式開發工具。以目前來說,它可以說是 Vibe Coding 領域的王者。它的功能非常強大,能做出很厲害的東西。不過,它的學習曲線稍微陡峭一些,一開始的命令列介面(Command Line)可能會讓初學者感到有壓力。但一旦你跨過這個門檻,之後就能一路通行。Claude Code 基本上需要付費使用,Pro 方案每月 17 美金,如果你認真寫程式,Pro 的額度可能不夠用。更高階的 Max 方案分為每月 100 美金和 200 美金兩種,各位可以根據自己的需求和預算來評估。

Codex 是 OpenAI(ChatGPT)推出的專門寫程式的工具,它有專屬的 App,程度也相當不錯。我有位好朋友本身是時間管理的講師,原本完全不懂程式設計,自從上了我的課之後,現在就專門用 Codex 來開發自己的 App,做得相當不錯。

Cursor 也是一個非常有名的 Vibe Coding 工具,不過它對非技術背景的用戶來說,初始設定會稍微複雜一點,需要各位自行評估。

Google AntiGravity(反重力)是 Google 推出的工具,我也很推薦。它目前是免費的,背後有 Google 的技術支援,有一定的水準。介面雖然乍看之下有點複雜(三欄式、英文介面),但只要跨越這個門檻,用起來就很順利了。我自己所開設的 Vibe Coding 課程,主要就是教這個工具。根據我的教學經驗,來自不同背景的學員——無論是律師、大學老師、音樂老師——都能很快上手。

怎麼選擇適合自己的工具?

工具這麼多,到底該怎麼選?我建議從三個面向來評估:使用門檻、功能完整度和價格。

如果你是初學者,Lovable、Codex 或 AntiGravity 都是不錯的入門選擇。如果你對 Vibe Coding 有高度興趣,想要好好鑽研,那我強烈推薦 Claude Code。不過,AI 的發展速度非常快,每天都有新的變化,兩三個月後的市場格局可能又會不同,所以保持開放的心態很重要。

我的建議是:一開始先申請幾個免費帳號試試看,等到行有餘力或真的想深入鑽研時,再升級到付費方案。不見得一開始就要追逐最新、最好的工具,找到最適合自己的才是關鍵。

另外,我要提醒大家注意 AI 的使用成本。我有些學員上完課回去之後,興致勃勃地開始設計作品,結果因為不斷修改迭代,很快就把免費額度用完了。所以在使用前,建議先評估自己的需求和預算,合理分配資源。

工具只是手段,你的創意才是核心

這兩三年,很多人問我:「老師,到底用什麼 AI 工具才好?」我的回答始終如一:工具只是手段,你的創意才是核心。

工具只是手段 ▲ 工具只是手段,你的創意才是核心

很多人一直在追逐最新、最好的工具,卻忽略了最重要的事情——你自己的想法、你的創意、你想要解決的問題。無論你用什麼工具,最終決定作品好壞的,還是你的判斷力和創造力。

我鼓勵大家,在看書或聽了很多講座之後,最重要的是實際動手做。不用怕犯錯,反正 AI 不會罵你,它還滿有耐心的。多做、多錯的過程中,你自然會學到很多,也會愈來愈有感覺。只要做一陣子,你就會發現 Vibe Coding 是件非常有趣的事——即便你不是資工系或資管系出身,也能慢慢對程式設計產生概念,並從中找到許多樂趣。

最好的學習方式,其實就是實踐。打開你的電腦,選一個你感興趣的工具,從一個小專案開始,享受用自然語言創造數位作品的過程吧。

請謹記:先求有,再求好。保持好奇心,保持耐心,讓我們一起在 AI 時代中持續成長!


延伸閱讀

外部資源


如果這篇文章對你有幫助,歡迎請我喝杯咖啡!你的支持是我持續創作的最大動力 ☕