VibeCoding 是什麼

更新 發佈閱讀 3 分鐘

最近學到一個新的名詞Vibe Coding。

一開始我還以為是新的AI 寫程式的方式。

新聞上偶而也會穿插出這個名詞,有個小女孩用Vibe Coding做出什麼東西,然後為之世人驚豔。

昨天想說我也要來用用看,看有多好用。


便上網GOOGLE查詢一下,才知道這是現下流行的Coding方式。它不是指單一的某個AI工具,而是你利用說或溝通AI的方式,產出你需要的程式碼來複製貼上到原先架構內。


以往你學程式語言做UI/WEB視覺設計的時候,有許多參數需要調整,風格需要調整。


甚至程式碼的理解和用法,都要事先了解和練習一段時間試錯以後,方能夠得到心中想要的樣子。


像是按鈕的顏色外框,或是版型的製作,以及程序化怎麼使用。


架構上要用哪一種比較好,擴充性也要考慮到模組化,後續能夠再接手。


這大概需要苦讀和研究一段時日以後,方能有所成就的事情,現在靠AI的各種協助寫作,已經不是進階者的專門了。

舉凡你想要做個微秒(us)定時器,或是推構出程式架構圖再編排功能以後,對這些功能CODING。


AI現在都能協助你做到。


怎麼協助呢?

你用說的,它就弄一段讓你試試看。


有些的甚至你講個概念,它就幫你弄個成品,你只需要對小細節加加減減就好。(真棒的協作方式)(真的快取代我們軟體工程師了)


像是你不喜歡對話框顏色說一聲就改。你不太確定要什麼顏色,那個顏色的意象,只存在於你心中的祕密花園。你就講一段文情並茂的心中想法,讓它理解後把顏色弄成符合那個情境。

這種心中的顏色你要是跟UI程式設計師講,他應該是心中覺得遇到奧客或是爛人之類,表面迎合你出一個兩個版本以後,又不達你心中標準,然後就生氣氣到處跟人說你的需求不明浪費大家時間。

可是現在有體貼的AI可以幫你達到這件事情了,它用比你更懂客戶需求的方式去做到客戶想要的,不取代自以為是的你取代還取代誰?

不過現階段還不行就是了,還是要有個人可以去協作溝通,把客戶的需求串起來放到正確的位置上生成產品才行。

這個人已經不需要是老手熟手或被以前前輩凌虐建立良好功底的人,而是能靈活運用AI工具,在超短時間完成客戶需求的人。


現在的年輕初學者,以及對這個世界有願景想衝刺想玩的人就屬這些人。他們極度擁抱AI,利用AI做出各式各樣的想法工具以及玩具。很快速地累積他們的產品製作能力。


我想,vibe coding始終是會成為主流編程方式,真的迫不及待能看到。

留言
avatar-img
寫程式也寫字的卡密優
21會員
355內容數
嗨,我是卡密優,一個寫程式也喜歡寫字的工程師。 我目前仍在職場中,但正在思考:有沒有可能用寫作與創作,打造更自由的工作與生活方式? 這裡是我的紀錄日記,也是一場關於技術、寫作、生活設計的實驗。歡迎你加入,一起慢慢長出屬於我們的自由樣貌。
2025/05/17
產線的工程師同仁們準備要開始規劃工廠標線了。 距離新搬進工廠也已經有個把個月,但卡於裝潢工班一直無法落實時間,所以機台與隔間定位沒有個想法。 現在終於做到隔間與拉電,預計再兩周左右要開始正式將生產機台移入。 不然一直在諾大的廠房空間生產,臨時生產區只有做基本的防護這件事情也是另人擔心。 而且
Thumbnail
2025/05/17
產線的工程師同仁們準備要開始規劃工廠標線了。 距離新搬進工廠也已經有個把個月,但卡於裝潢工班一直無法落實時間,所以機台與隔間定位沒有個想法。 現在終於做到隔間與拉電,預計再兩周左右要開始正式將生產機台移入。 不然一直在諾大的廠房空間生產,臨時生產區只有做基本的防護這件事情也是另人擔心。 而且
Thumbnail
2025/05/13
說是一回事,做又是另外一回事。 真的。 心理有時明明覺得說某件事情,信手拈來游刃有餘。 實際做的時候可能就拖延症上身,或是遇到問題無法解決,擺著。 訂好計畫仍然做不出來,做出來又不像預期中那樣。 這樣的情況在最近層出不窮。 我發現其實歸根究柢就一個問題,拖延症,然後造成的後續傷害讓事情變
Thumbnail
2025/05/13
說是一回事,做又是另外一回事。 真的。 心理有時明明覺得說某件事情,信手拈來游刃有餘。 實際做的時候可能就拖延症上身,或是遇到問題無法解決,擺著。 訂好計畫仍然做不出來,做出來又不像預期中那樣。 這樣的情況在最近層出不窮。 我發現其實歸根究柢就一個問題,拖延症,然後造成的後續傷害讓事情變
Thumbnail
2025/05/12
畫出線框稿似乎是前期軟體設計GUI的一個好方法。 昨天因為需要先期規劃今日與業務的開會需求,所以針對要設計在APP上的功能我做了線框稿的前期設計。 在這種功能不太明朗,只貼幾個同業人家怎麼做的範例,就要你搞出一套市場上的需求,我是覺得全端都我來做是有點棘手了。 總之人家點餐了,身為廚師不拿出菜
Thumbnail
2025/05/12
畫出線框稿似乎是前期軟體設計GUI的一個好方法。 昨天因為需要先期規劃今日與業務的開會需求,所以針對要設計在APP上的功能我做了線框稿的前期設計。 在這種功能不太明朗,只貼幾個同業人家怎麼做的範例,就要你搞出一套市場上的需求,我是覺得全端都我來做是有點棘手了。 總之人家點餐了,身為廚師不拿出菜
Thumbnail
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News