返回顶部
热门问答 更多热门问答
技术文章 更多技术文章

Figma MCP Server 发布,设计师快速生成代码

[复制链接]
链载Ai 显示全部楼层 发表于 2 小时前 |阅读模式 打印 上一主题 下一主题



Framelink是一个Model Context Protocol (MCP) Server,它能够让Cursor、Windsurf、Cline等AI编码工具直接访问您的Figma设计文件数据,使这些工具能够更准确、更高效地将设计转换为代码实现。


工作原理

Framelink的工作流程简单直观:

1. 打开你的IDE聊天界面(例如Cursor的agent模式)

2. 粘贴Figma文件、画板或组件的链接

3. 要求AI助手根据Figma文件实现设计

4. AI将从Figma获取相关元数据并用它来编写代码

与简单地粘贴屏幕截图相比,当Cursor能够访问Figma设计数据时,它能够更准确地一次性生成设计代码,效率大大提高。


Framelink MCP服务器专为Cursor等AI编码工具设计,它在从Figma API获取响应后,会对数据进行简化和翻译,只提供最相关的布局和样式信息给模型。这种减少上下文信息的方法可以使AI更准确,响应更相关。



快速开始


要开始使用Framelink,您需要在配置文件中添加以下设置:

MacOS / Linux

{"mcpServers":{"FramelinkFigmaMCP":{"command":"npx","args":["-y","figma-developer-mcp","--figma-api-key=YOUR-KEY","--stdio"]}}}



Windows

{"mcpServers":{"FramelinkFigmaMCP":{"command":"cmd","args":["/c","npx","-y","figma-developer-mcp","--figma-api-key=YOUR-KEY","--stdio"]}}}


注意:您需要创建一个Figma访问令牌才能使用此服务器。

Framelink Figma MCP Server通过提供设计数据的智能访问方式,正在革新开发者的工作流程。无论是前端开发者还是全栈工程师,都能从这个工具中受益,大大减少从设计到实现的时间和精力投入。

下面是一些使用视频

地址:
https://github.com/GLips/Figma-Context-MCP
其他的figma mcp server
https://github.com/TimHolden/figma-mcp-server


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

链载AI是专业的生成式人工智能教程平台。提供Stable Diffusion、Midjourney AI绘画教程,Suno AI音乐生成指南,以及Runway、Pika等AI视频制作与动画生成实战案例。从提示词编写到参数调整,手把手助您从入门到精通。
  • 官方手机版

  • 微信公众号

  • 商务合作

  • Powered by Discuz! X3.5 | Copyright © 2025-2025. | 链载Ai
  • 桂ICP备2024021734号 | 营业执照 | |广西笔趣文化传媒有限公司|| QQ