一、引言
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 编程是一个有生产力的产品，美观度和可用性都比较强，又是免费的，大家可以自己动手试试看。
（完）
文档信息
- 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）发表日期： 2025年6月24日
