我喜歡氛圍編程,每當我感到無聊時,我就會用氛圍編程的方式為自己或開發者挑戰賽編寫一些網站。

我分享這些專案有點晚了,因為我之前一直猶豫要不要發到這裡。現在大多數人都在開發用戶群龐大的全端應用,相較之下,我用 Vibe Code 開發的專案就顯得小巫見大巫了。

但後來我意識到了一件事。我為自己所取得的成就感到自豪。並非因為這些專案有多了不起,而是因為我成功地將腦海中的一個想法變成了一個可以部署的應用程式。

說實話,這種感覺本身就很棒。

我剛開始接觸氛圍編碼的時候,做得一塌糊塗。我討厭它。輸出結果亂七八糟,產生的幻覺令人沮喪,而且一切都和我想像中的完全不一樣。

但是,我建構得越多,就越能理解氛圍編碼的優點和缺點。

我學到的最重要的一點是:如果引導得當,你可以把想法變成真正的產品;反之,最終只會得到一團糟,連給別人看都不願意。

所以隨著時間的推移,我開始學習一些小技巧和小技巧,這些技巧幫助我越來越接近我腦海中的願景。

以上是我目前為止的一些經驗教訓,也歡迎大家分享你們的經驗,因為我也還在學習。


  1. 清晰度

在將我的想法變成一款「價值 5 萬美元的氛圍編碼應用程式」之前,我總是先進行腦力激盪。

首先是我自己練習,然後是人工智慧。

腦力激盪的原因很簡單。我想要多個想法,這樣才能從中選擇我真正想實現的那個。在愚人節開發者挑戰賽中,我的想法是開發一些看似有用但實際上無用的東西。

於是我開始集思廣益。

我有很多想法,但沒有一個能真正適當地應對這個挑戰。

後來我又仔細思考了一番,於是想出了SpaceEstate這個網站,你可以在上面購買太空土地。

通常情況下,我會想到兩三個我真正喜歡的想法,然後就開始寫作:

  • 工作流程

  • MVP(最小可行產品)理念

  • 它應該是什麼樣子

  • 使用者應該有怎樣的感受

這有助於我縮小自己真正想做的工作範圍。

然後是人工智慧。

有時我在遇到挑戰時會大腦一片空白,需要幫助才能理解圍繞這個主題究竟可以建構些什麼。人工智慧可以幫助我研究想法、改進概念,並讓我從不同的角度思考問題。

經過一番腦力激盪和研究,我最終選定了方案,並開始進行概念編碼。

在動手之前,務必先明確你的想法。制定一個簡單的計劃,定義工作流程,並繪製一個粗略的設計圖,以便思路清晰。


  1. 最完美的氛圍編碼工具是什麼?

老實說,這是我最喜歡談論的話題。

完美的氛圍編碼工具是…根本沒有。

事實上,根本不存在完美的氛圍編碼工具。一切取決於用戶,取決於他們的引導能力、耐心,當然……也取決於代幣。

你需要具備無中生有的能力。

例如,如果 Claude 明天關閉,你的整個工作流程會跟著崩潰嗎?還是你可以轉移到其他工具,仍然能夠表達你的想法?

一開始我用的是 Gemini Studio,但感覺它有一些限制。後來我改用 Antigravity,也覺得這個工具有一些限制。

但後來我意識到,問題並不總是出在工具上。

有時問題在於:

  • 我的提示

  • 我的期望

  • 我無法恰當地表達我的需求。

這徹底改變了我對氛圍編碼的看法。

現在我認為,一款以氛圍為驅動的應用程式的真正力量掌握在建置它的人手中,而不僅僅是工具本身。

我用 Gemini Studio 開發了SpaceEstate ,我真的非常喜歡最終的成果。說來也巧,我一開始還因為覺得它「太笨」而討厭它呢。

先提升自身能力,再去指責工具。


  1. 提示

提示在Vibe編碼中起著至關重要的作用。如果你不擅長提示,很可能會得到平庸的結果,然後把責任推給工具。

產生的程式碼取決於你的提示。更好的提示能讓你更接近你實際的想像。而糟糕的提示則會導致幻覺、隨機的介面決策,甚至完全不同的輸出結果。

剛開始接觸直覺編碼的時候,我很討厭它,因為輸出結果總是跟我預想的不一樣。我感到很沮喪,反而責怪工具,而不是改進我的提示。

但當我了解了提示的真正原理,並觀察了其他人如何建立提示後,我的輸出結果開始更接近我的想像。幻覺也減少了。

說實話,我覺得當你改進了你的提示詞撰寫技巧之後,你的想法就能更快變成現實。我學到的最有效的技巧之一就是先利用人工智慧來改進我的提示詞。

產生的提示資訊如下:

  • 更緊

  • 更有條理

  • 更具體一些

  • 人工智慧更容易跟隨

而不是:“做這個,做那個”

就變成了:“請仔細按照以下步驟操作。”

更好的提示帶來更好的結果。


  1. 錯誤和幻覺

在進行氛圍編碼時,幻覺和隨機錯誤是否仍然會讓你感到沮喪?因為我以前經常被它們困擾。

但一個小技巧確實幫我大幅減少了幻覺。每當我想要做出某個特定的改變時,我都會在提示語的末尾加上一句話:“只做這件事。”

那一行程式碼的作用比我想像的還要大。它防止了人工智慧隨意修改無關內容,使修改更加集中。

我還開始嘗試在修改後的文件上明確指定文件名。這樣可以縮小修改範圍,避免對專案的其他部分進行不必要的修改。

這些小技巧幫我避免了很多麻煩。

如果出現錯誤,我通常會直接貼上錯誤訊息,讓AI來修復。大多數情況下,都能成功。

說實話,如果錯誤很小,不影響功能,那就先把它放在優先順序較低的位置,以後再修復。

一些小的提示技巧可以大幅減少幻覺。


  1. 質量重於數量

我對此部分持不同意見。因為說實話,品質是次於數量的。

我學到的大部分經驗都來自於開發許多基於 Vibe 編碼的應用程式。一些看似微小的技巧,隨著時間的推移,實際上可以帶來巨大的改進。

例如:在提示中加入「只做這件事」大大減少了我的幻覺。

另一個例子:我最初使用 Gemini Studio 進行程式碼創作,後來改用 Antigravity。 Antigravity 給我的感覺就像是更強大的 VS Code,因為我可以安裝程式庫、自訂工作流程,並進行更深入的開發。

這種靈活性對我的影響很大。

最近,我還開始學習:

  • 代理人

  • 技能

  • Vibe程式設計網站

我已經找到了一些在Vibe程式設計中能帶來巨大優勢的工作流程。說實話,需要學習和建構的東西太多了。

所以我會繼續努力,繼續學習,也會繼續分享這些經驗教訓。

建置。打破。學習。重複。


  1. 有些想法無法實現

我曾多次因為各種原因放棄一些想法。

有時,在開發過程中,我會對這個想法失去興趣。有時,感覺不對勁了。有時,應用程式的最終效果與我腦海中的設想截然不同。有時,各種隨機錯誤不斷出現,徹底扼殺了開發的熱情。

原因可能有很多,但結果都一樣:放棄這個想法,轉而去做另一個事情。

以前我常常這樣。我會開始做一些令人興奮的事情,但做到一半就卡住了,想太多,最後就放棄了。

但隨著時間的推移,我身上發生了一件事的改變。我開始更專注於把想法完成,而不僅僅是開始構思。

現在我會在開始編寫程式碼之前仔細思考專案,並督促自己將想法變成現實。

我放棄了很多想法,因為它們太雄心勃勃,或者還不夠好。

說實話,這也沒什麼不好。並不是每個想法都能成為現實。

重要的是要不斷提出新想法,而不是後悔以前的想法,並想:“如果我當初完成了那件事會怎樣?”

現在對我幫助很大的一點是在構思階段就使用人工智慧。我會問它:

  • 這個想法真的值得實現嗎?

  • 它能成為MVP嗎?

  • 這樣能解決什麼有意義的問題嗎?

  • 現在這真的可行嗎?

這種清晰的想法讓我避免把精力浪費在我不真正關心的事情上。

我還學到了一點:不要止步於寫程式碼,還要部署它。

即使它並不完美。

專案部署完成後,不妨稍作休息,反思一下從中獲得了哪些經驗。即使是放棄的專案,也能教我們一些東西。

把這些經驗運用到下一個想法中,讓它變得更好。

並非每個想法都必須成功,但每個想法都應該教你一些東西。


我的Vibe-Coding之旅

我從這裡

「歡樂輪盤」是一款趣味十足的網頁應用程式,旨在將短暫而無聊的休息時間變成快樂的瞬間。

我開發這個工具的初衷是想為我的日常生活增添一些隨機性。與其無止盡地滑動螢幕,不如轉動轉盤,立刻就能獲得一些有趣的小任務,例如買杯咖啡、和人聊聊天或出去散步。

該應用程式具有以下功能:

  • 響應靈敏的旋轉輪

  • 嘉年華風格的燈光

  • 流暢的動畫

  • 五彩紙屑效果

  • 結果模型

它完全使用 HTML、CSS 和原生 JavaScript 建置,沒有任何後端。簡單、輕量級、有趣。

圖片

對此

《七人組》是一款受沃特國際超級英雄宇宙啟發而打造的互動式網路體驗。

我建構它的目的是探索現代前端技術如何創造沉浸式故事體驗。

我不想創造一個靜態的展示空間,而是希望使用者感覺彷彿置身於一個真實的超級英雄企業宇宙中。

該專案包括:

  • 電影級使用者介面

  • 分層動畫

  • 動態性格揭示

  • 自訂遊標交互

  • 平滑滾動

  • 視差效應

我使用了:

  • React

  • TypeScript

  • 迅速地

  • Tailwind CSS

這個專案讓我真正意識到,當與紮實的前端基礎相結合時,氛圍型編碼可以發揮到什麼程度。

圖片


而這

BiteMatch是一款類似 Tinder 的美食發現應用,專為現場活動和體育場館而設計。

我建立它的目的是為了解決人們在活動中面對琳瑯滿目的食物選擇而感到不知所措的問題。

因此,用戶不再無休止地滾動瀏覽,而是像使用約會軟體一樣滑動瀏覽食物選項。

該應用程式包含:

  • 滑動交互

  • 食物搭配

  • 動畫揭示螢幕

  • 智慧推薦

  • 攤位尋路

  • 基於個性的建議

使用以下技術建構:

  • React

  • 迅速地

  • Tailwind CSS

  • Framer Motion

這個專案對我來說特別之處在於,我是在與眾多優秀的建築師同台競技的情況下,在 3-4 小時內完成的。

說實話,這正是我最喜歡氛圍編碼的地方:想法能迅速變成現實。

圖片


說實話,Vibe 編碼是我開始做的最有趣的事情之一。

不是因為它能神奇地建立完美的應用程式,而是因為它幫助我停止過度思考想法,並真正開始將它們付諸實現。

有些專案搞得一團糟。有些專案徹底失敗了。有些專案讓我沮喪到關掉網頁,直接走人。

但每一個專案都教會了我一些東西。

對我來說,最大的收穫是意識到直覺編碼並非要取代技能,而是為了加速想像的發揮。

你的思考能力、設計感、啟發能力和開發基礎越強,你編寫的基於氛圍感的應用程式也會變得越好。

說實話,看到一個只存在於你腦海中的想法在幾個小時內變成一個已上線的網站,對我來說仍然感覺很不真實。

我還有很多東西要學。但我會繼續建造、試驗、發現問題,並將一路走來學到的一切分享給大家。


你試過Vibe程式設計嗎?你用它做出來的最有趣、最奇特或最有用的東西是什麼?

我真心希望能夠看到您的專案,並學習您的工作流程。


原文出處:https://dev.to/konark_13/vibe-coding-lessons-nobody-talks-about-44k9


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝12   💬4   ❤️1
464
🥈
alicec
📝1   ❤️2
87
#4
我愛JS
💬1  
3
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
📢 贊助商廣告 · 我要刊登