14 · 多模态输入

图片、截图、Figma 设计稿、手绘草图——让 Trae “看懂”视觉信息，从设计直达代码。

01 什么是多模态输入

传统 AI 编程对话只有一种沟通方式：文字。你打字描述需求，AI 生成代码。但”描述一个界面长什么样”，用文字说清楚非常痛苦。

试想你要告诉 AI 做一个登录页：左上角是 logo，中间是”欢迎回来”的标题，下面是邮箱输入框和密码输入框，密码框右边有个眼睛图标能切换显示…你写了一大段描述，AI 生成的结果可能还是对不上你脑子里的画面。

多模态输入解决了这个根本矛盾。它让 AI 的”眼睛”和”耳朵”同时工作——你不再只能打字，还可以直接给 AI 看图片、设计稿、手绘草图。

Trae 是当前所有 AI IDE 中多模态能力最完整的工具之一。它支持四种视觉输入形态，覆盖从”粗线条想法”到”像素级设计稿”的全谱段。

心智模型：多模态输入像给 AI 配了一副眼镜——以前你跟 AI 说”把那个按钮放到右边”，AI 只能猜你在说哪个按钮。现在你截个图圈出来，AI 看一眼就知道。

02 支持的输入类型

Trae 支持四种视觉输入，按”信息密度”从高到低排列：

Figma 源文件（最高质量）

通过 MCP（Model Context Protocol）将 Figma 直连到 Trae，这是最推荐的输入方式。AI 能直接读取 Figma 文件中的图层结构、自动布局（Auto Layout）、颜色变量、字号层级——不靠”猜”，而是靠”读”。

配置方法后续有单独教程，核心思路是获取 Figma Access Token 后在 Trae 中配置 MCP Server。

高清截图

截图是使用频率最高的输入方式。无论是设计稿导出图、网页截图、还是竞品 App 的界面截图，拖进去就能用。

关键要求：

• 建议分辨率 ≥ 1440px（宽边）
• 避免 JPEG 过度压缩（肉眼能看到的锯齿，AI 也看不清）
• 裁剪干净，去掉无关的浏览器工具栏、状态栏

手绘草图

Trae 对手绘草图的支持比很多人预期的要好——这不是简单的”图片识别”，而是 AI 能理解你的手绘意图：框是按钮、线是分割线、圆是头像。

但实话实说：手绘草图是保底方案，不是首选。如果你手头已经有设计稿，用截图或 Figma 直连的效果会好得多。

报错截图

这是很多人忽略的用法。遇到 Bug 时，截图错误信息丢进 Trae 的对话框——AI 不仅能读报错文字（OCR），还能同时看到错误出现的界面上下文，给出更精准的修复方案。

03 四种输入方式：怎么把图给 Trae

Trae 支持四种上传图片的方式，覆盖所有使用习惯：

操作演示（文字版）

1. 在 Trae 中切换到 Builder 或 Chat 模式
2. 底部输入框左侧有个图片图标（📷），点击可上传
   ── 或直接把图片拖入输入框
   ── 或截图后直接 Cmd+V
3. 输入框内显示缩略图预览
4. 在图片下方写文字指令
5. 按 Enter 发送，AI 开始分析

特别说明：Builder 模式和 Chat 模式都支持多模态输入，但推荐在 Builder 模式下使用。因为 Builder 会连创建文件、装依赖、启动预览一起完成，而 Chat 模式只给代码建议，需要你手动 Apply。

04 AI 如何”看懂”你的图片

理解 AI 处理视觉输入的机制，能帮你更好地利用这个功能。简单来说分为三步：

第一步：视觉编码

Trae 背后的大模型（豆包 1.5 Pro / Claude / GPT-4o）内置了视觉理解能力。当你上传一张图片时，模型不是”看到”这张图（它没有眼睛），而是将图片编码成特征向量——把像素信息转换为数学表示。

这个过程相当于：AI 把图片拆解为”这里有个矩形、那里有段文字、颜色是 #1A73E8”这样的结构化信息。

第二步：语义理解

编码完成后，AI 开始理解内容含义：

• 这是登录界面还是注册界面？
• 导航栏在顶部还是侧边？
• 那个圆角矩形是个按钮还是个搜索框？
• 图中的文字写了什么？

这一步依赖模型本身的训练数据——模型见过无数 UI 界面，所以能准确判断 “右上角有三个点的图标是菜单按钮”。

第三步：代码映射

理解内容后，AI 将视觉元素映射为代码：

• 顶部区域 → <header> 或 nav
• 输入框 → <input> + label
• 按钮 → <button> + 样式
• 间距和布局 → CSS Flexbox / Grid

┌──────────┐      ┌──────────┐      ┌──────────────────┐
│  图片输入  │ ──→  │ 视觉编码   │ ──→  │  代码生成          │
│  设计稿   │      │ 识别元素   │      │  映射为组件 + 样式  │
│  截图     │      │ 理解布局   │      │  输出完整代码       │
└──────────┘      └──────────┘      └──────────────────┘
                     ↓
               ┌──────────┐
               │ 语义理解   │
               │ 登录页？   │
               │ 颜色含义？ │
               └──────────┘

为什么有时候还原度不够？ 三步中的任何一环都有误差：

• 图片分辨率低 → 第一步就丢失了细节
• 设计稿布局不标准 → 第二步理解错了结构
• AI 对框架的掌握不够 → 第三步生成的 CSS 布局有偏差

05 设计稿转代码：实测质量与准确度

以下数据来自多篇实测报告的综合结果，供你参考：

不同输入方式的还原度对比

与手动编码的效率对比

一个真实案例

用一张 Spotify 播放列表截图输入 Trae Builder，输入指令：

根据这张截图，用 Next.js + Tailwind 创建一个音乐播放列表页面。
包含：侧边导航栏、顶部搜索框、播放列表表格（歌曲名、歌手、专辑、
时长）、底部播放控制栏。

实测结果：

• 布局准确度：85%——导航栏、列表、播放控件的整体布局复现正确
• 颜色风格：AI 自动提取了深色主题，但不是 100% 还原 Spotify 的暗色值
• 交互：AI 生成了 hover 效果和点击响应，但播放进度条只是静态展示

结论：初版能拿到 80-90% 的还原度，剩下的 10-20% 需要手动微调。但比起从零写代码，这已经省掉了最耗时的”搭骨架”阶段。

06 最佳实践：让还原度从及格到惊艳

同样是拖一张图进 Trae，高手和新手的差距可以很大。以下是几条经过验证的最佳实践：

6.1 分辨率是第一道门槛

为什么分辨率重要：AI 在做视觉编码时，低分辨率图片的小字会糊成一团。如果 AI 看不清按钮上的文字，它就猜不出那个按钮是做什么的。

6.2 裁剪要精准

多余的背景信息是噪声。上传前：

• 去掉浏览器工具栏、地址栏
• 去掉桌面背景或窗口阴影
• 只保留设计稿本身

6.3 配合文字指令

不要只给图不给话。同样的设计稿，不同的文字描述产出完全不同：

❌ 差："写个页面"
✅ 好："根据截图用 Vue 3 + Tailwind 实现这个仪表盘页面，
       顶部是日期筛选器，左侧是折线图，右侧是数据统计卡片列表，
       表格需要支持排序"

❌ 差："照着做"
✅ 好："Tech stack: React + CSS Modules。组件拆分：
       DashboardHeader、StatsCard、ChartWidget、DataTable。
       颜色从截图自动提取。响应式：≥1024px 三列，<768px 单列。"

6.4 复杂页面分块处理

一个常见的错误是把整张大设计图一次性丢给 AI——结果 AI 处理不过来，细节大量丢失。

正确做法是分块处理：

1. 截图导航栏 + 侧边栏 → 生成布局框架
2. 截图数据卡片区域 → 生成 StatsCard 组件
3. 截图表格部分 → 生成 DataTable 组件
4. 截图底部内容 → 生成 Footer 组件

每块单独输入，最后拼装。这样每个组件都能获得 AI 的充分注意力。

6.5 指定技术栈

Trae 默认会按它觉得”最合适”的技术栈输出，但你可能需要特定的框架。在指令中明确声明：

React 18 + TypeScript + Tailwind CSS + Next.js App Router

或：

Vue 3 + Naive UI + px 单位（不要 rem）

技术栈声明越早越好——最好在第一次输入时就写清楚，否则 AI 生成的代码可能和你现有项目不兼容。

07 图文混输：图片 + 文字的配合艺术

多模态输入最大的误解是”有了图片就不需要文字了”。事实恰恰相反：图片提供视觉参考，文字提供意图和约束。

三种典型的图文配合方式：

方式 A：图为主，文字为定位

你有一张完整设计稿，文字只用来告诉 AI “这是什么东西”。

[设计稿图片]
"这是一个电商 App 首页，帮我用 Flutter 实现。
重点：顶部搜索栏需可点击跳转搜索页，
中间商品卡片列表用 GridView 实现，支持下拉刷新。"

方式 B：文字为主，图为参考

你已经有想法，图片只是辅助示意风格。

"帮我做一个数据仪表盘页面。参考截图的大致布局，
但颜色用公司品牌色（主色 #2563EB、辅助色 #10B981），
字体用 Inter。图表用 Recharts 而不是截图中的 ECharts。"

方式 C：多图对比

上传多张截图，让 AI 融合多个来源的优点。

[图A - 布局参考]
[图B - 颜色参考]
[图C - 交互参考]

"结合这三张图的优点：用图A的导航布局，图B的配色方案，
图C的卡片交互效果。做成一个 React 组件。"

这种方式特别适合竞品分析场景——从多个产品中借鉴不同的亮点。

可以混输的内容类型

08 什么时候用多模态，什么时候手写

多模态输入不是银弹。知道什么时候用和坚持不用，是效率分水岭。

推荐用多模态的场景

不适合用多模态的场景

心智模型：多模态输入适合”长得是什么样”的问题，不适合”怎么工作”的问题。做 UI 用多模态，做逻辑用手写 + Chat。

09 局限性

承认局限是成熟使用的前提。Trae 的多模态输入目前有以下限制：

9.1 文字识别准确率有限

如果设计稿中有大量小字（12px 以下），AI 可能读不准。尤其是：

• 中文字体 vs 西文字体混排
• 艺术字体 / 手写字体
• 深色背景上的浅色文字

应对：关键文字在文字指令中重新写一遍，不要依赖 AI 从图中 OCR。

9.2 复杂布局的偏差

嵌套层次超过 5 层的布局，AI 可能在还原时出现”缩进对不齐”或”层级错误”的问题。这是当前视觉模型对深层嵌套理解的普遍短板。

应对：复杂布局分块处理，不要一次性丢一整张大图。

9.3 动态效果不可见

截图是静态的，AI 看不到 hover、点击展开、弹窗出现这些动效。你需要用文字补充说明交互逻辑。

应对：在文字指令中逐条列出交互，而不是让 AI “按截图做”。

9.4 品牌色值不会完全一致

AI 从图片中提取的颜色值会和原始设计稿有偏差（一般在 ±5% 以内）。品牌色敏感的场景，需要在文字指令中给出精确色值。

应对：在提示词中加入颜色规范，例如：“主色 #1A73E8，次色 #34A853，警告色 #EA4335”。

9.5 输出代码质量有波动

10 小结

一句话总结：多模态输入是 Trae 最实用的功能之一，它把”设计”和”开发”之间的翻译成本降到了接近零。但它是搭骨架的工具，不是精装修的替代品——初版代码出来后，你的审美和技术判断仍然是决定成品质量的关键。

下一篇：15 提示词工程 —— 写好 Prompt，让 AI 理解你的真实意图，产出更精准的代码。