HTML is All you need

天下苦Figma久矣

Vibe Coding 这么多项目以来，让我感受最深的一点就是，对于一个项目来说，点子越来越不重要了，重要的是如何让人发现，因为点子可以被快速复制，但是审美和品味不能，一个好看的宣传图，一段让人印象深刻的视频介绍，会比项目的实际功能更吸引人，毕竟好不好用用了才知道，但如何吸引人来用才是项目的立身之本。

之前我一直都在用Figma做图，截图，调整字体，配色，琢磨布局，颇有种古法仙人的做派，事实上是由于目前的生图模型大都十分昂贵，要做出一张满意的图微调几次额度就不够用了，不敢放开手脚去用，另一方面是一些宣传图实在没必要让AI出马，就一些截图加个壳，配几个文案，AI生图不仅时间长，产物不稳定，还有可能加上一些本来不存在的东西，效率还不一定比手动高多少。

这时，Figma MCP出场了，它完美解决了以上问题，不用AI生图，而是让AI生成标准的Figma文档，这样确保了图片的准确性，并且可以组件化复用，后续换图也很方便，听起来十分美好。然而，这是有代价的，免费版Figma账号MCP用不了几次就会达到限制，随便做几张图就会半途停止，几乎不可用，对于个人而言，订阅Figma又太贵，收不收得回成本都不一定。并且，Figma MCP仍然把工具牢牢限制在了自己的体系里，只能使用它提供的工具，3D效果，动画效果等等，都完全依靠Figma自身的更新，想要在这个基础上拓展，简直难如登天。

而实际上，每个人的电脑里早就已经准备好了完整的解决方案，并且在十几年来一直默默支撑着整个AI界的发展，各种新特性层出不穷，却总是被人默默忽略，最好的 Vibe Design 工具，其实就是浏览器。

浏览器天然支持任意平台，HTML+CSS+JS的灵活性让Web蓬勃发展至今，并且仍然在不断更新，新特性层出不穷，Figma也正是依靠Web发展壮大，那么有什么理由不去使用一个AI天生就掌握，从娘胎里就开始学习的工具，转而去使用被各种规则限制，各种私有格式规范，使用前还需要先读大段说明书的第三方平台呢？

让AI生成宣传图，HTML就是最好的语言，它不仅支持各种基础设计工具，裁剪，背景色，阴影，边框，响应式等与生俱来，在JS的加持下，还能实现各种炫酷的特效，甚至渲染各种3D模型，真正意义上的自由设计，Claude Design 正是看到了这一点，才选择了HTML而不是自创一套设计文稿规范，然而 Anthropic 是一家商业公司，Design 仍然加入了大量的私有API规范，依然在试图限制AI的自由发挥，无法自由地让用户释放创意，并试图将用户留在自己的生态中。而HTML本来就是开放的，任何工具都可以进行读取和修改，没有多模态的模型也可以进行分析和创建，天然就是AI友好的，所有的HTML规范都在采集语料时被预训练入AI的参数中，这是任何一个第三方工具都不可比拟的，AI大模型在写HTML时就像说母语一样简单自然。

我尝试用Figma MCP工具制作过一些图片，查看模型的思考过程，无一例外都消耗了大量的时间和token在阅读工具规范和排查API报错上，虽然最终成果尚可，但用起来总觉得投入与产出不成正比。后来我实在受不了MCP工具一开口就十几k上下文的前摇，直接让Codex制作HTML网页，再通过网页导出图片结果，效率翻了一倍不止，全程没有任何额外的提示词开销，AI天生就知道怎么用HTML实现排版，阴影和渐变手到擒来，更关键的是，最后的HTML产物不被束缚在任何一个第三方生态里，你可以直接换成任意一个Agent工具继续优化，不用担心MCP的额度限制，不存在Figma能做到而HTML做不到的设计。

并且HTML也可以用于生成视频，大部分宣传AI制作的宣传视频背后都是remotion js大手在默默发力，CSS动画+Canvas就是最好的创作工具没有之一，未来所有的AE特效都将会被Web平台重写，AI操作Web的效率相比任何其他桌面端工具来说都是无可超越的。

唯一几个原生HTML无法直接实现的特性，其实也无伤大雅：

团队协作

Figma的核心卖点就是多人协作，设计师们负责编辑，开发者可以一键切图或者查看代码，这是促成Figma几十亿美金估值的底气。然而 Vibe Design 中多人协作是个伪命题，一人成军才是主力，设计稿和代码都是消耗品，很难说还有多人修改的必要性，实在要协作也不是不行，Git仓库提交也能变现协作，只是无法即时看到修改而已。

标注式修改

对于设计类的图稿，AI生成的最终HTML一般都不会包含交互操作，也不会生成复杂的标注功能用于二次修改，要想改图往往只能靠硬说，“左上角的logo放大一点”、“字体调大一点”之类的，这其实也不耽误什么，甚至如果你能自学一点CSS知识，用浏览器开发者工具就能直接可视化修改设计稿，指哪打哪，还能减少token消耗。

作为一点小小的论据，这篇文章里的所有图片都是Codex通过HTML直接生成的，与Figma设计的效果没有任何差别，甚至我感觉更好。我在B站发布的视频封面也开始选择HTML方式生成，比我自己手调的封面好看了不止一个层级，AI对于HTML的理解能力肉眼可见的高，并且还能自发生成一些背景元素丰富整体的视觉体验，对于小工具产品来说加分不少。

如果你也和我一样还在寻找一个合适的产品图片生成工作流，可以考虑抛弃Figma MCP，直接转投原生HTML了，加入原生Web阵营，在这里不仅不用担心Serveless服务的额度限制，开箱即用，无任何限制，还有成千上万个专门为HTML优化的Skills，何乐而不为呢～