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

相关推荐
Leinwin3 小时前
OpenClaw 多 Agent 协作框架的并发限制与企业化规避方案痛点直击
java·运维·数据库
2401_865382503 小时前
信息化项目运维与运营的区别
运维·运营·信息化项目·政务信息化
漠北的哈士奇3 小时前
VMware Workstation导入ova文件时出现闪退但是没有报错信息
运维·vmware·虚拟机·闪退·ova
如意.7594 小时前
【Linux开发工具实战】Git、GDB与CGDB从入门到精通
linux·运维·git
运维小欣4 小时前
智能体选型实战指南
运维·人工智能
yy55274 小时前
Nginx 性能优化与监控
运维·nginx·性能优化
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ5 小时前
Linux 查询某进程文件所在路径 命令
linux·运维·服务器
05大叔7 小时前
网络基础知识 域名,JSON格式,AI基础
运维·服务器·网络
安当加密7 小时前
无需改 PAM!轻量级 RADIUS + ASP身份认证系统 实现 Linux 登录双因子认证
linux·运维·服务器
dashizhi20157 小时前
服务器共享禁止保存到本地磁盘、共享文件禁止另存为本地磁盘、移动硬盘等
运维·网络·stm32·安全·电脑