一、引言
AI 程式設計（AI coding）是眼下的熱點，但它其實不是單一功能，而是分成不同的方向。
其中的一個方向，就是 UI 生成，尤其是生成網頁的 UI。
UI 生成涉及到視覺設計，需要專門的 AI 工具。國外已經有不少這類產品，比如 v0.dev[1]、lovable.dev[2]、bolt.new[3]。
它們能夠根據你的文字描述，自動設計和生成網頁，並部署上線。
我一直想來測評，這些 UI 生成器到底好不好用，可惜只有開通付費版，才有完整體驗（包括最新、最強的模型）。
二、豆包
上週，我發現位元組旗下的豆包[4]，也上線了 UI 生成功能[5]，能夠直接生成網頁應用了。
官方還特別加註“應用創作 1.0”，唯恐你沒注意到。
出於好奇，我就對它做了簡單測評。它是完全免費的，而且對於國內使用者，這種國產工具要比國外競品更易上手。
三、基本功能
點選選單的“AI 程式設計”選項，就進入了程式設計介面[7]，就是一個大的輸入框，下面有幾個示例。
廢話少說，我直接輸入：
生成一個電商網站。
系統立刻轉入程式碼生成頁面，左側是 AI 對話欄，右側是不斷滾動生成的網頁程式碼（下圖）。
等到程式碼生成完畢，右側就會切換為生成的網頁預覽。
為了便於展示，我把這個頁面分享出來（點選右上角的“分享”按鈕）。
大家自己看效果吧（點選這裡[8]）。
宣告一下，這是系統直接生成的，我沒做任何修改。
我覺得，不足10個字的輸入，能生成這樣的網頁，算可以了，反正是超過了我的預期。
雖然這個頁面看上去能用，但許多細節需要修改。
四、視覺化編輯
修改的時候，我發現，豆包的編輯功能做得挺好，完全是視覺化編輯，不懂程式碼的人也能上手，其他競品好像都沒有做到這種程度。
豆包的視覺化編輯，分成 AI 編輯和手工編輯。
4.1 AI 編輯
AI 編輯就是在左側的 AI 框，直接輸入指令，讓 AI 幫你編輯。
編輯過程就像下圖，選中標題，輸入指令“最佳化表述，同時改為藝術字”，就立刻生效了。
一條指令可以修改多處，每次修改系統都會即時儲存，不用手動儲存。
4.2 手工編輯
手工編輯就是直接在前端，自己動手修改文字和圖片。
先點選上方的“編輯”按鈕，進入編輯狀態。
然後，選中要修改的元素，進行編輯。
舉例來說，AI 生成的網頁，配圖往往不匹配，需要更換。
上圖中，圖片應該是藍牙耳機，AI 卻配了一張筆記型電腦的圖片，需要更換。
在編輯狀態下，選中這張圖片，下方會出現一個編輯框。
裡面有三個選項。
1.智慧生圖：AI 生成圖片。2.一鍵搜圖：搜尋系統圖庫。3.本地替換：上傳本地圖片。
選中第一項“智慧生圖”，輸入“藍牙耳機”，就會得到 AI 生成的藍牙耳機圖片。
五、文字秒變網頁
豆包的這一次更新，還有一個“文字秒變網頁”的功能，我覺得很實用。
它能把長文字（會議記錄、旅行攻略、新聞報道、論文等等）經過 AI 解讀，自動變成網頁。
具體來說，對話方塊底下，有一排功能按鈕，第一個就是這次新增的“文字秒變網頁”。
點選它，輸入框就會出現一句系統提示：
“分析以下內容，並將其轉化為清晰美觀的視覺化 HTML 網頁。“
你把長文字貼在這段提示下面，就可以了。比如，你貼一篇研究報告，AI 就會進行內容總結，然後將總結的內容生成網頁。
更實用的是，長文字還可以透過 AI 生成。具體做法是在聊天介面，讓 AI 生成長文字，然後切換至 AI 程式設計，輸入指令“把上述內容轉化成 html 網頁”。
舉例來說，先跟 AI 聊天，“幫我制定三天兩晚的6月杭州旅遊攻略”。
AI 會滔滔不絕，生成一大段文字（點選檢視）[9]。然後，你切換到 AI 程式設計，輸入“幫我把上述資訊轉化為可互動的 html 網頁”。
網頁就生成好了（點選檢視[10]）。
有了這個功能，AI 的內容生成與網頁生成，就一體化了。
於是，玩法就無窮無盡了。比如，上傳會議的錄音檔案，生成會議記錄網站；上傳文獻，生成內容介紹網站；讓 AI 分析財務報表，生成折線圖、流程圖的分析網站。
六、總結
試用下來，我對豆包這次的網頁生成功能，印象很好，覺得很實用，完成度也高，是一個有用的工具。
首先，模型生成的頁面效果，比我想象的好，是可用的。
其次，視覺化編輯很好用，操作方便，上手門檻低，適合新手和不懂程式設計的專案經理、設計師等。
豆包團隊重點打造這個功能，表明他們對 AI 程式設計現狀有清醒的認識：AI 生成的頁面，還無法一次就達到理想的狀態，所以要把編輯功能做好，方便修改調優。
最後，對比國外的競品，它有更好的本土化。除了中文介面和用法提示，它生成的網頁風格，明顯就是用了本土化的模版，而不是國外設計師的風格。
如果要說缺點，大概是 JS 指令碼能力還不夠令人滿意，有一些頁面的互動效果，不能一次成功，需要跟 AI 糾正多次。
總之，在前端應用生成這方面，豆包的 AI 程式設計是一個有生產力的產品，美觀度和可用性都比較強，又是免費的，大家可以自己動手試試看[11]。
（完）
References
[1] v0.dev:https://v0.dev/[2]lovable.dev:http://lovable.dev/[3]bolt.new:https://bolt.new/[4]豆包:https://www.doubao.com/chat/[5]UI 生成功能:https://www.doubao.com/chat/coding[6]宣傳:https://zhuanlan.zhihu.com/p/1916265422740750402[7]介面:https://www.doubao.com/chat/coding[8]點選這裡:https://www.doubao.com/share/code/60c46be1f6096a1c[9]（點選檢視）:https://www.doubao.com/thread/wa5ccd04bcea04e6a[10]點選檢視:https://www.doubao.com/share/code/c2bc579f099ea70c[11]動手試試看: https://www.doubao.com/chat/coding