这是一个创建于 142 天前的主题，其中的信息可能已经有所发展或是发生改变。
没有设计稿也能很漂亮，非常适合独立开发：Trae + 飞个马 MCP
大家好，我是一名前端工程师，也是开源图片编辑器vue-fabric-editor项目的作者，最近一直在迭代我们的商业版图片编辑器，因为团队规模比较小，没有专门的设计师，就尝试使用 Trae + figma + MCP 来优化页面样式，没想到效果超级棒，真的惊艳到我了， 非常适合没有设计师提供设计稿的小团队或者独立开发者。
作为一个工作十余年的切图仔，真的觉得是在解放生产力，这里做一下使用的简单介绍，推荐给大家。
说明
大部分开发者都希望一键生成，目前看多少还是有点噱头的，直接生成 HTML 可以，但是要生成完整可运行的代码，稍微加点业务逻辑就不行了，但是换个思路，稍微调整一下步骤，就出现了事半功倍的效果。
我的思路是先开发功能，再调整样式，使用起来效果就很好。
我们的步骤是先让实习的同事做功能开发，把调用接口和展示逻辑开发完成，但是一般页面都会素素的，很没有食欲(别笑，你写也不行...)， 如下图：
然后我再通过 Trae + figma + MCP 来做样式优化，这是优化完成的效果，下边是调整后的效果：
样式优化的结果我很满意的，另外我只是在 AI 的结果上做了轻微少量的调整，真的很高效。
如何使用
一共分为 5 步，前 2 个步骤只需要设置一次，几分钟搞定，后续直接使用就可以。
- 获取 Figma 账号 Token 。
- Trae 设置 MCP Token 。
- Figma 挑选喜欢的模板
- 复制元素链接并交给 AI ，预览结果
- 微调 上线。
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 一下吧。
 | 1 jettzhang 142 天前 好贴 |
 | 2 TimPeake 142 天前 有点意思 |
 | 3 wangstar 142 天前 学到了 |
 | 4 dnslint 142 天前 这个 MCP 在其他编辑器上可以使用吗 |
 | 5 kenzhao 142 天前 步骤很细节 |
 | 6 DyingSwan 142 天前 刚在掘金看完 |
 | 7 PluginsWorld 142 天前 测试了一下，为啥楼主的有复制为链接，我操作的时候没有这个  |
| 8 PluginsWorld 142 天前 通过 template 搜索的可以有，通过自己测试画的设计稿没有  |
| 9 PluginsWorld 142 天前 测试了一下效果不错。不过没弄明白为啥自己画的设计稿是不能复制为链接  |
| 10 PluginsWorld 142 天前 知道了，group 可以有，如果是直接的元素，就没有了 |
 | 11 jasononly4work 142 天前 好思路哎，我一直都是口述或者，感觉效果还是不尽如人意 |
 | 12 ricky077 142 天前 真心好贴，我这种只会后端的，打开了新思路～ |
 | 13 allblux 142 天前 via iPhone 后端前来学习一下 |
 | 14 jackge0323 142 天前 看着有点意思，留个标记，回头仔细研究下。 |
 | 15 wfhtqp 141 天前 mcp 图里泄露 apikey 了 |
 | 16 volantRookie 141 天前 这个有个弊端，就是样式写的很难维护，如果先定义好统一样式，给 trae 参考，整体效果会偏向一个风格 |
 | 18 zzwyh 141 天前 打开新思路了 |
 | 19 nihaojob OP @volantRookie 是的 目前还不要期望 AI 完成所有的事情，但是确实可以拆分一些细节给 AI 来做，而且结合 MCP 比普通人做的要好还省时间 |
 | 22 AmaQuinton 141 天前 后端前来学习下 |
| 23 nihaojob OP @AmaQuinton 又一个后端大佬卷前端了 |
 | 24 webwlx 141 天前 @volantRookie 可以让他用 tailwindcss 写 |
 | 26 DreamingCTW 141 天前 后端来学习下 |
 | 27 lzjunika 141 天前 厉害 |
 | 28 weian 141 天前 下次试试 |
 | 29 qrcoderlwq 141 天前 大佬可以转载嘛 标注作者 |
| 31 nihaojob OP @qrcoderlwq 可以转载的 |
 | 33 greensy 141 天前 设计狗进来看看前端玩到什么程度了 |
 | 34 bzj 141 天前 不错，深受启发 |
| 36 PluginsWorld 140 天前 目前可以 ai 生成能编辑的设计稿，然后人工微调，再通过 mcp 完成还原    |
 | 37 bojue 140 天前 @PluginsWorld #36 这个效果感觉不错呀 |
Select Language