AI如何让HTML重回设计舞台？

今天的 UI 设计师和网页开发者之间，有着清晰的分工。但你能想象吗？在网页诞生的早期，“设计网页”其实是程序员的工作。与其说那时的网页被“设计”出来的，不如说是被“排版”出来的。

20世纪末，做网页 = 写 HTML + 上传服务器。网页像电子文档一样，以文字为主、结构简单。当时互联网的使命是“展示信息”，而非“表达体验”。随着互联网从“信息展示”走向“交互参与”，设计与开发开始分化。

在网页设计的发展历程中，设计工具的主流方向经历了从基于HTML到非 HTML格式的转变：

一类是基于HTML的设计工具——它们直接以HTML的形式保存项目，或能无缝转换成 HTML。

另一类则是非HTML设计工具，依赖私有文件格式（如.fig、.sketch或.xd），但这些格式的文件在真正运行于网页前，都必须经过格式转换为HTML或其他可执行代码。

几十年来，这两种格式先后登场。基于HTML的设计工具曾风靡一时，随后非HTML设计工具崛起。

1. HTML工具的高光时刻

上世纪90年代末至21世纪初，基于HTML的设计工具曾风光一时。

可视化建站的兴起

1997年Macromedia 推出的Dreamweaver，这款工具革命性地实现了 "可视化构建网页"，并直接以HTML和CSS保存项目。设计师可直接拖拽组件、插入表格并调整样式，即时预览 HTML 的渲染效果，无需频繁切换编辑器与浏览器。

即便是当时的其他网站构建器，也最终会导出HTML，实现网站即时上线。Dreamweaver、FrontPage等软件标志着"所见即所得"网页制作的到来，也让“个人建站”成为可能。

2. 非HTML工具的崛起

2005年前后，Web2.0浪潮带来了根本性变革。随着AJAX 技术普及，网页从静态文档升级为动态应用。网页设计日益复杂——响应式布局、层叠样式表（CSS）以及越来越庞大的JavaScript应用逐渐普及。HTML的结构化特性开始显现局限——它擅长定义内容层级，却难以满足设计师对视觉创意的自由探索。传统的“所见即所得”工具开始力不从心。

Dreamweaver逐渐被边缘化。许多设计师开始从HTML原生工具转向自由度更高的图形设计软件。

2.1 Photoshop趁机填补空白

设计师们发现，用PS的图层功能可以自由排版、调试色彩，创造出远超HTML原生能力的视觉效果。

于是 "画网页" 取代了 "搭网页"，形成了全新的工作流。Photoshop几乎成为网页设计的主要手段，尽管它最初并非专为UI设计打造。

2.2 Sketch引入专门的UI文件格式

2010年Sketch的诞生，进一步巩固了非HTML设计工具的地位。这款专为UI设计打造的软件引入了矢量图形、组件库等功能，文件体积比PSD更小，操作更高效。迅速征服了全球UI设计师群体。到2017年，Sketch在UI设计工具市场的占有率据调查已高达70%。

2.3Figma等新型工具重塑网页设计方式

随着 Sketch 开启现代设计工具的时代，Figma 等新型工具以协作与云端工作流为核心，彻底重塑了网页设计方式。

2015年，Figma推出早期版本，一款基于浏览器的在线协作设计工具，支持多人实时编辑。虽然初期功能简陋，但云端协作理念正中时代痛点。

2016年正式发布后，Figma迅速迭代。随着远程协作与跨职能团队需求增长.

2020年疫情爆发后，Figma的普及率被推向新高。

调查显示，到2010年代后期，Figma 已占据全球界面设计市场**80%**以上的份额，成为非HTML工具阵营的绝对王者。

3. 两大设计体系的优劣

HTML 编辑器最大的优势在于：

可以让设计与代码天然对齐，能有效减少翻译偏差。然而，一直以来，HTML编辑器在创意表达与自由探索上，始终难以达到非HTML工具的灵活与丰富。

相较之下，非HTML工具为设计师提供了更高的创作自由和更流畅的设计体验。但这种自由的代价是“翻译”——设计文件仍需由开发者转化为HTML与CSS，而在这一过程中，细节往往难以避免地会被流失掉一部分。

近年来，随着可视化搭建（no-code）与低代码平台的兴起，新一代编辑器再次以HTML与CSS 为核心，实现真正意义上的"所见即所得，设计即成品"。

设计工具的历史从不是一条直线，而是一场钟摆式的轮回——从HTML的辉煌，到非 HTML 格式的崛起；如今，在AI浪潮的推动下，钟摆又回到了HTML的一端。

4. AI时代带来的转折

2023年以来，生成式AI的爆发彻底改写了局面。如今，AI已能根据自然语言指令自动生成图像、编写代码，这对UI设计和网站无疑将带来一场范式变革。当GPT-4o等大语言模型（LLM）基于互联网上的海量数据进行训练，其中包含了巨量的HTML、CSS 与 JavaScript。因此，这些模型天生精通网页语言——它们能够生成页面结构、调整样式，甚至自动修复布局。相比之下，诸如.fig、.sketch等设计文件在训练数据中的占比极低——它们封闭且稀少。这意味着，AI 对这些私有格式的理解和生成能力极为有限。

在 AI 时代，基于HTML的设计工具天然占据优势——因为它们与大语言模型“说着同一种语言”。

这种与浏览器原生兼容的格式，成为连接 "创意想法" 与 "可运行产品" 的最短路径。当然，我们必须承认的是，目前的AI设计工具仍处于实验阶段——它们能启发、辅助并加速设计流程，但尚不能取代人类设计师。

5. 为什么UXbot选择 HTML

真正的机遇在于：将人类的创造力，与AI对HTML的天然理解相结合。这正是基于 HTML 的设计工具将在未来设计体系中占据核心地位的原因，也是我们在 UXbot 中选择以 HTML 作为设计范式载体的根本考量。在构建UXbot时，我们面临两种选择：要么创造一个新的私有格式，要么坚持HTML。

我们最终选择了HTML，原因有二：

• AI对HTML已经极为熟悉，这让设计的生成与微调变得更加高效；
• 我们的下一次版本更新将不止于页面布局，而是能够生成应用的真实代码。HTML为我们提供了清晰、结构化的基础，使设计到代码的转化更快速、顺畅。

UXbot不仅仅是一款设计工具，更是AI设计与真实代码的交汇点——无论你是在构建网站、移动应用，还是桌面软件。

6. 总结

在AI时代，大语言模型对 HTML 的理解深度，远超其他设计文件格式。这意味着，HTML 成为了AI更容易理解、生成与操作的“通用语言”，因此在AI驱动的设计中具备天然优势。也让基于HTML的设计工具在AI驱动下表现出更高的效率与稳定性。UXbot正在让"从想法到产品"的路径变得前所未有地快捷。

欢迎登陆注册UXbot，亲眼见证它的效果，体验设计的未来。如果您对内容感兴趣，也欢迎关注我们，了解更多关于AI如何重塑设计与开发的最新洞见。