Figma MCP Server
Figma 官方 MCP Server，让 AI 直接读取 Figma 设计文件的组件、样式、布局信息，并可生成对应的代码。设计师和开发者可用 AI 直接问「这个设计用什么颜色？」或「帮我把这个组件转成 React 代码」。
返回 MCP 专区
开发工具官方维护推荐
Figma
4.1k starsFigma 官方 MCP Server，让 AI 直接读取 Figma 设计文件的组件、样式、布局信息，并可生成对应的代码。设计师和开发者可用 AI 直接问「这个设计用什么颜色？」或「帮我把这个组件转成 React 代码」。
安装与配置
安装命令
npx figma-mcpCursor / Claude Desktop 配置（mcp.json）
{
"mcpServers": {
"Figma": {
"command": "npx",
"args": [
"figma-mcp"
]
}
}
}典型使用场景
- AI 直接创建 PR、查看 Issues、提交代码
- 自动化 CI/CD 流程，监控构建状态
- 智能 Code Review，自动标注问题
查看源码 / 官方文档
访问 GitHub 仓库获取最新文档、配置说明和 issue 反馈。
在 GitHub 上查看相关 MCP Server
21st.dev MagicUI 组件生成 MCP Server，AI 可以直接搜索和使用 21st.dev 组件库中的 React 组件。提供超过 2000 个精心设计的 UI 组件，让 AI 编程助手（Cursor/Claude Code）生成更美观的前端界面。VercelVercel 官方 MCP Server，支持查询部署状态、环境变量管理、项目配置、日志查看。开发者可在 Claude 中直接问「我最新的部署有什么错误？」并获得直接答案。DockerDocker 官方 MCP Server，支持列出和管理容器、镜像、网络和数据卷，以及执行容器内命令。让 AI 成为 DevOps 运维助手，可用自然语言管理 Docker 环境，支持 Compose 项目管理。OpenAI (官方工具集)OpenAI 官方 Agent SDK 内置工具集，包含 Web Search、Code Interpreter、File Search 三大工具。通过 Responses API 使用，是构建 OpenAI 生态 Agent 的原生工具方案，无需额外配置 MCP。GitHub官方 GitHub MCP Server，让 AI 直接操作 GitHub：创建 Issue/PR、搜索代码、管理仓库、读写文件、触发 Actions。是开发者最常用的 MCP Server 之一，支持细粒度权限控制。LangChain MCP AdaptersLangChain 官方 MCP 适配器，让 MCP Server 的工具可以直接在 LangChain/LangGraph Agent 中使用。一行代码将任意 MCP Server 工具引入 LangChain 生态，是连接 MCP 和 LangChain 两大生态的桥梁。
相关教程
AI-Powered UI/UX Design: Integrating ChatGPT and Figma AI for Faster Prototyping
How product designers cut prototype iteration time by 60% using AI copilot tools in 2025
Midjourney v7 for Brand Design: Creating Consistent Visual Identities at Scale
Professional brand designers share how they use Midjourney v7 character consistency and style references
AI对话界面UX设计：打造自然流畅的聊天体验
从设计原则到实践案例，构建用户喜爱的AI对话产品