豆包推出了AI 編程，在「編輯模式」下可以直接前端改圖和文字，我體驗了一下，結(jié)論是：

壞消息是做前端的人更加水深火熱了，好消息是后端暫時還比較安全。

我試了下豆包的這個功能，點擊后，它直接給了我一個Prompt模板：

分析以下內(nèi)容，并將其轉(zhuǎn)化為清晰美觀的可視化HTML網(wǎng)頁：

粘貼內(nèi)容詳情，如財報數(shù)據(jù)、旅游攻略、新聞資訊、論文總結(jié)等

下圖為豆包的AI編程示例prompt。

其實這一點兒并沒有什么稀奇的，因為生成一段HTML代碼并且直接可視化，在很多AI大模型都已經(jīng)實現(xiàn)了，包括但不限于DeepSeek，ChatGPT，Claude等等。Prompt跟豆包的AI編程一個思路，就是生成HTML代碼。

下圖就是我用DeepSeek生成的HTML代碼，并且直接在DeepSeek網(wǎng)頁版運行，可以看到很完美的實現(xiàn)了我的需求：生成一個html代碼，展示從0-9的數(shù)字不同寫法。

至于為什么是HTML，因為這個代碼就是構(gòu)成我們平時看的網(wǎng)頁的實現(xiàn)方法，這個代碼你直接保存在本地，雙擊就可以直接顯示為網(wǎng)頁，DeepSeek或者豆包只不過是幫我省去了下載到本地再運行這一步而已。

下面的gif動圖你可以看到，我現(xiàn)在編輯的這個知乎回答網(wǎng)頁，本質(zhì)上也是html代碼生成的。

我用豆包的AI編程也做了同樣的嘗試，還是給AI一樣的任務(wù)，可以看到下圖中豆包也是給了兩部分內(nèi)容。

1 代碼，即生成的HTML代碼

2 預(yù)覽，就是用html渲染出來的網(wǎng)頁。

明顯看得出豆包生成出來的跟DeepSeek的風(fēng)格都不一樣，豆包的美觀程度更高。

并且這種網(wǎng)頁還有個好處，那就是它會隨著你的屏幕大小變化而變化，當(dāng)我把網(wǎng)頁拉寬后，網(wǎng)頁的展示就從5行2列，變成了2行5列，這也是這種方法的優(yōu)勢，那就是所有的屏幕它都能自適應(yīng)的調(diào)整。

各種型號的手機、電腦或者平板，只要能打開網(wǎng)頁的，它就都能用。

豆包的主要功能就是這個編輯，它可以在不改變其他位置的前提下只改動部分內(nèi)容。

比如說我不喜歡這個按鈕的顏色，要讓它變成紅色，按以前你要告訴AI，然后它來操作。

但是這個過程有一個問題，那就是它在改動顏色的時候，說不定也會把其他位置也改了，這就叫“牽一發(fā)而動全身”。

豆包的AI編程功能相當(dāng)于是把這個“局部調(diào)整”的功能做了優(yōu)化，你可以更加精準(zhǔn)的修改自己想要修改的地方。下面的動圖就是整個操作邏輯。

做了局部修改后，代碼版本從v1->v2，按鈕顏色也改了，沒毛病。

但是有個問題，它在改動的時候會重新輸出整個過程，但實際上改動的地方就只有一行代碼，如果是我改的話，只需要幾秒鐘，這一點兒還需要繼續(xù)優(yōu)化。

其他的幾個預(yù)設(shè)功能都是類似的，要么是生成HTML代碼。

要么是生成SQL代碼。

這些有用，但是作用不大，因為這都是“代碼碎片”，需要成百上千甚至上萬才能發(fā)揮作用。

不過它打了一個補丁，那就是可以在Trae中打開，也算是彌補了一個淪為玩具的大概率結(jié)果。

導(dǎo)入到本地之后，可編輯性明顯變大了，可以自己選擇調(diào)整代碼。

比如就可以在Trae的編輯欄里面直接改顏色。

比如我選中這行代碼，然后讓Trae給我改成紅藍漸變色。

它會自主思考我的指令，并提出結(jié)果辦法以及自動執(zhí)行。

經(jīng)過思考，自主執(zhí)行后，你會發(fā)現(xiàn)按鈕顏色變了，它的確按照我們的想法變了，這就是AI編程的優(yōu)勢所在。

你只需要描述清楚你想要的結(jié)果，那么AI就可以替你去實現(xiàn)。

但是也要注意，現(xiàn)在AI編程的能力還不足以運行非常復(fù)雜的代碼，但是這種顯示個網(wǎng)頁的工作完全沒問題，你大可以任意刁難AI。