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

相关推荐
大耳朵-小飞象1 小时前
电力安全运维的智能密码:BACS如何破解设备全生命周期管理难题,让电网安全“看得见、管得住”?
运维·安全·智慧城市·能耗系统·楼宇智控·未来生活
极客侃科技2 小时前
制造企业 MES/APS 选型:SAP PP/DS 集成、ERP-MES 边界划分与一体化架构要点
运维·架构·制造
微硬创新2 小时前
耐达讯自动化 CC-Link IE 转 PROFINET网关在污水厂智能化升级实战
人工智能·物联网·网络协议·自动化·信息与通信
生活爱好者!5 小时前
我把NAS当作下载机,docker一键部署qb
运维·docker·容器
尽兴-6 小时前
企业业务系统架构选型与渐进式演进
运维·系统架构·devops
通信小小昕7 小时前
Ubuntu 26.04 中文输入法安装
linux·运维·ubuntu
壮哥_icon7 小时前
【Android 系统开发】使用 BAT 脚本高效自动化管理 /system/priv-app/ 系统应用(安装与卸载)
android·运维·自动化
RD_daoyi7 小时前
外链权重暴跌至13%,品牌提及反超传统链接——2026年不做Digital PR,你的独立站等于隐形
运维·网络·学习·机器学习·搜索引擎
电商API_180079052478 小时前
企业ERP进销存场景|京东商品详情接口自动同步方案|凭证鉴权批量调用技术实操
大数据·运维·人工智能·爬虫·数据挖掘·网络爬虫
张小姐的猫8 小时前
【Linux】网络编程 —— HTTP协议(上)
linux·运维·服务器·网络·http·单例模式·策略模式