Trae IDE评测体验：通过 MCP Server - Figma AI Bridge 一键将 Figma 转为前端代码

优质文章学习记录

— 7 min read
Trae IDE评测体验：通过 MCP Server - Figma AI Bridge 一键将 Figma 转为前端代码

Trae IDE评测体验：通过 MCP Server - Figma AI Bridge 一键将 Figma 转为前端代码

在现代前端开发中，从设计稿到可用页面的交付往往需要大量重复劳动：切图、手写样式、布局调整……而借助 MCP Server - Figma AI Bridge，我们可以将 Figma 设计稿自动转换成整洁的 HTML/CSS/JS 代码，并立即生成可预览的网页。一键化、傻瓜式操作，让设计交付效率跃升。

先下载 Trae IDE，让我们一起开始吧！
[立即免费获取 Trae]：https://trae.ai
Trae IDE 下载页面预览

演示环境

本文测试使用的系统环境如下：

  • Trae IDE 版本：0.5.5
  • macOS 版本：14.7
  • Node.js 版本：20.19.1
  • npx 版本：10.9.2
  • Python 版本：3.13.3
  • uvx 版本：0.6.16

一、安装并启动 Trae IDE

Trae IDE 与 AI 深度集成，提供智能问答、代码自动补全及基于 Agent 的 AI 自动编程能力。首次使用时，前往官网下载并安装：

  1. 访问官网下载页面并选择对应平台的安装包。
  2. 双击运行安装程序，按提示完成安装。
  3. 启动 Trae IDE，初次打开会看到欢迎页及快速入门指南。

二、配置 MCP Server 运行环境

为了让 MCP Server 正常工作，需要安装 Node.js、npx、Python 及 uvx 工具。

1. 打开 Trae IDE 终端

  • 启动 Trae IDE。
  • 在顶部菜单栏依次点击 终端 > 新建终端，打开内置命令行。
在 Trae IDE 中打开终端


新建终端示例

2. 安装 Python 与 uvx

  1. 前往 Python 官网 下载并安装 Python 3.8+。
  2. 安装 uv 工具集（包含 uvx）：

验证 uvx 安装：

uvx --version

执行环境初始化：

source$HOME/.local/bin/env

Windows (PowerShell)：

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

macOS / Linux：

curl -LsSf https://astral.sh/uv/install.sh |sh

在终端验证安装：

python3 --version

3. 安装 Node.js 与 npx

  1. 前往 Node.js 官网 下载并安装 Node.js 18+。
  2. 若看到类似 v18.x.x、10.x.x 的版本号，则说明安装成功；重启 Trae IDE 以使新安装生效。

在终端验证安装：

node -v npx -v

三、获取 Figma Access Token

配置 Figma AI Bridge 时需要填写你的 Figma Personal Access Token，具体获取流程如下：

点击 Generate token，复制生成的 Token 字符串备用。

生成的 Token 示例

在弹窗中输入 Token 名称、选择有效期并配置权限（可参考下表）：

Token 权限配置示例

下滑至 Personal access tokens 区域，点击 Generate new token。

Generate new token

在顶部菜单中选择 Security。

Security 选项

登录 Figma，在左上角点击用户头像，选择 Settings。

Figma Settings

四、在 Trae IDE 中添加 MCP Server - Figma AI Bridge

将之前复制的 Figma Personal Access Token 粘贴到输入框，点击 确认。

输入 Access Token

在列表中找到 Figma AI Bridge，点击右侧 + 按钮。

选择 Figma AI Bridge

在 MCP 面板点击 + 添加 MCP Servers（或已添加时右侧的 + 添加）。

添加 MCP Servers

打开 Trae IDE，点击 AI 对话框右上角的 设置 图标，选择 MCP。

MCP 入口

此时，MCP Server - Figma AI Bridge 已成功配置，并已自动添加到 “Builder with MCP” 智能体中。

五、创建自定义智能体并绑定 Figma AI Bridge

智能体（Agent）是你在不同场景下的 AI 助手。自定义智能体后，你可以灵活配置提示词和工具集，快速完成复杂任务。

  1. 在配置面板中：
    • （可选）上传智能体头像。
    • 输入智能体名称，例如：“Figma 助手”。
    • 在 工具-MCP 部分仅勾选 Figma AI Bridge。
    • 在 工具-内置 部分勾选：
      • 文件系统（File System）
      • 终端（Terminal）
      • 联网搜索（Web Search）
  2. 点击 创建，完成自定义智能体的创建。

预览（Preview）
配置完成后示例：

智能体配置示例

（可选）填写提示词，示例：

“根据用户提供的 Figma 链接，精准还原 UI 设计，生成响应式 HTML 前端页面代码。结构清晰，视觉细节与设计稿高度一致，禁止擅自修改设计内容。”

点击 + 创建智能体。

创建智能体

在 AI 对话框右上角点击 设置，选择 智能体。

智能体入口

六、一键生成前端页面

  1. 在本地新建一个空文件夹，在 Trae IDE 中打开该文件夹。
  2. 在 AI 对话框右下角选择模型（本文以 DeepSeek-V3-0324 为例）。
  3. 生成完成后，双击输出的 index.html，在浏览器中预览最终效果。
  4. 若需调整，可在 AI 对话框继续与智能体互动，优化样式或交互，直至满意为止。

智能体开始调用 Figma AI Bridge，读取设计稿并自动生成前端项目文件夹和 index.html。以下为生成过程示例：

生成过程示例

在 Trae IDE AI 对话输入框中粘贴链接，并附上需求说明，例如：

“请严格按照我提供的 Figma 链接内容生成 HTML 前端页面，UI 要严格还原设计稿，需要实现响应式设计。”

打开 Figma 设计稿页面，选中目标画板，右键 → Copy/Paste as > Copy link to selection，复制链接。

复制 Figma 链接

附：Figma AI Bridge 支持能力

MCP Server - Figma AI Bridge 提供以下核心功能：

Figma AI Bridge 能力列表
  • 设计结构化解析：自动识别画板、组件、布局层级。
  • 样式映射：将 Figma 中的颜色、字体、间距等属性转成 CSS。
  • 响应式布局：根据设置自动生成媒体查询，支持多端适配。
  • 资源导出：自动导出切图、SVG、字体等静态资源。
  • 交互还原：根据原型中的交互描述生成简单的 JavaScript 逻辑。

结语

通过 Trae IDE 与 MCP Server - Figma AI Bridge 的结合，设计稿到代码的流程实现了高度自动化。无需手动切图、编写样式、配置打包，一行命令即可完成初版页面交付。无论是快速打样，还是持续迭代，都能极大提升前端开发效率。试试看，将你的下一个 Figma 项目交给 AI 助手完成吧！

Read more

从入门到精通：Ghostty-config配置面板完全指南

从入门到精通：Ghostty-config配置面板完全指南 【免费下载链接】ghostty-configA beautiful config generator for Ghostty terminal. 项目地址: https://gitcode.com/gh_mirrors/gh/ghostty-config Ghostty-config是一款美观直观的配置生成器，专为Ghostty终端设计，让自定义终端变得轻松简单。无需手动编辑文本文件，通过可视化界面即可调整设置、实时预览效果并导出配置文件。本文将带你全面了解如何使用这个强大工具打造个性化的终端体验。 快速开始：安装与基本设置 要开始使用Ghostty-config，首先需要克隆项目仓库： git clone https://gitcode.com/gh_mirrors/gh/ghostty-config 项目采用现代化的Svelte框架构建，主要配置逻辑集中在src/lib/data/settings.ts文件中。配置面板提供了丰富的设置选项，涵盖应用程序、剪贴板、窗口、颜色、字体、
湖南首条免费高速轨迹呈现：借助 Leaflet -Trackplayer 实现 WebGIS 可视化

湖南首条免费高速轨迹呈现：借助 Leaflet -Trackplayer 实现 WebGIS 可视化

目录 前言 一、相关背景 1、湖南首条免费高速-长永高速 2、还有哪些快到30年的高速 3、leaflet-trackplayer相关知识 二、基础数据准备 1、高速起止点地理编码 2、途径重要AOI和POI信息 3、高速区间道路信息 三、leaflet-trackplayer实战 1、行驶道路生成和设置 2、途径重要AOI和POI 3、车辆车牌信息模拟跟随 4、成果展示 四、总结 前言         在交通基础设施建设与数字化技术飞速发展的时代，湖南迎来了其首条免费高速公路的建成通车，这不仅是交通领域的一大突破，更是区域经济发展与民生改善的重要里程碑。然而，如何更好地展示这条高速公路的运行轨迹，为交通管理、规划以及公众出行提供直观，成为了我们亟待解决的问题。将WebGIS 技术与 Leaflet - Trackplayer 的结合，为我们提供了一种创新且高效的解决方案。WebGIS（Web 地理信息系统）
前端引入的JS加载失败页面功能无法使用？JS加载失败的终极解决方案

前端引入的JS加载失败页面功能无法使用？JS加载失败的终极解决方案

🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志 🎐 个人CSND主页——Micro麦可乐的博客 🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战 🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战 🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解 🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用 🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧，均附有完整的代码示例 ✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧 💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程 🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整 👍《Spring Security》专栏中我们将逐步深入Spring Security的各个

前端安全：别让你的应用变成黑客的游乐场

前端安全：别让你的应用变成黑客的游乐场 毒舌时刻 这代码写得跟网红滤镜似的——仅供参考。 各位前端同行，咱们今天聊聊前端安全。别告诉我你还在写明文存储密码，那感觉就像把家门钥匙挂在门口——方便，但不安全。 为什么你需要前端安全 最近看到一个项目，登录表单直接把密码发送到服务器，没有任何加密。我就想问：你是在做应用还是在给黑客送大礼？ 反面教材 // 反面教材：不安全的登录 // components/LoginForm.jsx export default function LoginForm() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); // 直接发送明文密码 const response = await