Vibe Coding

最近幾年，以 LLM 為主要技術(shù)路線的又一輪 AI 浪潮席卷了整個(gè)行業(yè)，并迅速外溢到與信息技術(shù)產(chǎn)業(yè)無關(guān)的普通民眾的日常生活中。快到驚人——甚至可以說是有些嚇人的發(fā)展迭代，正在迅速叩開傳統(tǒng)企業(yè)和 C 端用戶的大門；給個(gè)人和企業(yè)用戶帶來便捷、效率與趣味的同時(shí)，也在一些行業(yè)和崗位完成技術(shù)替代。

作為計(jì)算機(jī)行業(yè)的一個(gè)細(xì)分領(lǐng)域的從業(yè)者、一個(gè)前端工程師，雖然我們與真正參與 LLM 研發(fā)的算法工程師和數(shù)學(xué)家相比當(dāng)然只能算離門口最近的門外漢，但是與行業(yè)外的公眾相比算是站在岸邊離潮頭最近的弄潮兒。

要提起我們這些徘徊在 AI 領(lǐng)域門口的其他細(xì)分技術(shù)領(lǐng)域的信息技術(shù)從業(yè)者如何看待和使用 AI，有一點(diǎn)是不得不提到的：AI 輔助編程。無論是出于嘗試新事物的興趣和膽量，還是迫于提效和考核的無奈，AI 輔助編程，也就是 Vibe Coding，已經(jīng)成為了計(jì)算機(jī)工程師在工作中必須掌握的技能之一。

Vibe Coding 與我

我接觸 AI 輔助編程的時(shí)間很早——早在三年前 Chat GPT 剛剛火出圈的時(shí)候，就嘗試將 AI 補(bǔ)全和代碼生成引入我的工作流。不過在當(dāng)時(shí)的時(shí)間點(diǎn)，AI 的編程能力仍然是不太夠看的。LLM 對(duì)代碼上下文的把控以及 prompt 的理解能力不夠強(qiáng)，生成的代碼并不能直接用于生產(chǎn)過程中；AI 代碼補(bǔ)全也不夠快、不夠準(zhǔn)確，對(duì)我完成代碼不僅沒有太大的提效作用，甚至有些時(shí)候還會(huì)產(chǎn)生干擾。因此，在本次 AI 浪潮剛剛掀起的時(shí)候，無論是出于為產(chǎn)出負(fù)責(zé)的原則，還是源自對(duì) AI 提效的不信任，對(duì)于 Vibe Coding 我都是較為抗拒的。

計(jì)算機(jī)科學(xué)以及產(chǎn)業(yè)技術(shù)的發(fā)展一向是極為迅速的，而在 LLM 上這一點(diǎn)體現(xiàn)得淋漓盡致。短短兩三年的時(shí)間，AIGC 的可用性得到了火箭般的提升。生成的照片和視頻從最早的“鬼畫符”變得以假亂真，創(chuàng)作的繪畫從早期的低劣涂鴉到現(xiàn)在能夠威脅專業(yè)插畫師的飯碗——自然，代碼生成的能力也發(fā)生了翻天覆地的變化。得益于更長的上下文窗口以及更精確的指令遵循特性，Vibe Coding 的能力已經(jīng)完全能滿足生產(chǎn)需求。

開發(fā)者對(duì)于技術(shù)的變化和提升是很敏銳的。察覺到 AI 輔助編程能力的快速增長，我再次嘗試將 AI 作為我的編程助手。與此同時(shí)，作為一家科技巨頭，公司的嗅覺也非常靈敏，為我們提供了豐富的 AI 資源并鼓勵(lì)我們使用 AI 對(duì)開發(fā)工作進(jìn)行提效。到現(xiàn)在，我已經(jīng)在所涉及需求中都或多或少地引入了 Vibe Coding ——老項(xiàng)目保持了相對(duì)保守的步伐，通過漸進(jìn)式引入 AI 代碼生成和 AI 驅(qū)動(dòng)測(cè)試，逐步完成 AI 轉(zhuǎn)型；新項(xiàng)目的嘗試則更為激進(jìn)，幾乎將全部的業(yè)務(wù)邏輯代碼生成和測(cè)試工作都交給了 AI，打造出了幾乎不含手寫代碼的“AI 原生應(yīng)用”。

Vibe Coding 如何生成高質(zhì)量的代碼：十大核心技巧

在 Vibe Coding 過程中的一些思考和經(jīng)驗(yàn)，或許對(duì)正在閱讀本文的你有一定的參考價(jià)值。

【1】使用 AI IDE 而不是 AI 插件

在 Vibe Coding 過程中，更推薦使用 AI IDE，而不是使用傳統(tǒng) IDE 加上 AI 輔助插件——即使這個(gè) AI IDE 的出品方也推出了插件版本。

AI 輔助插件完全可以使用和 AI IDE 相同的大模型，以此獲得相同的編程水平和推理能力。但是這些專為 Vibe Coding 設(shè)計(jì)的 AI 原生 IDE，對(duì)文件和目錄的操作權(quán)限通常都會(huì)高于 AI 編程插件；這就意味著，AI IDE 在閱讀項(xiàng)目整體上下文和處理文件和代碼的能力方面都會(huì)優(yōu)于插件。

【2】選擇合適的 LLM 模型

在當(dāng)下（2025 年底）這個(gè)時(shí)間點(diǎn)，主流的 LLM 的編程能力都已經(jīng)很不錯(cuò)了；但是，選好一個(gè)最合適的 LLM 模型仍是 Vibe Coding 過程中非常重要的一環(huán)。

一方面，雖然各家的大模型能力都不錯(cuò)，但是總也有個(gè)甲乙丙丁。有些模型在編程能力方面一騎絕塵，有些模型對(duì) edge case 的考慮更為周全，還有些模型會(huì)有一些體驗(yàn)和交互上的思考。你需要根據(jù)你的需求，選擇能力最強(qiáng)、最適合你的使用場(chǎng)景的大模型。

另一方面，當(dāng)然是數(shù)據(jù)安全合規(guī)方面的要求。如果是個(gè)人項(xiàng)目或是你擁有團(tuán)隊(duì)的技術(shù)決策權(quán)，那么需要考慮到使用海外大模型存在的數(shù)據(jù)政策和法規(guī)要求；如果涉及到把用戶數(shù)據(jù)作為輸入，要警惕個(gè)人數(shù)據(jù)跨境傳輸風(fēng)險(xiǎn)。如果是企業(yè)項(xiàng)目，那么你的 AI 助手的選擇還需要遵循企業(yè)或團(tuán)隊(duì)的數(shù)據(jù)安全要求，例如使用自研大模型或私有部署的大模型。

【3】明白程序的本質(zhì)

看到這里的讀者，應(yīng)當(dāng)是計(jì)算機(jī)行業(yè)從業(yè)者——或至少，有一定專業(yè)知識(shí)的學(xué)習(xí)者?；蛟S你已經(jīng)在計(jì)算機(jī)科學(xué)和信息技術(shù)的道路上走了很久、很遠(yuǎn)了；但我想，不管你走了多久、多遠(yuǎn)，你應(yīng)該還沒有忘記這個(gè)學(xué)科、這個(gè)行業(yè)最根源的問題：程序的本質(zhì)是什么？

基于所處的細(xì)分領(lǐng)域的差異以及由此帶來的知識(shí)體系的不同，每個(gè)人都可能給出不同的答案。但我想，這樣的定義應(yīng)該能得到大多數(shù)同行的認(rèn)可——所謂“程序”，小到一個(gè)功能最簡單、實(shí)現(xiàn)最基礎(chǔ)的函數(shù)，大到功能復(fù)雜、代碼體量動(dòng)輒十萬、百萬行的工業(yè)軟件，乃至我們這篇文章正在討論的正不斷創(chuàng)造奇跡的 LLM 本身，都可以抽象地定義為：一個(gè)輸入，執(zhí)行一系列預(yù)定義的行為，得到一個(gè)輸出。

你可以回憶一下你所寫過的每行代碼、每個(gè)方法以及你所參與過的每個(gè)項(xiàng)目，想一想從微觀到宏觀是不是都符合這個(gè)定義。

那么，既然如此，我們使用 AI 輔助編程，其本質(zhì)就是讓一個(gè)輸入自然語言、輸出代碼的強(qiáng)大的黑箱程序（LLM 大模型）為我們編寫數(shù)不清的小程序（實(shí)現(xiàn)單一功能的語句和函數(shù)），然后組合成一個(gè)個(gè)的復(fù)雜程序（頁面或功能模塊），最終集成到大型程序（整個(gè)項(xiàng)目）中。所以我們要做的，就是對(duì) LLM 說明我們需要編寫的程序會(huì)有怎樣的輸入、需要經(jīng)過怎樣的處理、最終預(yù)期應(yīng)該有怎樣的輸出。 通過定義輸入、輸出以及中間的行為，我們就能明確定義一個(gè)程序。把這作為 prompt 輸入給大模型，便能得到符合預(yù)期的代碼。

【4】給出盡可能詳細(xì)的描述和指令

上一節(jié)中我已經(jīng)給出了我在 Vibe Coding 實(shí)踐中使用的最基本范式：用輸入、輸出與行為三個(gè)要素定義我需要生成的代碼，并作為 prompt 提供給大模型。但如果你立刻將這一方法付諸實(shí)踐，或許輸出并不盡如人意——生成的代碼大概能跑，但與你的預(yù)期并不完全一致；此時(shí)，使用更詳細(xì)的描述和指令組成 prompt 往往可以大幅改善這一情況。

例如，如果你只在提示詞中說 給我生成一個(gè)方法，輸入一個(gè)數(shù)組，快速排序后輸出，這當(dāng)然能讓 AI 寫一些東西出來，但是寫出來的東西大概率并不符合你的需求；如果你的提示詞是 幫我生成一個(gè)方法，輸入一個(gè) number 類型的數(shù)組，不改變?cè)瓟?shù)組的情況下按從小到大快速排序，輸出一個(gè)新的數(shù)組，生成結(jié)果的可用性會(huì)高很多。

再比如，幫我生成一個(gè)圖片輪播組件，會(huì)讓你得到一個(gè)勉強(qiáng)交差、不太能用的圖片輪播；幫我實(shí)現(xiàn)一個(gè)可以通過 css 控制尺寸、圖片以 cover 的填充方式自適應(yīng)尺寸的輪播組件，還需要有支持傳入自定義 css 的 indicator 和 navigator，并可支持通過參數(shù)控制是否顯示，這樣一句看起來啰嗦但對(duì)需求描述巨細(xì)靡遺的 prompt，能為你快速生成一個(gè)可用性極高的輪播組件。

不管是參數(shù)類型還是用戶行為，不管是函數(shù)邏輯還是模塊整體功能，不管是輸出數(shù)據(jù)結(jié)構(gòu)還是 UI 布局，這些抽象意義上的“輸入”、“行為”和“輸出”都可以并且需要盡可能具體的定義以及細(xì)化。 通過對(duì)輸入、輸出和行為的詳細(xì)描述，LLM 能更好地“理解”你的指令意圖，并讓生成的代碼盡可能貼近你的預(yù)期。

【5】善用任務(wù)拆解和分步

如果你已經(jīng)開始在你的興趣項(xiàng)目或是工作實(shí)踐中引入 Vibe Coding 完成一些簡單的任務(wù)，并希望加重工作流中 AI 的占比、使之承擔(dān)更復(fù)雜的工作，那么不妨想一想，在沒有 AI 輔助編程的年代，作為開發(fā)者的你是如何完成大型需求的：

首先，你的產(chǎn)品經(jīng)理會(huì)向你闡釋需求，描述 TA 希望你實(shí)現(xiàn)的是個(gè)什么東西；在你理解了需求之后，你再將具體的、場(chǎng)景化的需求，拆解為抽象的、模塊化的任務(wù)；最終再將這一個(gè)個(gè)任務(wù)，落實(shí)到細(xì)分的原子化步驟和一行行代碼中。

我想你已經(jīng)意識(shí)到了，任務(wù)拆解和分步在傳統(tǒng)的編程范式中有非常重要的作用；在 Vibe Coding 中，這也是一種非常實(shí)用的技巧。幫我生成一個(gè)計(jì)算器 是一個(gè)簡單的且有效的 prompt，但如果你想要精確把控生成的結(jié)果，幫我生成一個(gè)計(jì)算器：你需要實(shí)現(xiàn)一個(gè)字符串處理程序，將用戶輸入的用字符串表達(dá)的算式解析為可識(shí)別的 number 和算符；還需要有算式執(zhí)行程序，對(duì)算式進(jìn)行計(jì)算得到運(yùn)算結(jié)果，或?qū)Σ缓戏ǖ妮斎霋伋霎惓?這樣拆解過的、以模塊的行為和功能為導(dǎo)向的 prompt 會(huì)有更好的效果。如果你再加上 字符串處理程序的第一步是以 LIFO 方式處理字符串中的字符，并以數(shù)字為葉節(jié)點(diǎn)、算符為內(nèi)部節(jié)點(diǎn)生成 AST；第二步是以深度優(yōu)先方式對(duì) AST 的葉節(jié)點(diǎn)進(jìn)行自底向上歸約的計(jì)算，直到最終只剩根節(jié)點(diǎn)，即為計(jì)算結(jié)果 這樣詳實(shí)的步驟，那么 AI 生成的代碼將更貼合你的想法。

【6】用參考代碼維持良好的編碼風(fēng)格

如果你用 Vibe Coding 用得足夠多，想必你已經(jīng)發(fā)現(xiàn)：AI 生成的代碼，在單次對(duì)話、單個(gè)文件中的質(zhì)量還是不錯(cuò)的，但是把觀察維度擴(kuò)展到多輪對(duì)話修改或生成的多個(gè)文件就會(huì)發(fā)現(xiàn)風(fēng)格不一的問題。有不少人吐槽“AI 終歸比不上人類工程師”，認(rèn)為“AI 只是每天都在不斷產(chǎn)生新的屎山”；其實(shí)，給予適當(dāng)?shù)膮⒖?，就可以很好地解決這一問題。

要給存量項(xiàng)目添磚加瓦，讓 AI 開始開發(fā)新的功能或頁面前，可以將你之前編寫的類似功能的代碼文件添加到 prompt 的引用中，并要求 LLM 模仿其代碼風(fēng)格和實(shí)現(xiàn)方式；要從零開始搭建新項(xiàng)目，希望 AI 保持穩(wěn)定的代碼風(fēng)格和質(zhì)量，可以將 Lint 標(biāo)準(zhǔn)加入你的 prompt。

LLM 是一個(gè)神秘的黑箱，LLM 生成的代碼也具有不確定性；但是我們可以通過提供參考代碼和標(biāo)準(zhǔn)，讓結(jié)果的確定性高一點(diǎn)、再高一點(diǎn)，盡量維持良好的編碼風(fēng)格。

【7】用參考文檔讓 AI 跑得更快、更穩(wěn)

上一節(jié)中我們聊了使用參考代碼來優(yōu)化 AI 編碼風(fēng)格的技巧，現(xiàn)在我們?cè)賮砜纯戳硪环N參考——參考文檔在 Vibe Coding 工作流中更重要的作用。這里說的參考文檔，包含類型定義、技術(shù)方案說明和算法描述等一系列技術(shù)文檔。

讓 LLM 輸出高質(zhì)量代碼，一種最佳范式是定義好“輸入”、“行為”以及“輸出”，這在前文中已經(jīng)詳細(xì)論述了。那么如何在 prompt 中盡可能做好這個(gè)定義呢？使用參考文檔會(huì)是一種有效且討巧的方法。相比于在 prompt 中大費(fèi)周章描述上輸入?yún)?shù)和輸出返回值類型，一個(gè)簡單的 ts 定義甚至 proto 協(xié)議會(huì)更精準(zhǔn)；與其在 prompt 狹小的對(duì)話框中長篇大論輸入你的設(shè)想和規(guī)劃，不如直接附帶一個(gè)技術(shù)方案說明行之有效；甚至因?yàn)?LLM 往往有一個(gè)知識(shí)庫截止日期，如果你想要它幫你實(shí)現(xiàn)一個(gè)最新提出的算法，扔給它算法論文是個(gè)不錯(cuò)的主意。在 prompt 中加入?yún)⒖嘉臋n，可以讓你的 AI 編程體驗(yàn)變得更為簡潔優(yōu)雅，甚至把“不能”變?yōu)椤澳堋薄?/strong>