📌程序员瑟瑟发抖,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一下。

相关推荐
围巾哥萧尘1 小时前
《凡人修仙传》系列作品导览网站打造🧣
trae
用户4099322502124 小时前
如何在FastAPI中巧妙隔离依赖项,让单元测试不再头疼?
后端·ai编程·trae
TimelessHaze4 小时前
面试必备:深入理解 Toast 组件的事件通信与优化实现
前端·trae
薛定谔的算法4 小时前
标准盒模型与怪异盒模型:前端布局中的“快递盒子”公摊问题
前端·css·trae
VUE16 小时前
借助Magic UI + Magic UI MCP Server + Trea 构建网站
mcp·trae
前端的日常19 小时前
使用Trae生成交互式地铁线路图
前端·trae
豆包MarsCode1 天前
学生开发者经验|豆包大模型 + TRAE,让 AI 应用快速落地
trae
兵临天下api1 天前
微店item_search - 根据关键词取商品列表深度分析及 Python 实现
trae
围巾哥萧尘1 天前
用 SOLO 模式 30 分钟搞定 智能点名系统 | 围巾哥萧尘🧣
trae
兵临天下api1 天前
微店 item_get 接口深度分析及 Python 实现
trae