使用字节Trae + MCP,UI 到网页自动化。

大家好,我是樱木。

前端客户市场或者甲方,这边设计稿一出来,恨不得当天就要出结果。每家公司的研发总是滞后于市场的,这个是客观存在的。

AI 编程,越来越贴近市场环境,不再纠结于语言、范式等等。

客户发设计稿,我们使用字节 Trae,配置好 MCP,一个 UI 界面就出来了!

首先打开 figma 的官方网站:

https://www.figma.com/

没有注册的用户,进行注册登录就好。

然后我们左上角,点击 Setting

点击这里 Security,切好到这个标签。点击最下面的 Generate new token。

创建 token,先起一个名字,方便查找,token 失效时间我们用默认的 30 天失效,同时一些读取权限打开,最后点击生成 token。

生成 token,这个 token 后面会用到,效果如下:

我们打开 Trae

点击右上角的齿轮设置图标,点击 MCP。

点击添加,从市场添加。

点击添加 Figma AI Bridge

token 是我们刚刚复制过来的,填入进去。

打开 figma,在里面找到一个 figma 模版,点击 share

点击 Copy link

我们输入:我提供的fgma链接:<刚刚复制的链接> ,帮我生成静态网页。

出现运行,点击运行。

最后效果如下:

这种模式,适合独立开发者,快速交付。好消息是,公司里面也在推进这个事情。

总结一下,这种 UI 自动化出界面,拼到最后比的是:大模型能力。

好啦,今天的分享就到这里了。有帮助的帮忙点个赞。

AI 系列入门手把手教程:AI教程合集

我是樱木,持续探索 AI 领域,主要分享最新的 AI 工具动态,评测,提效。

相关推荐
鹏大师运维7 小时前
为什么信创电脑装软件总提示“软件包架构不匹配”?
linux·运维·架构·国产化·麒麟·deb·统信uos
007张三丰7 小时前
软件测试专栏(11/20):测试框架开发:pytest深度解析与插件体系
运维·服务器·自动化测试·pytest·测试框架
weixin_604236678 小时前
华三 路由器 极简核心配置
运维·服务器·网络·h3c·h3c路由器
鹤落晴春9 小时前
【Linux复习】管理SELinux安全性
linux·运维·服务器
AI智图坊9 小时前
多件装组合SKU图的批量生产效率分析:从PS手工到AI自动化的工作流改造
大数据·运维·人工智能·gpt·ai作画·自动化·aigc
云烟成雨TD10 小时前
Spring AI 1.x 系列【56】用大模型评判大模型:递归顾问实现自动化评估方案
人工智能·spring·自动化
qq_3665665012 小时前
视频配音自动化Pipeline:TTS选型+音色克隆+批量处理(附完整代码)
自动化·新媒体运营·音视频·音频
云计算磊哥@14 小时前
运维开发宝典026-MySQL02数据库表操作
运维·数据库·运维开发
天天进步201514 小时前
Tunnelto 源码解析 #9:控制服务器设计:Warp、WebSocket、Ping/Pong 与连接保活
运维·服务器·websocket
极客先躯15 小时前
高级java每日一道面试题-2026年02月01日-实战篇[Docker]-Docker Volume 的生命周期管理是怎样的?
java·运维·docker·容器·持久化·架构图·容器卷