惊艳!10 多分钟生成前端网站,TREA 新功能 skill #TREA #skill能力 #前端开发 #Figma设计稿 #AI应用 一、展示内容:以将 Figma 的 UI 设计图转化为前端代码的方式,展示 TREA 新发布功能 skill 的应用。 二、生成前端网站代码:通过 TREA 的色模式、skill 和 MCP 的方式,根据前端 Figma 设计稿生成完整的前端网站代码。该网站支持分类、底部导航点击、搜索等功能,交互层面与实际开发的前端网站相同,且仅用 10 多分钟就完成了制作,并一键部署到域名上可直接访问。 三、SOLO 模式与 skill: 1. SOLO 模式:在 15 号发布,支持 skill 的方式。 2. skill 的定义:可以理解为一种 AI 型的智能体专项工具包,比直接定义规则更加丰富和专业。它是一个更专业的子智能体,通过特定规范生成,能专注于领域任务,按需调用,复用能力,将专业知识打磨成可复用指令,赋能新功能,使重复工作流程化,还具有互操作性。 3. 创建 skill:通过对话方式让 TREA 创建 skills,创建后在右侧编辑器的 trim 下有 skill 文档,如 fig 码转前端规范等。它会基于当前项目风格设计 skill,后续开发相同风格网站可复用。前期可定义基础 skill,其会根据需求描述选择对应 skill 作为提示词。也可手动创建 skill,设置名称、描述和指令。 四、生成前端网站的过程: 1. 首先使用 SOLO 模式的 build 方式,让 TREA 根据 Figma 设计稿创建一个 skill 文件,生成 fig 码转前端的技术规范,并在撤入 skill 中创建该文件。 2. 然后基于 Figma 设计稿设计中文前台网站,指定 Figma 数据。使用 TREA 的 SOLO 模式时,右侧可添加 Figma 工具,登录后跳转到设计稿,添加对话,选择页面添加对话可生成缩略图和原始数据文件。 3. 选择 Gemini 3 Pro 后,TREA 会先分析,生成产品和技术架构文档,在文档内容确定无误后进行确认开发,创建前端项目并完成。生成的文件可能部署失败,需自动调试,或第一次写提示时就让其生成完整的 H5 网站。 4. 生成完成后进行部署,使用 GitHub 账号授权,部署后在
00:00 / 07:24
连播
清屏
智能
倍速
点赞45
00:00 / 01:29
连播
清屏
智能
倍速
点赞2254
00:00 / 01:29
连播
清屏
智能
倍速
点赞21
00:00 / 02:48
连播
清屏
智能
倍速
点赞1197
00:00 / 06:43
连播
清屏
智能
倍速
点赞12
00:00 / 01:17
连播
清屏
智能
倍速
点赞2
00:00 / 02:53
连播
清屏
智能
倍速
点赞18
《字节TREA+Solo模式使用Figma工具教程》 #字节solo模式 #Figma #前端代码转换 #AI辅助开发 #Trae 视频纪要 分享主题:介绍在字节 solo 模式下,将 Figma 代码快速转换为前端代码以提高开发效率的方法。 1、生成效果展示:通过字节 SOLO 模式一次性生成网站,交互体验和效果佳且无 bug ,原始 Figma 原型图为从模板下载的前端 UI 设计图,生成过程做了微调。 2、操作流程 项目构建:新建文件 “figma demo 3”,添加内置 Figma 工具。登录 Figma 首页,选择提前下载好的模板,不选效果不佳的 Previews,选择 UI 设计并添加对应元素 (最多 3 个),基于 UI 元素生成前端代码和网站,可用提示词优化生成效果,随后运行,借助实时跟随功能了解 AI 思考及工具调用过程 。 3、Figma 知识及集成:Figma 是云端在线协同工具,具备矢量设计等优秀功能,通过 MCP 协议与 Trae 集成。传统配置需在 Figma 官网下载 access token ,在工具中添加 MCP,操作较复杂;在 Trae 中集成则可通过网页版自动选择元素添加,更为方便 。 4、转换原理优势:相比图片识别,Figma 能定位到元素级别,避免元素级误差,获取图生关系层次、尺寸、间距、颜色、字体样式等精准数据,转化为组件化前端代码 ,方便复用与优化。 5、总结:Trae 与 Figma 结合是全新 AI 辅助模式,能快速实现设计稿高精度还原,解决传统开发问题,可让 AI 修改代码以符合项目规范,实现快速迭代、优化和开发 。
00:00 / 08:24
连播
清屏
智能
倍速
点赞93
00:00 / 00:17
连播
清屏
智能
倍速
点赞32