术语理解

术语	释义
主题 Theme	主题色 / 字体 / 间距
图形 Graphic	图标 / SVG
组件 Components	组件。由 Theme 和 Graphic 构成的组合产物
规范 Spec	规范。即由 Theme/Graphic/Components 构成的一种文字规范。 给设计系统补充上下文 以便更好理解整体设计风格的 Markdown 文档，与 SOLO 客户端的 Skill 完全解耦。
设计系统 Design Library	存放一整套设计规范，包含以上所有部件（Theme/Graphic/Components ） 的仓库。

一、Design 模式是什么

Design 模式是 TRAE Work 中面向设计任务的工作模式。它不是简单的“AI 画图”，而是帮助你从想法、参考图或设计规范出发，生成更接近可交付页面原型的设计结果。

它也不是直接给到 AI 一个截图要求复刻，而是可以让 AI 更多地遵循已有设计体系，不需要一切从头开始设计。

你可以把它理解为一个设计助理：你描述目标，提供参考素材，选择合适的设计系统，AI 会尝试生成页面、组件布局和视觉风格。后续你还可以继续通过对话让它修改。

它适合做什么

• 设计还原：上传 UI 参考图，让 AI 尽量还原页面布局、颜色、字体、组件和图片素材。
• 概念成稿：用一句话描述想法，让 AI 先生成一个可看的页面草稿。
• 规范出图：对齐指定设计系统或视觉规范，产出更符合品牌和团队标准的页面。
• 快速探索：在没有明确设计稿时，先生成几个方向，再逐步调整。

它不适合做什么

• 替代完整的专业设计评审和品牌规范制定。
• 只用一句很笼统的话就期待一次生成最终稿。
• 在没有素材、没有目标、没有风格偏好的情况下直接交付高精度页面。

二、进入 Design 模式

在 TRAE Work 左上方的模式切换区，选择 Design，即可进入 Design 模式。

依旧是三栏布局：左侧栏是显示技能、设计系统和任务列表，页面中间是 Design 输入框，右侧栏是待办事项、任务产物和参考信息。

中间对话区域：

• 输入框：描述你想生成的设计，也可以上传参考图或文件。
• 内置快捷任务模版：我们内置了3个模板，快速选择“设计还原、概念成稿、规范出图”等常见任务。

• 运行位置：选择本地，必要时也可以结合文件夹或项目资料。

• 选择模型：当前 Design 模式仅支持 TRAE Auto Model 和添加自定义模型。

左侧面板

• 技能：添加自己所需要的技能，让页面更好看更规范
• 设计系统：选择已有视觉规范，或添加自己的设计系统。
• 管理任务列表

右侧面板

• 待办事项：执行过程中的步骤计划
• 产物：生成的设计产物
• 参考信息

三、创建第一个设计任务

最简单的开始方式，是在输入框里直接描述你想要的页面。描述不需要专业，但要让 AI 知道目标、平台和风格。

推荐提示词公式

你可以按照这个公式来写：

示例：

帮我设计一个移动端宠物成长记录 App 首页。
目标用户是养宠物的新手。
风格希望温暖、清爽、适合日常记录。
页面里需要有宠物头像、今日提醒、成长记录入口、照片时间线和底部导航。

上传更多参考图

如果你已经有截图、设计稿或参考页面，可以先上传图片，再告诉 AI 希望保留哪些内容。

帮我把这个页面还原为移动端 UI 稿。
要求 1:1 复刻页面布局、颜色、icon、头像、组件样式、字体、CTA 和图片素材。
如果无法完全还原，请优先保证结构、层级和视觉风格一致。

四、使用设计系统

设计系统可以理解为一套视觉和组件规范。它会帮助 AI 在生成页面时参考固定的配色、组件、排版和布局规范，让结果更像一个团队或品牌的正式设计稿。

什么时候需要设计系统

• 你希望页面符合某个品牌或产品的视觉风格。
• 你不希望每次生成出来的按钮、卡片、字体都不一样。
• 团队已经有 Figma、组件库或设计规范，希望 AI 基于这些资产继续生成。
• 你要做多个页面，希望它们看起来像同一套产品。

选择已有设计系统

在输入框的设计系统入口中，可以选择内置设计系统，例如 TRAE Work、TRAE、火山、抖音、豆包、苹果等。新手可以先选择一个接近目标产品风格的系统，再发起任务。

风格展示

设计一个电竞赛事官网首页
整体采用黑色科技感视觉，深色背景，红蓝霓虹光效，未来感 HUD 界面元素，
页面风格偏职业联赛 / 全球总决赛级别
首屏赛事主视觉、赛事信息、赛程安排、战队展示、票务购买、赛事直播、新闻资讯、赞助商和页脚。

添加自己的设计系统

如果你要使用团队自己的视觉规范，可以进入左侧 设计系统 页面，点击 添加设计系统。添加方式通常包括：

• 解析 Figma：上传 .fig 文件，让 AI 基于已有 Figma 文件构建设计系统。
• 导入设计系统：导入已有的 TRAE Design 设计系统文件。
• 风格探索：如果没有现成模板，可以描述你想要的风格，让 AI 帮你创建一套新的视觉方向。

五、预览、修改和导出

以内置模板生成的产物为例

预览设计稿

Design 任务生成后，你可以打开产物预览页面。预览时重点看三件事：页面结构是否对、信息层级是否清楚、视觉风格是否符合预期。

点击预览不同尺寸的样式。

• 网页、平板、手机、自定义尺寸

继续修改

• 如果生成结果已经接近目标，可以继续用自然语言修改。直接点击需要修改的部分，选择“添加到对话”，在对话框编辑修改要求，发送给 AI。
• 新手可以从这些简单指令开始：
  PLAIN TEXT复制

  把整体风格调得更简洁一些。
  把标题字号调大一点。
  把主按钮改成更醒目的颜色。
  增加一个底部导航栏。
  把页面改成更适合移动端阅读的布局。

当然你可以自然和 AI 表达你的想法，必要情况下可以上传一些图片附件作为参考。

• 直接调整页面的设计数据

导出 & 继续开发

设计稿完成后，可导出图片、Figma、代码，或衔接到 Code 模式继续开发，实现 Design to Code 的完整闭环。

我们这里选择导出到 Code 模式进行开发，可以看到内容已经填充好在对话框了，可以直接开始开发！

六、常见问题

Q1：Design 是不是只能给设计师用？

A：不是。它更像产品、设计、前端之间的早期共创工具。产品可以用它表达需求，设计可以用它探索方向，前端可以用它理解页面结构。

Q2：Design 模式是不是 Figma 的替代品？

A：不是完整替代。它更像是把设计系统和 AI 生成能力接入工作流，帮助你更快生成、修改和交付页面原型。专业设计评审、复杂矢量编辑和团队协作仍然需要结合专业设计工具。

Q3：没有设计基础可以用吗？

A：可以。新手可以先用“概念成稿”或快捷任务卡片开始。只要说清页面类型、使用场景、风格和必须出现的模块，就能得到一个可继续修改的初稿。

Q4：什么时候要上传参考图？

A：当你希望 AI 尽量还原某个页面时，上传参考图最有效。只靠文字描述很难完整表达布局、间距、颜色和组件细节。

Q5：什么时候要选设计系统？

A：当你希望页面符合某个品牌、产品或团队规范时，就应该选择设计系统。没有明确风格时，可以先用自由探索或内置设计系统尝试。

Q6：生成结果不满意怎么办？

A：先不要重新开始。可以指出一个最具体的问题，例如“导航太重”“卡片太密”“主按钮不明显”“更像 B 端后台一点”。越具体，AI 越容易改到位。

七、练手小作业

1. 进入 TRAE Work 的 Design 模式。
2. 在输入框输入下面这段提示词。
3. 生成后观察：有没有标题区、核心内容区、行动按钮和底部导航。

帮我设计一个移动端读书记录 App 首页。
目标用户是想培养阅读习惯的人。
风格希望简洁、安静、有一点书店感。
页面里需要有今日阅读进度、最近阅读的书、阅读打卡按钮和底部导航。

完成后，你应该可以看到：

• AI 生成了一个移动端页面草稿。
• 页面里包含你指定的几个核心模块。
• 如果不满意，你可以继续追问“更简洁一点”“增加卡片层次”“换成深色模式”。

附｜提示词模板

概念成稿

请用 Design 生成一个【产品 / 业务】的页面原型。
目标用户：【谁使用】；核心任务：【用户要完成什么】。
页面范围：【首页、列表页、详情页、确认页等】。
视觉风格：【关键词 3-5 个】。
输出要求：适合产品评审，信息层级清楚，关键状态不要遗漏。

设计还原

请参考我上传的 UI 截图，生成同类页面原型。
需要保留：布局结构、信息优先级、关键组件。
可以优化：文案表达、留白、按钮层级、移动端适配。
不要照搬品牌内容，替换成【你的业务】场景。

规范出图

请对齐【设计系统 / 品牌风格】生成一套高保真页面。
业务场景：【SaaS / 运营后台 / 小程序 / 官网等】。
页面范围：【页面清单】。
重点要求：组件一致、状态完整、适合交给前端继续实现。