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

相关推荐
Fcy6481 小时前
Linux下 进程(一)(冯诺依曼体系、操作系统、进程基本概念与基本操作)
linux·运维·服务器·进程
袁袁袁袁满1 小时前
Linux怎么查看最新下载的文件
linux·运维·服务器
代码游侠1 小时前
学习笔记——设备树基础
linux·运维·开发语言·单片机·算法
Harvey9031 小时前
通过 Helm 部署 Nginx 应用的完整标准化步骤
linux·运维·nginx·k8s
珠海西格电力科技3 小时前
微电网能量平衡理论的实现条件在不同场景下有哪些差异?
运维·服务器·网络·人工智能·云计算·智慧城市
释怀不想释怀3 小时前
Linux环境变量
linux·运维·服务器
zzzsde3 小时前
【Linux】进程(4):进程优先级&&调度队列
linux·运维·服务器
聆风吟º5 小时前
CANN开源项目实战指南:使用oam-tools构建自动化故障诊断与运维可观测性体系
运维·开源·自动化·cann
NPE~5 小时前
自动化工具Drissonpage 保姆级教程(含xpath语法)
运维·后端·爬虫·自动化·网络爬虫·xpath·浏览器自动化
极客小云5 小时前
【ComfyUI API 自动化利器:comfyui_xy Python 库使用详解】
网络·python·自动化·comfyui