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