使用字节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 工具动态,评测,提效。

相关推荐
骇客野人6 小时前
Redis 完整安装部署方案(Linux,分【源码编译】+【Docker】两种,推荐生产用源码,测试快速用 Docker)
运维
蓝速科技9 小时前
会议室门牌公告通知发布选型与落地指南丨蓝速科技
大数据·运维·数据库·人工智能·科技
chicheese10 小时前
Linux 面试速查表:从初级到高级,附高频场景答题模板
linux·运维
Linux-lucky10 小时前
32-38-Linux学习之旅之MySQL综合
linux·运维·学习·mysql·ubuntu
智能运维指南11 小时前
2026年ITSM系统怎么选?四款主流方案与五维评估模型
运维·itsm·嘉为蓝鲸
我命由我1234511 小时前
Git 推送报错:error: src refspec main does not match any
运维·git·gitee·github·运维开发·学习方法·版本控制
骇客野人11 小时前
测试环境MySQL迁移Vastbase(海量数据库)完整改造与落地实施方案
运维·服务器
迪康Defender12 小时前
终端安全实战:如何高效解决企业U盘泄密与管控难题
运维·网络·安全·web安全·终端安全管理
zly350012 小时前
VMware Converter Standalone 物理机转化为虚拟机后源1硬盘变成了2个硬盘(2个硬盘文件)虚拟机无法启动。
linux·运维·服务器
智能运维指南13 小时前
2026 企业智能运维平台选型:私有化、信创、全链路打通该怎么权衡?
运维·嘉为蓝鲸·aiops平台·一体化运维平台