work design根据设计规范出UI
AI 生成 UI 并不稀奇，真正影响工作效率的是：它能不能使用团队现有组件，而不是每次重新设计一套按钮、卡片和导航。
我用国内版 TRAE Work Design 跑了一遍完整流程：导入自己的 Figma 组件库、指定组件生成页面、局部修改，最后导回 Figma。
国内版和国际版入口
国内版：
TRAE 官网：https://www.trae.cn/
TRAE Work：https://work.trae.cn/国际版：
TRAE 官网：https://www.trae.ai/
TRAE Work：https://work.trae.ai/国内版和国际版是两套独立服务，登录方式、模型、额度和部分功能可能不同。下面主要讲国内版。
第一步：整理 Figma 组件库
不要一开始就导入整个公司设计系统。文件越复杂，解析越慢，错误组件也越容易干扰结果。
第一次测试建议只准备：
-
品牌颜色和字体规范
-
Button、Search、Tag、Navigation
-
2～3 个业务卡片
-
1～2 张完整示例页面
组件命名尽量清晰，例如：
Button/Primary/Default
Tag/Selected
Card/Resource
Navigation/Bottom同时尽量使用 Variant 和 Auto Layout。TRAE 能不能正确理解组件，很大程度上取决于原始 Figma 文件是否规范。
第二步：导入自己的组件
打开 work.trae.cn，创建 Workspace，切换到 Design 模式。
进入：
设计系统 → 添加设计系统 → 解析 Figma粘贴 Figma 文件链接并开始解析。完成后，TRAE 会整理出颜色、字体、组件和部分视觉规范。
解析成功不代表百分之百准确，仍然需要人工验收。
第三步：指定组件生成页面
导入设计系统后，找到本次页面需要使用的组件库
这是很关键的一步。只导入组件库，AI 只是知道这些组件存在；添加到对话，才是在明确告诉它：本次页面优先使用这些组件。
生成后先检查组件是否真的被使用，再看页面是否好看。
第四步：修改和导出 Figma
大范围结构调整可以直接对话；修改某张卡片时，先选中对应区域，再要求它只修改当前内容；字号、间距和文案等小问题，直接使用属性面板调整。
设计完成后选择：
导出 → Figma国内版目前的导出方式可能是先复制到系统剪贴板，再打开 Figma 使用 Command + V 粘贴，并不一定自动创建新的 Figma 文件。
实际优点
最大的优势不是“一句话出图”，而是可以先读取自己的设计系统，再基于现有组件搭建页面。
它比较适合：
-
快速扩展列表页、设置页和详情页
-
根据现有组件生成相似页面
-
补充空状态、加载状态和异常状态
-
减少重复复制和搭建组件的时间
局部选择后再修改，也比传统 AI 生图工具更容易控制修改范围。下图是调用trae组件生成的后台页面：
实际缺点
出不了视觉太强的设计图效果，更适合出手机端的原型、排版和b端弱视觉比较好
收费情况
目前所有人都可免费，但有以下限制：
-
最多同时运行 2 个云端任务（生成设计稿、设计转代码都占用云端任务）
-
高峰时段需要排队
若想不排队，就可升级，付费计划如下：
最后总结
TRAE Work Design 目前更像一个能够读取设计系统的执行助手。
把它当成“自动替代设计师”的工具，很容易失望。
把它用来减少重复搭页面的时间，才是现阶段更实际的用法。