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
留言分享你的想法!
avatar-img
卡密優的心情記事
8會員
117內容數
這裡分享程式,心情,生活,讓大家溫暖的事 我熱愛生活,在此留下足跡!
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
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
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應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News