TRAE MCP 实践：基于 Figma 设计稿的 iOS 原生 UI 自动生成

作者介绍：梁浩彬，TRAE 开发者用户

背景

本文主要探索使用 TRAE + Figma MCP 实践 iOS Native APP 开发进行 UI 还原。

本文主要探索的内容：

• 使用 TRAE 还原 Figma 中新页面的 UI 视觉稿

• 使用 TRAE 构造一些本地 mock 数据

• 使用 TRAE 实现简单的交互

• 将新的页面嵌入到原工程已有的页面当中

关于 TRAE MCP

Model Context Protocol (MCP) 是一种协议，它允许大型语言模型（LLMs）访问自定义的工具和服务。TRAE 中的智能体作为 MCP 客户端可以选择向 MCP Server 发起请求，以使用它们提供的工具。你可以自行添加 MCP Server，并添加到自定义的智能体中来使用。

• 更多信息可以看 TRAE 官方文档介绍：https://docs.trae.cn/ide/model-context-protocol
  

• 有关 MCP 可以查阅 MCP 官方文档：https://modelcontextprotocol.io/docs/getting-started/intro
  

如何使用 Figma MCP

生成 Access Token

1. 点界面左上角->Help and account->Account Settings

2. 对话框中切换到 Security，点 Generate new token

3. token 名称可以随便键入，在生成 token 之前，确保 Dev resources/File Content/Library assets/Library content/Team library content 改成 Read-only 权限

在 TRAE 中添加 Figma MCP

1. 看不到 MCP 功能入口的话，请到 TRAE 官网（https://www.trae.cn/）下载最新版本并更新

2. 点设置按钮-打开 MCP 市场

3. 搜索 figma，找到 Figma AI Bridge

4. 输入刚才在 Figma 上生成的 Access Token，即可完成 Figma MCP 相关配置

创建 MCP 智能体

1. 在设置中找到智能体，创建一个智能体

2. 在工具中勾选上 Figma AI Brige，就可以开始使用 Figma MCP 了

TRAE+MCP 实践

需求背景

本次探索在即梦最近定容的需求中找了一个新需求进行尝试。任务是在已有的相册的组件中，增加一个角色形象资源的管理页面，并且需要支持搜索的功能，具体的 Figma UI 如下所示：

选择 Figma 组件

在 Figma 中选中要实现的 UI 组件或 UI 页面，并且选择 Copy link to selection，复制组件的 URL。

使用 TRAE 生成 UI 代码

在生成代码之前，可以等 TRAE 对项目的上下文索引完成，生成的代码应该能有更好的效果。

结合上述需求相关的详情，在记事本中预先编写好 prompt，这一步尽可能给 TRAE 足够的上下文信息，并要求 TRAE 实现相关 mock 数据，下拉加载更多，以及搜索相关的交互逻辑。这里模型选择的是 Gemini-2.5-Pro-Preview。

在该目录下实现以下Figma UI，它是资源选择组件MediaStoreViewController中的“角色形象”Tab，这个Tab提供表情搜索和表情角色预留的能力，你需要实现这个Tab组件的UI , 并且命名为EmoticonsViewController，并集成到MediaStoreViewController中。EmoticonsViewController组件支持下拉加载更多，加载更多的过程中会显示一个loading，数据都加载完成后底部会显示“暂时没有更多了”。你需要准确100条本地mock数据，去模拟加载更多以及加载到底部的过程。并模拟搜索框搜索的逻辑，搜索逻辑按每一项中的标题进行关键词匹配。mock图片数据你可以在figma中获取你需要遵循MVVM的设计模式，可以参考UserAsset或Album目录中的文件结构划分和存放文件。资源选择组件MediaStoreViewController中其它两个Tab分别是相册组件AlbumViewController，以及即梦资产选择组件UserAssetViewController。

输入 prompt 后，TRAE 会开始思考并从远程获取 Figma 相关的信息，然后开始生成代码。给 AI 的需求越明确，生成的结果会越接近预期，所以写 Prompt 的时候最好不要偷懒——正如一个高质量的 prd 对 rd 的重要性。

编译调试过程

代码生成后需要在 Xcode 中进行编译验证。通常情况下不会一次就编译通过，需要进行一些调整：

• 编译错误处理：遇到编译不通过的地方，可以直接把报错信息告诉 TRAE 进行修正，但有时候人工修正会更快；

• AI 幻觉问题：AI 经常会出现一些幻觉，自己编造一些不存在的接口调用（如下图的加载图片接口）。经过几次调教无果后就需要手动修正了。

编译问题都修复后，发现相册组件并没有如预期那样添加"角色形象"的 Tab，于是继续给 AI 下达任务：

MediaStoreViewController当前的实现不正确，资源选择组件MediaStoreViewControlle中其它两个Tab分别是相册组件AlbumViewController，以及即梦资产选择组件UserAssetViewController。你需要参考源文件中相关的实现

这一步反复尝试沟通了很多次，AI 最终都没能在顶部 Tab 上加上"角色形象"页面。最后通过人工补全了一些逻辑，将 AI 实现的页面加到 Tab 上。可见 AI 当前对存量代码的理解还存在一定局限性。

实现效果与问题修复

先看 AI 实现的初步效果：页面框架基本都实现了，mock 和搜索逻辑也实现得不错，还是有点小惊喜的。但存在一些问题需要修复：

搜索框并没有按视觉稿中进行还原

• 这里问题是 AI 开始使用了系统的 UISearchBar 进行实现，由于 UISearchBar 的自定义样式的局限性，经过提示后让 AI 重新自定义了一个 SearchBar，基本对齐了视觉稿样式。

loading 的样式没有按视觉稿进行还原

• AI 先是采用系统的 UIActivityIndicator 组件进行实现，因为前面输入的 Figma URL 并没有这个 Loading 的样式，重新让 AI 按视觉稿进行实现。这里有点惊喜的是 AI 还能自己写 lottie 动画，不过最终还原的样式还是跟视觉稿上的存在一点差别，问题也不大。

过程还有一些其它的小问题，通过跟 AI 反复沟通或者自己动手解决都比较简单，这里就不一一展开了。来看一下最终的实现效果，虽然使用的是本地 Mock 数据，但整体上 UI 还原和基本的交互都有了，可见使用 TRAE 进行 UI 开发还原提效的效果还是相当显著的，原本需要花上半天到一天干 UI 还原的工作，AI 只需要几分钟就可以帮你搞定了。

总结与后续

1. 整体评价

TRAE + Figma MCP 进行 Native UI 编程当前已经达到比较可用的状态。虽然存在一些小问题，但整体效率提升还是非常明显的。尤其是对于全新开发的页面或 UI 组件，提效落地的效果会更好。想尝试 AI 编程的同学可以从这方面入手。从整个需求任务来看，大概可以节约 2/3 的时间。由于本任务需要 AI 理解较多原有上下文逻辑，人工介入相对多一些。如果是全新独立的模块，提效效果应该会更显著。

2. 当前局限性

TRAE 对工程中已有上下文的理解能力还不够完备，不过按目前的发展速度，相信这些问题在将来都会很快解决。目前在实践过程中发现的一些问题：

• 如果一个类通过扩展拆的文件比较多的话，AI 目前经常会遗漏这个类的一些上下文，从而导致一些协议实现遗漏，引起多处编译不过。所以当前的阶段，把扩展都写在一个文件中可能更便于 AI 的理解。

• AI 经常会出现一些幻觉，自己幻想出来一些接口，这里后续尝试一下建立一套 Rules 看看能否更好地解决这个问题。

3. 使用建议

• 代码审查必要性：过程中出现了一些明显的接口使用错误，需要自己甄别 review。AI 目前写的代码还是需要人工进行代码审查

• 快速上手新模块：对于 RD 接触陌生模块时，借助 AI 实现需求可以快速找到代码中各处需要修改的地方，大大降低了模块理解的上手成本

• 及时切换：有时候 AI 会比较"轴"，当反复详细沟通几次都无法完成任务时，就及时自己动手。使用 AI 越多，越能清楚 AI 的边界在哪里

• Prompt 编写技巧：Prompt 描述尽可能详细，减少 AI 理解与预期之间的 Gap，提高一次通过的几率。对于复杂问题，可以拆解成多步进行实现

• 模型选择：当前使用的是 Gemini-2.5-Pro-Preview，后续会尝试对比不同模型的生成效果