原文地址：https://glink25.github.io/post/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 ，何乐而不为呢～