Trae:从设计到接口,全栈自动化IDE

在当今快速迭代的软件开发环境中,如何高效地将设计稿转化为可运行的代码,并无缝对接后端服务,一直是开发团队面临的挑战。

近期,Trae 的平台推出了多项重磅更新,实现了从 Figma 设计还原Supabase 数据库对接 ,甚至 大模型集成 的全流程自动化开发能力,显著提升了前端与后端开发的效率。

一款优秀的AI Trae需要具备的能力:

  • 前端
  • 纠错
  • 需求
  • 原型
  • 推理
  • 接口

现在大部分AI IDE,对于页面的编写以及后端(数据库+接口)这方面可能有点欠缺。这次Trae隆重推出SOLO模式中的Figma(一键还原设计稿) + Supabase(一键做数据库连接口)

设计 + 接口 = 全栈自动化

一、Figma 设计稿一键还原为前端代码

Trae 最新版本中,增强了对 Figma 的设计稿解析能力。用户只需在平台中打开 Figma 设计文件,选中任意图层或组件,即可通过"听家到对话"(疑似语音或指令输入功能)向 Trae 提出开发需求。

例如,用户可以这样

"参考这个 Figma 设计,搭建一个 View 的路由框架,配置移动端和 Pad 端适配,顶部为功能导航,点击后文字变为蓝色。"

Trae 会自动将复杂任务拆解为多个子任务,逐步完成代码生成。用户可在"Solo模式"中实时预览生成效果,并支持多端适配查看。

注意📢要在solo模式:

📢:Trae 更新了更新了更新了-> 添加了集成Figma

打开Figma的设计稿,然后添加到对话

也可以去除掉Trae自动配的对话:参考这个figma设计搭建一个vue的路由框架,适配移动端和pad,底部tab是功能导航,icon和文字选中后变成蓝色。然后等待Trae自动去开发界面了。

二、对接 Supabase:自动生成后端接口与数据库

点击集成,就可以看到Supabase服务了。

除了前端还原,Trae 还集成了 Supabase ,支持用户快速构建后端接口和数据库表

用户只需在 Trae 中连接 Supabase 项目,即可通过自然语言指令创建数据表、插入测试数据、甚至编写查询逻辑。

例如:

"设计一张会员大厅表,插入一些测试数据,注册时间大于2023年1月2日,只保留最近一人,并添加点击介绍接口。"

Trae 会自动生成相应的 SQL 语句和 RESTful 接口,并可在前端直接调用。(若接口出现问题,用户还可通过对话方式让 Trae 进行调试和修复。)

三、集成大模型能力,支持智能开发辅助

Trae 还接入了"大元模型"(疑似指大型语言模型如 GPT 等),用户可配置自己的 API Key,从而在项目中使用 AI 辅助开发。无论是代码生成、逻辑补全,还是接口调试,Trae 都能通过大模型能力智能完成原本需要手动编写的开发任务。

四、完整流程演示:从设计到接口的自动化实践

通过一个"会员大厅"页面的实际案例,Trae 展示了其完整的工作流:

  1. 从 Figma 选中设计图层,指令生成前端框架;
  2. 通过 Supabase 生成数据库和接口
  3. 前端自动发起请求,展示带有动画效果的交互界面;
  4. 整个过程无需手动编写代码,全部由 Trae 自动完成。

Trae 的这次升级,真正实现了从设计到接口的全栈自动化开发。它不仅提升了UI还原的精度,还打通了前后端的数据流,甚至集成AI能力以理解复杂需求。这对于中小型团队、独立开发者甚至大型企业的快速原型开发都具有重要意义。

相关推荐
Elastic 中国社区官方博客1 分钟前
将 agents 连接到 Elasticsearch 使用模型上下文协议 - docker
大数据·数据库·人工智能·elasticsearch·搜索引擎·docker·ai
一水鉴天11 分钟前
整体设计 修订 之1 三“先”之“基” 与范畴重构:康德先验哲学的批判性程序化实现
java·人工智能·算法
我叫侯小科21 分钟前
机器学习-支持向量机
人工智能·机器学习·支持向量机
Java中文社群33 分钟前
哇塞!AI编程神器Kiro,免排队畅用真Claude模型!
人工智能
IT_陈寒37 分钟前
Python性能优化必知必会:7个让代码快3倍的底层技巧与实战案例
前端·人工智能·后端
即兴小索奇1 小时前
AI智能物流仓储新变革:从自动分拣到动态路径规划,破解仓储运营效率难题
人工智能·ai·商业·ai商业洞察·即兴小索奇
中草药z1 小时前
【SpringAI】快速上手,详解项目快速集成主流大模型DeepSeek,ChatGPT
人工智能·flux·sse·springai·deepseek·硅基流动·流式编程
BioRunYiXue1 小时前
FRET、PLA、Co-IP和GST pull-down有何区别? 应该如何选择?
java·服务器·网络·人工智能·网络协议·tcp/ip·eclipse
界面开发小八哥2 小时前
界面控件Telerik UI for Blazor 2025 Q2新版亮点 - AI集成全面增强
人工智能·ui·blazor·用户界面·telerik
皮皮学姐分享-ppx2 小时前
机器人行业工商注册企业基本信息数据(1958-2023年)
大数据·人工智能·python·物联网·机器人·区块链