Figma插件！一键把 Gemini 3 转为UI设计源文件，还原度99%

遇到赶项目的时候，看到优秀的参考设计想复用

以前只能苦哈哈地手动画框、填色。

今天分享一个工作流！只需要简单的几步

就能把参考图直接变成带 Auto Layout 的 Figma 源文件

还原度高达 99%！

废话不多说，直接上保姆级教程！👇

首先在网上找到一个参考图。

将参考图发到Gemini 3 pro中，提示词：1:1还原设计图，使用Html5+Tailwind CSS（通过CDN)和原生JavaScript 来实现。

右侧选择代码，全选复制代码。

然后把代码转为html，我这里用的是VS code，可以用电脑里的文本比较方便不用下载。

不过电脑自带的文本编辑会有很多问题，所以我电脑本身有VS code就直接用了。

下载VS code，链接：https://code.visualstudio.com/

下载完成后，把刚刚的代码粘贴到VS code，点击新建文件

输入文件名，index.html

在中间粘贴代码后，左上角点击【文件】→【另存为】桌面就可以了。

在figma中，打开html.to.design插件，没有的话可以在figma社区里面搜，这个插件可以免费用10次，第29天会重置，相当于每个月可以免费试用10次。

导入我们刚刚保存的html文件，点击Browse。

点击【添加到画布ADD】，这里可以选上自动布局，改起来会更方便！

选择刚刚保存的html文件后，点击打开

等待一会，就有可编辑的UI设计源文件了！

看看自动布局的效果，太棒了！

虽然中间用到了 VS Code，但大家千万别被“写代码”吓跑了。

因为它全程只需要复制+粘贴，连像我这样代码基础薄弱的设计师都能轻松上手。

在这个 AI 时代，我们不一定要成为程序员，但一定要学会利用 AI 帮我们省去重复造轮子的时间。

最后生成的源文件结构清晰，图层规范，甚至不仅是张图，连代码都有了。

这不仅仅是偷懒，更是未来设计工作流的一个缩影。

当 AI 能帮我们要这种脏活累活时，我们的核心竞争力就回到了创意本身。

今天的分享就到这里，希望对大家有帮助！