Trae CN + Figma MCP 从 UI 设计到微信小程序代码生成保姆级教程

于 2025-04-30 13:00:34 发布
阅读量740 收藏 6
点赞数 26
分类专栏： Trae 文章标签： figma ui 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chunjuzhong/article/details/147629793
版权

最近 AI Coding IDE 工具 #Trae 进行了一系列大更新，其中比较重要的是支持 #MCP。

我之前曾经在 Trae 国内版中使用 chat 模式用 DeepSeek-V3 2024-03-24 生成过一个音乐播放小程序的 HTML UI 设计。但是一直还没有找到从 UI 设计到代码生成的好路径，特别是免费的方法（穷嘛），就暂时搁置到一边了。现在看到 Trae 支持 MCP ，就赶紧验证一下是否好用。

什么是MCP？

MCP 是 AI 模型 Claude 所属的研发公司 Anthropic 在2024年提出的一项开源协议，全名为 Model Context Protocol。它允许大语言模型（LLMs）访问自定义的工具和服务。根据 Trae 官方文档所说，Trae 中的智能体作为 MCP 客户端可以选择向 MCP Server 发起请求，使用它们提供的工具。而且可以自行添加 MCP Server，并添加到自定义的智能体中来使用。

而 Figma UI 设计工具提供了 #Figma MCP，也就是说我们可以让 Trae 利用设计好的 Fiagma UI 数据直接生成 UI 界面代码。

DeepSeek 生成UI

首先说一下 UI 生成，音乐播放器的提示词我参考了一个博主的旅游APP提示词，具体是哪个博主不记得了：

#角色
你是一位资深设计资深前端开发工程师
#设计风格
优雅的极简主义美学与功能的完美平衡；
清新柔和的渐变配色与品牌色系浑然一体；
恰到好处的留白设计；
轻盈通透的沉浸式体验；
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现；
用户视线能自然聚焦核心功能；
精心打磨的圆角；
细腻的微交互；
舒适的视觉比例；
强调色：按APP类型选择
#技术规格
1、单个页面尺寸为 375x812PX，带有描边，模拟手机边框
2、图标：引用 mui、antd 或 favicon矢量图标库内的svg图标（
最低0.47元/天 解锁文章
3. 实战（一）：Spring AI & Trae ，助力开发微信小程序
有一只柴犬的专栏
03-27 1213
到此，基本程序编码时间不到1小时就可以完全搞定，主要耗费时间的就是在不断的AI调整上。当然可能前面给的提示词比较粗糙也有关系，大家可以认真的给到一段提示信息，应该就不需要花过多时间去调整细化。代码我还未上传到Github，大家有需要可以私聊我，或者等我有空我上传到Github：https://github.com/Shamee99真正经验的是，我只是简单手绘了一个PRD草稿，Trae就可以代替我写出相关代码，而且还原度接近90%。大家细品~
Trae中配置和使用MCP 服务保姆级教程
最新发布
cpp加油站的专栏
04-24 319
您好，我是程序员夏叶，深度AI编程使用者，专注于分享AI编程方面的使用技巧和经验，有兴趣的可以关注我的公众号，一起学习，共同进步。从21号开始，Trae开始陆陆续续的灰度推送了一次新版本，有的用户是21号收到的更新，有的用户是22号收到的更新，本次更新我愿称之为王炸级更新，具体更新内容可以去看我的上一篇文章。本次更新其中的一个内容就是支持了MCP 服务，那么什么是MCP呢，它的全称是。
【Cursor实战】Cursor+Figma MCP UI设计稿一键转前端代码
zww学习笔记
04-20 158
Figma是一款基于浏览器的云原生界面设计工具，支持多人实时协作、矢量图形设计和跨平台使用，广泛应用于网页、移动应用及产品设计团队协作。它以强大的协作性、丰富的插件生态和便捷的使用方式，显著提升设计团队的工作效率和设计质量。
实验 Figma MCP + Cursor 联合工作流
roamingcode的博客
02-22 3506
使用此 Model Context Protocol 服务器授予 Cursor 对 Figma 文件的访问权限。当 Cursor 可以访问 Figma 设计数据时，它比粘贴屏幕截图等其他方法更能准确地进行代码转化。具体配置方式可直接参考仓库中详细介绍。
国内一流AI代码编辑器Trae CN深度解析：开发者新晋效率神器
qq_63984365的博客
03-21 969
2025年3月，字节跳动正式推出国内首个**AI原生集成开发环境Trae CN**（官网：https://www.trae.com.cn/），对标海外Cursor等工具，却以更懂中国开发者的本土化设计引发热议。| **本土化** | 中文注释/错误提示优化 | 依赖英文语境 || **生态** | 兼容VS Code插件（23款中文专属插件） | 百万级插件市场 |
Trae 项目使用教程
gitblog_00022的博客
05-25 1732
Trae 项目使用教程 trae :postbox: Minimalistic Fetch based HTTP client 项目地址: https://gitcode.com/gh_mirrors/tr/trae ...
前端开发又幸福了，Cursor + Figma MCP 快速还原设计稿
奇舞周刊
03-26 758
使用 Figma MCP 对比之前我直接截图给 AI 进行还原，进一步提升了准确性，原先 claude 是需要识别图片，现在可以直接读取 Figma 的元数据了。我用自己的话理解，简单讲就是一个开放给 AI 应用访问外部某某平台，某某应用的一个接口，AI 可以通过 MCP 来获取到更具体的相关数据。指定要写入的文件，并提出相对应的要求。他支持绑定 MCP 服务，我使用的 0.45 版本，应该此版本以上都支持。最后的成品 下方是设计稿，上方是他一次性就实现的界面。还是很赞的，调整下高度和边距就可以用了。
Trae 开源项目使用教程
gitblog_01122的博客
08-26 672
Trae 开源项目使用教程 trae:postbox: Minimalistic Fetch based HTTP client项目地址:https://gitcode.com/gh_mirrors/tr/trae 项目介绍 Trae 是一个高效、灵活的日志处理框架，旨在简化日志收集、处理和分析的过程。它支持多种日志格式，并提供了丰富的插件和扩展机制，使得用户可以根据自己的需求定制日志处理流程。...
Trae使用学习指南
m0_64196863的博客
02-28 7110
与 AI 助手对话时，你可以指定 Trae 中的内容（包括代码、文件、文件夹、工作空间）作为上下文供 AI 助手阅读和理解，从而确保 AI 助手的答复更符合你的要求。系统将会从对应的 IDE 中获取插件、IDE 设置、快捷键设置等信息并一键导入到 Trae 中，帮助你快速从其他 IDE 切换到 Trae。后，终端将运行该命令。根据你的需求，AI 助手会自动创建新文件或编辑已有文件，并自动保存生成的代码。在内嵌对话输入框中输入你的需求，包括为代码添加注释、解释选中的代码、优化选中的代码等等，然后点击右侧的。
Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录
q1003675852的博客
02-27 1652
Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录
Trae开发贪食蛇小游戏
岁月不饶人，我亦未曾饶过岁月
03-24 756
今天我们用Trae来做一款贪食蛇的H5小游戏，来体验一下对话能力和代码生成效果，话不多说直接开始。
安装Trae入门教程文档
IT技术博客
03-19 1500
工作空间” 通常为一个在 Trae 中打开的文件夹。若你的项目较为复杂，也可以将多个文件夹添加至一个 “工作空间”。
全网最详细Trae教程 | 零基础安装配置+Java/前端开发实战
hangbingbihai的博客
02-27 6651
Trae是由字节跳动推出的AI原生集成开发环境（IDE），深度融合Claude 3.5和GPT-4o模型，支持智能代码生成、多模态交互及全流程项目构建。其安装流程简单，用户可通过官网下载安装包，按指引完成主题选择（暗色/亮色/深蓝）、语言配置（原生中文界面）及开发环境迁移（支持从VS Code/Cursor一键导入插件与设置）。
Trae AI IDE 全网最全的使用教程
热门推荐
子冉冰清的博客
03-02 1万+
近期，字节发布了一款 AI Coding 产品 ——其优雅的 UI、丝滑的交互、母语级的支持、更高的 AI 集成度、更‮然自‬的交‮式互‬对话开发、更‮‬精准的 AI 生‮效成‬果，都让你感到亲切和惊艳！它不再是一个工具，而是一个能 “思考” 和 “共创” 的协作者，帮助你更灵活的调用 AI 参与项目，实现更高效率、更好效果的开发体验。
打工人必备！请查收「字节AI编程神器Trae的保姆级使用指南」
不能不吃肉不能不进步的博客
02-20 1万+
Trae是字节跳动推出的智能编程助手，像我们的"编程小老师"，无需懂复杂代码，用中文描述需求就能自动生成代码，可以几分钟搞定贪吃蛇、扫雷等小游戏，分析数据等重复性工作，尤其适合非技术岗的职场新人。请注意：敏感数据建议先脱敏再喂给AI！！需求提的越详细，结果也会越精准哦！欢迎大家一起切磋AI的具体使用场景～希望大家在这个AI横行的时代，不要惊慌不要焦虑（大不了打不过就加入），虽然有些人是乙方（比如我），但！我们可以做Trae做AI的甲方吖！我们都会在这个时代留下独特的印记，就像同一个指令会有不同的结局。
Cursor+MCP+Figma，自动完成工程化项目，效率直接提升200%（手把手教程）
强化学习曾小健
03-17 2655
总的来说，MCP 的出现就像是给 AI 装上了一个"万能适配器"，让它能够更好地理解和使用各种工具，从而真正融入到我们的日常工作中，带来更实用和个性化的 AI 体验。4）点击 Security 页签，找到 new token，点击进入填写信息，保存即可得到 token，复制备用。打开您的网络浏览器，访问 Cursor 的官方网站：https://www.cursor.com/cn。今天给大家分享下，Cursor+MCP+Figma，让工程项目自动化生成，效率直接提升200%～
字节跳动AI编辑器Trae基本配置教程
weixin_43811753的博客
02-17 7169
字节跳动AI编辑器Trae配置教程
TRAE 国内版的组件和使用教程
qq_31156563的博客
03-10 2746
Trae 国内版的两种工作模式分别是 Builder 模式和 Chat 模式，总的来说，Builder 模式更适合从头开始构建项目，具有更强的工程能力和自动化程度，而 Chat 模式则更侧重于解答问题和优化代码，适合在开发过程中进行即时的咨询和优化。trae 国内版对比海外版和cursor 功能上还是有一定的差距，比如Trae 国内版不支持上传图片生成代码的功能，支持的大模型相对较少等，但是我相信只是时间问题。TRAE#功能 ，#和我们聊天一样，具体指向某个对象，这里就是告诉AI具体的上下文信息来源。
玩转大模型——Trae AI IDE国内版使用教程
e891377的专栏
03-04 5796
工作空间” 通常为一个在 Trae 中打开的文件夹。若你的项目较为复杂，也可以将多个文件夹添加至一个 “工作空间”。Trae Builder 模式可以帮你从零开始开发一个完整的项目。你可以轻松地把它融入到你的项目开发过程中。在 Builder 模式下，AI 助手会根据你的需求使用各种工具来回应。这些工具包括分析代码文件、编辑代码文件、运行命令等等，让回应更准确、更有效。
之前在微信开发里面编写的微信小程序，怎么在trae中运行呢
03-11
<think>好的，我需要帮助用户了解如何将微信小程序的代码迁移到Taro框架下运行。首先，我得回忆一下Taro的相关知识，特别是迁移步骤。根据用户提供的引用内容，引用[1]提到Taro支持使用React语法编写并输出多端代码，包括微信小程序和App。引用[3]提到Touch WX工程可以编译成微信小程序代码，但用户的问题相反，是要将现有的微信小程序代码迁移到Taro。引用[4]提到用户之前可能使用原生技术栈，现在需要迁移到Taro。 首先，我需要整理迁移步骤。可能需要安装Taro环境，初始化项目结构，然后处理原有代码，比如页面、组件和配置。微信小程序的页面有四个文件（.js, .wxml, .wxss, .json），而Taro使用React风格的单个文件，比如.jsx或.tsx，样式可能用.scss或.css。因此，需要将这四个文件整合到Taro的组件或页面中。 然后，配置方面，微信小程序的app.json在Taro中是config/index.js，需要调整配置项。还有，Taro的API和微信原生API可能有所不同，需要替换为Taro的API，比如wx.request换成Taro.request。 另外，引用[3]提到Touch WX的组件基于自定义组件机制，可能Taro也有类似的组件库，或者需要适配原有组件。用户可能需要检查组件兼容性，或者使用Taro的UI库。 测试和调试也是关键步骤，确保迁移后的代码在Taro中运行正常，然后编译到目标平台。可能还需要处理差异，比如使用条件编译处理不同平台的代码。 最后，用户可能需要优化和调整代码结构，遵循Taro的最佳实践，比如按功能组织代码，使用Hooks等。 现在需要将这些步骤结构化，分点说明，确保用户能逐步操作。同时，根据用户提供的引用，正确标注引用来源，例如引用[1]和引用[3]。还要生成相关问题，比如迁移后的优化、多端兼容处理等。</think>### 如何在Taro中运行微信小程序代码的迁移步骤 要将微信小程序原生代码迁移到Taro框架下运行，需遵循以下步骤： --- #### **1. 初始化Taro项目** - 安装Taro CLI工具： ```bash npm install -g @tarojs/cli taro init my-app ``` 选择对应框架（如React）和编译模式（如微信小程序/App）[^1]。 --- #### **2. 调整代码结构** - **页面文件整合**： Taro使用单文件组件（`.jsx`/`.tsx`），需将微信小程序的四个文件（`.js`, `.wxml`, `.wxss`, `.json`）合并。 例如，将 `index.wxml` 的模板转换为JSX语法，`index.js` 中的逻辑迁移到Taro的生命周期方法中，样式文件改为 `.scss` 或 `.css`。 - **配置迁移**： 将微信小程序的 `app.json` 中的全局配置（如页面路径、窗口样式）迁移到Taro项目的 `config/index.js` 中[^2]。 --- #### **3. 替换原生API** - Taro提供统一的跨平台API，需将微信原生API（如 `wx.request`）替换为 `Taro.request`。 例如： ```javascript // 微信原生 wx.request({ url: '...' }); // Taro适配 Taro.request({ url: '...' }); ``` --- #### **4. 组件兼容性处理** - **自定义组件**： 若原小程序使用了自定义组件，需按Taro组件规范重构（如使用Props传递数据，事件绑定用 `onClick` 替代 `bindtap`）[^3]。 - **第三方组件库**： 推荐使用Taro官方UI库（如 `@tarojs/components`）或兼容Taro的第三方库。 --- #### **5. 多端编译与调试** - 通过修改 `package.json` 中的脚本命令，编译到不同平台： ```bash # 编译为微信小程序 taro build --type weapp # 编译为H5 taro build --type h5 # 编译为React Native（需额外配置） taro build --type rn ``` - 使用 `Taro.openApp` 等跨平台API处理端差异。 --- #### **6. 优化与测试** - **条件编译**： 使用 `process.env.TARO_ENV` 区分平台逻辑： ```javascript if (process.env.TARO_ENV === 'weapp') { // 微信小程序特定逻辑 } ``` - **性能优化**： 按Taro最佳实践调整代码结构，如减少不必要的渲染、使用Hooks管理状态。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值