AI編程新體驗：豆包+Trae，線上線下聯動編程

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

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

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

分析以下內容，并將其轉化為清晰美觀的可視化HTML網頁：

粘貼內容詳情，如財報數據、旅游攻略、新聞資訊、論文總結等

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

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

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

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

下面的gif動圖你可以看到，我現在編輯的這個知乎回答網頁，本質上也是html代碼生成的。

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

1 代碼，即生成的HTML代碼

2 預覽，就是用html渲染出來的網頁。

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

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

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

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

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

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

豆包的AI編程功能相當于是把這個“局部調整”的功能做了優化，你可以更加精準的修改自己想要修改的地方。下面的動圖就是整個操作邏輯。

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

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

其他的幾個預設功能都是類似的，要么是生成HTML代碼。

要么是生成SQL代碼。

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

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

導入到本地之后，可編輯性明顯變大了，可以自己選擇調整代碼。

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

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

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

經過思考，自主執行后，你會發現按鈕顏色變了，它的確按照我們的想法變了，這就是AI編程的優勢所在。

你只需要描述清楚你想要的結果，那么AI就可以替你去實現。

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