跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像AI 生图工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSSAI大前端

Trae 集成 Figma MCP 实现前端代码自动生成

Trae 编辑器结合 MCP 协议与 Figma 设计工具,可实现前端代码的自动化生成。用户需确保 Trae 版本为 3.0 以上且为企业版,在 Figma 账户中生成安全 Token 并配置至 Trae 的 MCP 设置中。启用 MCP 模式后,通过提供 Figma 原型链接及指定设计要求,即可让 AI 生成高度还原设计稿的网页代码。

赛博朋克发布于 2026/3/25更新于 2026/7/1032 浏览

前置条件

  1. Trae 版本需在 3.0 及以上。
  2. 账号需为企业版。

配置 MCP

打开设置,找到 MCP 选项。

MCP 设置入口

MCP 配置界面

Token 输入框

需要 Token,请从 Figma 账号中生成:

  1. 网页登录 Figma 账号。
  2. 进入设置,打开 Security 页面。
  3. 点击 Generate New Token,随意命名 Token,勾选所有权限。
  4. 生成后复制 Token 并填入 MCP 配置中。

Figma Token 生成

Token 确认

使用 MCP

切换到 MCP 模式,也可以创建自定义智能体使用。

MCP 模式切换

提示词示例

提问时可参考以下提示词:

注意: 这里的链接是 MCP 的链接,不是普通 Figma 链接,通常需要你有原型的权限才能看到。

我需要根据提供的 Figma 链接生成一个与设计稿高度一致的网页。请严格遵循以下详细要求:

目录

  1. 前置条件
  2. 配置 MCP
  3. 使用 MCP
  4. 提示词示例
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • Spring Cloud OpenFeign 远程调用实战与最佳实践
  • 基于 LLaMA-Factory 微调 ChatGLM3 模型实战
  • 县域烟花禁燃监管 GIS 实践:基于 Java 与高德地图的销售点盘点
  • MCP 2026 金融级安全加固实践:零信任与国密算法落地
  • Whisper-large-v3 部署避坑指南:解决启动、性能与识别率问题
  • 多模态大模型 API 调用与本地部署成本对比分析
  • Java 数据结构实战:二叉树与哈希表核心解析
  • 程序员转行大模型领域:热门岗位推荐与选择策略
  • Claude 3 系列模型深度评测:性能是否全面超越 GPT-4?
  • 二分算法实战:A-B 数对与高考志愿问题解析
  • 如何在 imToken DApp 浏览器中快速搭建区块链小游戏原型
  • DeepSeek 深度使用指南:提示词技巧与本地知识库搭建
  • 数据结构:二叉树进阶——堆的实现与原理
  • MySQL 数据库核心操作:创建、修改与备份实战指南
  • AI 大模型技术原理、应用场景与学习路径详解
  • LLaMA Factory+QLoRA 微调 70B 模型实测
  • 英伟达市值单日蒸发近 6000 亿美元,DeepSeek 开源 Janus-Pro 多模态模型
  • Python 类基础入门教程
  • C++ 入门:命名空间与输入输出基础
  • Layui 集成 Unity WebGL 时 Tab 切换导致黑屏的修复方案

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online