惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

U
Unit 42
Blog — PlanetScale
Blog — PlanetScale
H
Help Net Security
The GitHub Blog
The GitHub Blog
博客园 - Franky
酷 壳 – CoolShell
酷 壳 – CoolShell
Recent Announcements
Recent Announcements
量子位
aimingoo的专栏
aimingoo的专栏
大猫的无限游戏
大猫的无限游戏
博客园 - 叶小钗
Microsoft Azure Blog
Microsoft Azure Blog
Martin Fowler
Martin Fowler
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
A
About on SuperTechFans
T
Tailwind CSS Blog
V
V2EX
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
B
Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
S
SegmentFault 最新的问题
G
Google Developers Blog
M
MIT News - Artificial intelligence

阮一峰的网络日志

科技爱好者周刊(第 396 期):互联网通信的替代方案 科技爱好者周刊(第 396 期):互联网通信的替代方案 - 阮一峰的网络日志 科技爱好者周刊(第 395 期):软件开发的第三种方式 科技爱好者周刊(第 395 期):软件开发的第三种方式 - 阮一峰的网络日志 科技爱好者周刊(第 393 期):脑腐状态 科技爱好者周刊(第 392 期):axios 投毒与好莱坞式骗术 科技爱好者周刊(第 391 期):AI 的贫富分化 科技爱好者周刊(第 390 期):没有语料,大模型就是智障 套壳中国大模型撑起500亿美元估值?扒一扒 Cursor 的"套壳"疑云 科技爱好者周刊(第 389 期):未来如何招聘程序员 科技爱好者周刊(第 388 期):测试是新的护城河 零安装的"云养虾":ArkClaw 使用指南 科技爱好者周刊(第 387 期):你是领先的 科技爱好者周刊(第 386 期):当外卖员接入 AI 字节全家桶 Seed 2.0 + TRAE 玩转 Skill 科技爱好者周刊(第 385 期):马斯克害怕中国车企吗? 智谱旗舰 GLM-5 实测:对比 Opus 4.6 和 GPT-5.3-Codex 科技爱好者周刊(第 384 期):为什么软件股下跌 科技爱好者周刊(第 383 期):你是第几级 AI 编程 Kimi 的一体化,Manus 的分层 科技爱好者周刊(第 382 期):独立软件的黄昏 AI native Workspace 也许是智能体的下一阶段 科技爱好者周刊(第 381 期):中国 AI 大模型领导者在想什么 科技爱好者周刊(第 380 期):为什么人们拥抱"不对称收益" 科技爱好者周刊(第 379 期):《硅谷钢铁侠》摘录 我如何用 AI 处理历史遗留代码:MiniMax M2.1 升级体验 科技爱好者周刊(第 378 期):预测是新的互联网热点 科技爱好者周刊(第 377 期):14万美元的贫困线 科技爱好者周刊(第 376 期):太空数据中心的争议 科技爱好者周刊(第 375 期):一扇门的 Bug
国产 AI 网页开发工具:豆包 AI 编程简单测评
阮一峰 · 2025-06-24 · via 阮一峰的网络日志

一、引言

AI 编程(AI coding)是眼下的热点,但它其实不是单一功能,而是分成不同的方向。

其中的一个方向,就是 UI 生成,尤其是生成网页的 UI。

UI 生成涉及到视觉设计,需要专门的 AI 工具。国外已经有不少这类产品,比如 v0.devlovable.devbolt.new

它们能够根据你的文字描述,自动设计和生成网页,并部署上线。

我一直想来测评,这些 UI 生成器到底好不好用,可惜只有开通付费版,才有完整体验(包括最新、最强的模型)。

二、豆包

上周,我发现字节旗下的豆包,也上线了 UI 生成功能,能够直接生成网页应用了。

官方还特别加注"应用创作 1.0",唯恐你没注意到。

原因好像是底层的豆包大模型发了1.6版,代码生成能力大大加强。官方宣传,它在多个测试集上,得分属于国际第一梯队。

出于好奇,我就对它做了简单测评。它是完全免费的,而且对于国内用户,这种国产工具要比国外竞品更易上手。

三、基本功能

点击菜单的"AI 编程"选项,就进入了编程界面,就是一个大的输入框,下面有几个示例。

废话少说,我直接输入:

生成一个电商网站。

系统立刻转入代码生成页面,左侧是 AI 对话栏,右侧是不断滚动生成的网页代码(下图)。

等到代码生成完毕,右侧就会切换为生成的网页预览。

为了便于展示,我把这个页面分享出来(点击右上角的"分享"按钮)。

大家自己看效果吧(点击这里)。

声明一下,这是系统直接生成的,我没做任何修改。

我觉得,不足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 会滔滔不绝,生成一大段文字(点击查看)。然后,你切换到 AI 编程,输入"帮我把上述信息转化为可交互的 html 网页"。

网页就生成好了(点击查看)。

有了这个功能,AI 的内容生成与网页生成,就一体化了。

于是,玩法就无穷无尽了。比如,上传会议的录音文件,生成会议记录网站;上传文献,生成内容介绍网站;让 AI 分析财务报表,生成折线图、流程图的分析网站。

六、总结

试用下来,我对豆包这次的网页生成功能,印象很好,觉得很实用,完成度也高,是一个有用的工具

首先,模型生成的页面效果,比我想象的好,是可用的。

其次,可视化编辑很好用,操作方便,上手门槛低,适合新手和不懂编程的项目经理、设计师等。

豆包团队重点打造这个功能,表明他们对 AI 编程现状有清醒的认识:AI 生成的页面,还无法一次就达到理想的状态,所以要把编辑功能做好,方便修改调优。

最后,对比国外的竞品,它有更好的本土化。除了中文界面和用法提示,它生成的网页风格,明显就是用了本土化的模版,而不是国外设计师的风格。

如果要说缺点,大概是 JS 脚本能力还不够令人满意,有一些页面的互动效果,不能一次成功,需要跟 AI 纠正多次。

总之,在前端应用生成这方面,豆包的 AI 编程是一个有生产力的产品,美观度和可用性都比较强,又是免费的,大家可以自己动手试试看

(完)