字节跳动的 AI 开发平台 TRAE，其 Work 产品新增 Design 模式。据量子位等报道，该模式支持解析 Figma 设计系统、对界面元素框选编辑、并一键导出为代码，使 Work（需求/任务）、Design（设计）、Code（代码）三种模式在同一平台中打通，覆盖从”需求”到”设计”再到”代码”的全链路。
已知事实
- 新增 Design 模式：在 TRAE Work 中加入设计环节，支持解析 Figma 的设计系统（组件、设计 token 等）、框选界面元素进行编辑，并一键将设计转为代码。
- 三模式打通：Work、Design、Code 三模式同处一个平台，意在让”需求梳理—界面设计—代码实现”在一处连续完成，减少跨工具切换。
- 设计转代码能力：TRAE 此前已支持通过 MCP 协议（Figma AI Bridge）读取 Figma 设计稿的结构化数据，实现”粘贴链接→一键生成→可运行页面”。有第三方实测称可显著缩短单页开发时间（相关数值见下方待核实）。
- 定位：面向产品经理、设计师与开发者的协作链路，强调把业务目标、用户场景与交互规则映射到页面架构与组件。
横向与纵向定位
横向看，”设计与代码的打通”正被从两端同时推进。一端是设计工具侧——如 Figma 在 Config 2026 推出 Code Layers，让设计图层与代码双向同步；另一端是开发平台侧——TRAE 把设计环节(Design 模式)并入 AI 开发平台，从 IDE 一侧向设计延伸。两者方向相反、目标一致：抹平”设计稿”与”可运行代码”之间长期存在的交接损耗。与单纯的”Figma 转代码”插件相比，TRAE 的特点是把设计放进”需求—设计—代码”的连续工作流，而非只做某一段转换。
纵向看，设计转代码的形态在演进：从早期的导出插件、到基于 MCP 的设计稿读取、再到此次”设计环节原生进入 AI 开发平台、三模式打通”。其指向是让从想法到上线的链路尽量在同一环境内连续完成，减少工具切换与信息丢失。
⚠️ 待核实：Design 模式的具体能力边界、可用范围与上线时间，以 TRAE 官方公告为准（本文主源量子位页面本次未能完整抓取，事实据加更取料与多源报道概述）；第三方实测所称”单页开发时间由约 3 小时缩短至约 15 分钟、设计还原度约 98.7%”等数值来自个案测试，非官方口径，仅供参考；TRAE 与 Figma 的具体协作方式（原生解析 vs. MCP 桥接）以官方文档为准。
TRAE 把设计环节并入 AI 开发平台、打通”需求→设计→代码”三模式，与设计工具侧”设计⇌代码双向同步”的趋势相向而行，共同指向设计与实现之间交接损耗的消除；对设计工程化、人机协同与产品/UI 教学，提供了一个可观察的全链路工作流样本。
参考来源：
- 量子位：https://www.qbitai.com/2026/06/438750.html
- 火山引擎开发者（TRAE + Figma 6A 工作流）：https://developer.volcengine.com/articles/7545011162895613971
- TRAE 官方文档（MCP × Figma）：https://docs.trae.cn/ide/tutorial-mcp-figma
- InfoQ（TRAE + Figma 产品设计自动化）：https://www.infoq.cn/article/rpo4r7tolbumybjdcjgq