Figma 推出官方 MCP 服务 ,效果不错!

Figma 推出官方 MCP 服务

  • 采用 SEE 模式免除繁琐配置
  • 能比非官方的 MCP 获取更多详细设计稿信息和素材

下面是详细介绍和使用方法

官方的 MCP 会传输以下信息:

  • 通过提供组件、变量、样式等元数据,减少 LLM 的搜索和推理负担,提高代码生成的准确性和效率。
  • 用高层次的设计截图补充元数据,帮助 LLM 理解整体结构、页面流转和响应式布局等。
  • 提供伪代码或实际代码示例,描述设计中定义的交互行为。
  • 从设计中提取文本、SVG、图片、图层名、注释等内容,帮助 LLM 理解界面数据模型和填充逻辑。

如何使用:

json 复制代码
  "mcpServers": {  
    "Figma": {  
      "url": "http://127.0.0.1:3845/sse"  
    }  
  }  
  • 更新 Figma 客户端到最新版
  • 在左上角,打开 Figma 菜单,进入 Preferences,启用 Dev Mode MCP Server
  • 固定的 MCP 地址是 http://127.0.0.1:3845/sse
  • 在Trae Cursor 或 Chatwise 中正常设置 MCP
  • 直接在 Figma 中选择一个页面或复制画板链接给软件让其实现
相关推荐
猫头虎6 小时前
猫头虎 AI工具分享:一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具:Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
win4r13 小时前
🚀 SuperClaude让Claude Code编程能力暴增300%!小白秒变顶尖程序员!19个专业命令+9大预定义角色,零编程经验也能开发复杂项目,完全碾
aigc·ai编程·claude
slowlybutsurely16 小时前
Cursor核心功能及开发实战
ai编程·cursor
码农飞哥16 小时前
能生成二维码的浏览器插件来了
ai编程·浏览器插件
每天开心17 小时前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
LeeAt17 小时前
AI单词拍照识别移动端项目(一)
前端·react.js·ai编程
精灵vector1 天前
构建专家级SQL Agent交互
python·aigc·ai编程
莫大h1 天前
Gemini-cli安装避坑指南
aigc·ai编程
星始流年1 天前
前端视角下认识AI Agent
前端·agent·ai编程