F2C-MCP-Server
将Figma设计节点转换为极高还原度的HTML/CSS代码,行业内领先
MCP 服务配置
复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用
{
"mcpServers": {
"f2c-mcp": {
"args": [
"-y",
"@f2c/mcp"
],
"command": "npx",
"env": {
"personalToken": ""
}
}
}
}
该服务需要配置环境变量:personalToken
可用工具 (5 个)
该服务在 MCP 协议中暴露的工具,AI 可按需调用
figma_get_file_data 8 个参数 需填 2 项
Get detailed information about a Figma file
必填参数:fileKey、ids
figma_get_images 9 个参数 需填 2 项
Get images of Figma nodes
必填参数:fileKey、ids
figma_get_image_fills 2 个参数 需填 1 项
Get all image resources in the specified Figma file
必填参数:fileKey
figma_get_file_meta 2 个参数 需填 1 项
Get metadata information for a Figma file
必填参数:fileKey
figma_to_code 4 个参数 需填 2 项
Convert Figma designs into code. This tool extracts specified Figma nodes and transforms them into HTML, React with CSS Modules, or React with Tailwind CSS, facilitating automated design-to-code conversion.
必填参数:fileKey、ids
服务介绍
F2C MCP 服务器
English | 简体中文
一个用于将 Figma 设计转换为代码的 Model Context Protocol 服务器,使用 F2C。
功能
- 🎨 将 Figma 设计节点转换为高保真的 HTML/CSS 标记,处于行业领先地位
- 📚 为像 Cursor 这样的 AI 编码工具提供 Figma 设计上下文
- 🚀 支持带有 fileKey 和 nodeId 参数的 Figma 文件 URL
开始使用
请参阅 开始使用
常见问题
请参阅 常见问题
致谢
感谢:
- Framelink Figma MCP 服务器 通过这个 Model Context Protocol 服务器让 Cursor 和其他基于 AI 的编码工具访问您的 Figma 文件。
- Cursor Talk to Figma MCP 允许 Cursor 与 Figma 通信以读取设计并进行程序化修改。
- Figma MCP 服务器 该服务器通过 ModelContextProtocol 提供查看、评论和分析 Figma 设计的工具。