MCP Figma：前端开发者的新助手
Source: Dev.to
什么是 MCP？
“一种用于将 AI 应用程序连接到外部系统的开源标准。” – modelcontextprotocol.io
简而言之，MCP 服务器是一个外部服务，它公开数据或功能，使 AI 应用程序能够通过模型上下文协议（Model Context Protocol）访问它们。它充当桥梁，将 AI 与文件、数据库、API 或特定工具以安全且结构化的方式连接。AI 不再直接与您的系统交互，而是通过 MCP 服务器进行通信，从而使集成更安全、更一致，也更易于管理——尤其是在将 AI 连接到多个外部数据源时。
什么是 Figma？
Figma 是一个基于云的设计平台，用于创建 UI/UX 设计、原型以及实时协作工作流。由于它直接在浏览器中运行，设计师、开发者和产品团队可以在同一个文件中协同工作，无需安装额外软件。Auto Layout、原型制作、共享库和组件系统等功能让大型设计项目的维护变得轻松，而其集成和插件则支持开发者交付，简化了从设计到代码的工作流。
为什么会有 Figma MCP 服务器
AI 直接理解、分析并从设计文件中提取结构化数据的需求日益增长。Figma MCP 服务器使 AI 工具能够：
- 读取设计结构
- 检查组件和元数据
- 自动生成文档
- 将设计转换为代码
- 验证 UI 的准确性
- 加速设计到开发的工作流
AI 不再需要解释截图；它可以以标准化且安全的方式访问真实的结构化设计数据，从而实现更快、更准确、更高效的设计师与前端开发者之间的协作。
📘 设置指南
官方指南： (原文未提供链接)
🧩 支持的 AI 工具
a. Cursor AI
Sergei Chyrkov 的指南：(原文未提供引用)
b. VS Code + Copilot / MCP
Snyk 的指南：(原文未提供引用)
Figma API Key（如有需要）：(原文未提供细节)
我的实现
几周前，我创建了一个个人设计案例研究：“Jaya Abadi”，一个水果店电商着陆页，包含产品、企业信息、合作伙伴、推荐、联系等板块——在桌面端和移动端均实现了完整响应式布局。
🎨 设计稿
🔧 工作流
-
搭建 MCP 服务器（我使用了 Cursor AI）
-
选择模型 – 我使用了免费套餐（功能受限但足够）。
-
提示过程 – 示例提示：
create complete html, css native, sass and images used in the figma (_this link to figma selection part _) -
结果 – AI 生成了所请求的资源和代码。
结果展示
演示站点：(原文未提供链接)
仅凭一个提示，我就能够生成……（文章到此结束）。