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 Code
(D2C
)。
设计师和产品经理无需等待开发资源,通过 Figma
集成加速需求落地,活动页、功能演示页等轻量需求只需简单调整即可投入使用,实现快速验证,减少跨角色协作的等待成本。
当然除了前端,还可以集成Superbase
完成全栈开发,功能还是非常多的。如果你也想用上这么强大的功能,现在即刻开启SOLO一下。