📌程序员瑟瑟发抖,TRAE SOLO 内置 Figma📌

TRAE SOLO 内置 Figma,我们就给它一点时间,先喝杯茶,回过头来,页面就已经生成好了。怎么样,效果是不是非常棒?还可以一键部署!


📌 核心内容解读:

1. 工具介绍

  • Trae(AI代码生成工具)。
  • 功能:读取Figma设计稿,自动生成前端代码(包括页面跳转路由)。

掘友们,一个复刻视觉稿的时代真的来了!所见即所得!!!操作超级简单:只需要对模型说一句话,"帮我写个HTML,复刻这个视觉稿"。然后用上这个优化提示词的功能,直接选择从Figma导入。它就乖乖地开始噼里啪啦干活啦!

2. 准备工作

第一次需要授权登录Figma账号。Solo 升级内置 Figma 工具,新增 Figma 窗口,首次使用需授权登录,无需切换至浏览器或 Figma 平台即可直接查看设计文件、调整图层顺序、修改基础样式等。

  • 需要注册Figma账号并安装Figma应用。
  • 获取Figma设计稿(".fig"文件)。在 Solo中已导入 Figma 设计文件,支持自动解析并转化为可运行代码,可一次识别多个页面,用户只需在窗口内选择设计页面并发送指令,AI 即可生成对应代码片段。
  • Figma中打开设计稿,确保能选中组件和页面。支持选择整个 Frame 生成完整页面代码,也支持按钮、表单、卡片等单个组件,还可通过提示词补充页面跳转逻辑、按钮动画模式等信息。

3. 操作步骤

Solo Builder 能够解析页面层级与结构,高度还原视觉设计并生成前端代码。

  • 在工具界面中,逐个选择页面和组件,并指定交互逻辑(例如:点击某个按钮跳转到某个页面)。
  • 通过"添加到对方框"(可能指"添加到对话"或"插入到指令框")将选中的元素和跳转目标插入到指令中。
  • 每次最多只能插入5个页面,所以如果设计稿有31个页面,需分6次处理。
  • 发送指令后,工具会生成代码,但可能不完全正确,需人工检查优化。

Trae就能读取Figma的一万种设计,之后帮我们写出前端代码来实现跳转路由。

也就是说,我们只要有Figma设计稿,做出前端就变得特别简单。

最关键的是,我们自己完全可以掌控,不用再大费周章地改来改去。包括朋友们去官网找七八十个设计稿,好多可爱的Figma原创稿,随便找几个自己喜欢的,上手特别好用。自己去Trae上面试试。

朋友们,在Figma设计稿中,每个组件和每个页面我们都是可以随意选中和随意点击的。所以我们选中第一个页面,这个时候上方"添加到对话框"会变成可操作状态,然后我们点击"添加到对话框",导入图片的标题和图片就加载完成了。之后我们告诉Trae:请准确重现Figma设计页面,我点击......这个时候我们要把点击的按钮选中,插入到对话框,跳转到......

4. 注意事项

  • 生成的跳转逻辑和路由不一定100%准确,需对照设计稿手动检查和优化。
  • 工具支持批量处理,可分批次生成代码。

✅ 总结:这是一个Figma设计稿转前端代码+路由跳转的半自动化工具使用教程。

工具大致流程:

js 复制代码
Figma设计稿 → 工具读取 → 用户指定交互逻辑 → 生成前端代码(含路由)→ 人工检查优化

无论是开发者、设计师还是产品经理,Solo 都能精准还原设计细节。

前端或独立开发者无需手动拆解设计稿和还原样式,Solo 可自动将 Figma 文件转为可直接运行的前端代码,跳过设计标注、手动编码和反复调试环节,大幅压缩从设计到开发的周期,实现快速的 Design to CodeD2C)。

设计师和产品经理无需等待开发资源,通过 Figma 集成加速需求落地,活动页、功能演示页等轻量需求只需简单调整即可投入使用,实现快速验证,减少跨角色协作的等待成本。


当然除了前端,还可以集成Superbase完成全栈开发,功能还是非常多的。如果你也想用上这么强大的功能,现在即刻开启SOLO一下。

相关推荐
用户4099322502127 小时前
PostgreSQL数据类型怎么选才高效不踩坑?
后端·ai编程·trae
用户4099322502122 天前
PostgreSQL UPDATE语句怎么玩?从改邮箱到批量更新的避坑技巧你都会吗?
后端·ai编程·trae
用户4099322502126 天前
PostgreSQL 17安装总翻车?Windows/macOS/Linux避坑指南帮你搞定?
后端·ai编程·trae
用户4099322502127 天前
能当关系型数据库还能玩对象特性,能拆复杂查询还能自动管库存,PostgreSQL 凭什么这么香?
后端·ai编程·trae
豆包MarsCode8 天前
基于 TRAE 的自动化测试用例智能生成方案
trae
岛风风8 天前
你还在让ai这样解决编程问题?
程序员·trae
用户4099322502128 天前
给接口加新字段又不搞崩老客户端?FastAPI的多版本API靠哪三招实现?
后端·ai编程·trae
程序员爱钓鱼9 天前
Go语言100个实战案例-项目实战篇:股票行情数据爬虫
后端·go·trae
用户40993225021210 天前
FastAPI秒杀库存总变负数?Redis分布式锁能帮你守住底线吗
后端·ai编程·trae
豆包MarsCode10 天前
AI 工具站开发:3 小时 SOLO,全栈开发+自动部署
trae