AI 工具生成界面这件事越来越普遍之后，我发现工作流里有一个地方很别扭：用 v0 或 Claude 生成了一个 HTML 原型，想继续在 Figma 里改，基本只能截图导入或者手动重画，两个方式都不太对。
找了一圈没有合适的工具，就自己做了一个。
做了什么
这是一个 Figma 插件，把 HTML 转换成可编辑的 Figma 图层。
核心逻辑是：把 HTML 在一个隐藏的 iframe 里真实渲染，提取每个元素的布局和样式数据，然后转换成 Figma 能创建的节点结构。文本变成文字图层，色块变成有填充的 Frame，flex 布局尽量转成 Auto Layout。
结果不是像素级完美，但能得到一个结构化的 Figma 起点——可以直接在上面改，而不是从零画。
七天，3700 行代码，用 Claude 协作完成。
实际遇到的问题
技术上有几个地方比想象中麻烦。
字体识别。不同字体厂商对同一字重有不同命名——「Semi Bold」「SemiBold」「Demi Bold」在 CSS 里都是 600，但 Figma 只认其中某一种。没有一套字体回退系统，导入结果就会到处是字体错误。
外部样式表的加载。用户粘贴的 HTML 经常引用外部 CSS，正常的浏览器会被 CORS 拦住，加载不到。通过 Figma 提供的 figma.fetch() 接口可以绕过这个限制，但需要处理一些边缘情况。
安全处理。HTML 里可能有脚本，导入之前需要移除，不然在渲染阶段会执行任意代码。
这些问题一个个解决下来，大概是整个七天里最花时间的部分。
关于 Vibe Coding 这件事
在做这个项目之前，我理解的 Vibe Coding 是「让 AI 帮你写代码」。做完之后这个理解变了。
Claude 负责生成代码，我负责的是：说清楚这个东西要做什么、测试边界情况、判断某个实现方式会不会有问题。 这两部分缺一不可。
项目第一天我写了一份产品文档，定义了目标用户、功能范围、已知限制。这份文档的作用是：后面遇到「这个功能要不要支持」的问题时，有一个参照。没有它，开发过程会一直在反复拿捏边界，效率很低。
七天完成这个项目，不只是因为 AI 写代码快，更是因为方向比较清晰，没有在一些不必要的决策上浪费时间。