大家好，我是一名前端工程师，也是开源图片编辑器vue-fabric-editor项目的作者，最近一直在迭代我们的商业版图片编辑器😍，因为团队规模比较小，没有专门的设计师，就尝试使用Trae + figma + MCP来优化页面样式，没想到效果超级棒，真的惊艳到我了， 非常适合没有设计师提供设计稿的小团队或者独立开发者。

作为一个工作十余年的切图仔，真的觉得是在解放生产力，这里做一下使用的简单介绍，推荐给大家。

说明

大部分开发者都希望一键生成，目前看多少还是有点噱头的，直接生成HTML可以，但是要生成完整可运行的代码，稍微加点业务逻辑就不行了，但是换个思路，稍微调整一下步骤，就出现了事半功倍的效果。

我的思路是先开发功能，再调整样式，使用起来效果就很好。

我们的步骤是先让实习的同事做功能开发，把调用接口和展示逻辑开发完成，但是一般页面都会素素的，很没有食欲(别笑，你写也不行...)， 如下图：

然后我再通过Trae + figma + MCP来做样式优化，这是优化完成的效果，下边是调整后的效果：

样式优化的结果我很满意的，另外我只是在AI的结果上做了轻微少量的调整，真的很高效。

如何使用

一共分为5步，前2个步骤只需要设置一次，几分钟搞定，后续直接使用就可以。

1. 获取Figma账号 Token。
2. Trae设置 MCP Token。
3. Figma 挑选喜欢的模板
4. 复制元素链接并交给AI，预览结果
5. 微调 上线。

1. 获取Figma账号 Token。

登录后从设置页面，生成Token，权限选择只读。

2. Trae设置MCP Token

搞前端Trae还不知道就不说了，这么漂亮的编辑器，用起来很顺手，我是不舍得换了。
AI对话框点击设置 => MCP，然后点击添加，搜索Figma AI Bridge，安装后设置Token就可以了。

好了，这些设置只需要1次，设置完以后就不用每次调整了，接下来就是使用了。

3. Figma 挑选喜欢的模板

接下来就很简单了，在Figma网站上挑选自己喜欢的模板，我搜索的关键词是 dashboard，可以挑选一些和现有页面机构类似的效果图。

这是我挑选的几个效果图：

4. 复制元素链接并交给AI，预览结果

Figma 可以直接定位到某个元素的链接，我们选中一个区域后，右键复制链接。

然后在Trae的AI对话框中选择智能体，把链接复制上，并选中要调优的代码，把你的需求告诉AI。

5. 微调 上线

相比比较我们自己手写很多样式去调整，AI的效率很高了，好描述好理解的就交给AI，简单的就自己手动调整一下(别太懒，AI再智能就没工作了😂)。

结尾

自己也算是一个比较资深的切图仔了，从网页三剑客的Dreamweaver写Table布局开始，再到Sublime的快捷键编写网页，再到VScode，再到现在的AI类智能编辑器，真的是翻天覆地的变化。

我很认同在某个播客采访中提到的一个观点：积极的拥抱AI吧，未来是属于会用好AI的人。

最后，为我们的开源图片编辑器 https://github.com/ikuaitu/vue-fabric-editor 拉个粉，大家Star一下吧。