arinspunk/claude-talk-to-figma-mcp 是从 https://github.com/arinspunk/claude-talk-to-figma-mcp. 导入的 MCP 服务器候选人。
概览
arinspunk/claude-talk-to-figma-mcp 是从 https://github.com/arinspunk/claude-talk-to-figma-mcp. 导入的 MCP 服务器候选人。
概述（AI 翻译）
让你的AI代理能够读取、分析并修改Figma设计。
配合你喜欢的代理工具：
- Claude桌面
- 克劳德密码
- 光标
- 反重力
- 风帆冲浪
- VS Code + GitHub Copilot
- 克莱恩
- Roo Code
👩🏽 💻 这是给谁的
用户体验/UI团队
自动化重复设计任务，保持品牌一致性，无需人工操作：
- 自动无障碍审计 - 几秒钟内检测并修复对比度问题
- 批量样式更新 - 通过一个命令改变整个文档的颜色、排版或间距
- 可视化层级分析 - 即时获得设计结构反馈
开发者
直接从设计生成生产准备代码：
- React/Vue/SwiftUI 组件 - 从设计到代码一步完成
- 带有设计标记的代码 - 保持设计与开发同步
- 减少交接摩擦 - 减少与设计团队的反复迭代
关键优势：与Figma官方MCP需要开发者模式许可不同，这个MCP适用于任何Figma账号（即使是免费的）。
💡 现实世界的应用场景
无障碍：
本页由 AI 翻译，技术细节请以原文为准。
README
以下为原文 README 节选，完整内容请查看原文。
Claude AI Agents Talk to Figma MCP
Enable your AI agents to read, analyze, and modify Figma designs.
Works with your favorite agentic tools:
👩🏽💻 Who it’s for
UX/UI Teams
Automate repetitive design tasks and maintain brand consistency without manual effort:
- Automated accessibility audits - Detect and fix contrast issues in seconds
- Bulk style updates - Change colors, typography, or spacing across the entire document with a single command
- Visual hierarchy analysis - Get instant feedback on your design structure
Developers
Generate production-ready code directly from designs:
- React/Vue/SwiftUI components - From design to code in one step
- Code with design tokens - Keep design and development in sync
- Reduce handoff friction - Fewer back-and-forth iterations with the design team
Key advantage: Unlike Figma’s official MCP which requires a Dev Mode license, this MCP works with any Figma account (even free ones).
💡 Real-world use cases
Accessibility:
“Find all text with contrast ratio <4.5:1 and suggest colors that meet WCAG AA”
Rebranding:
“Change #FF6B6B to #E63946 in all primary buttons throughout the document”
Design analysis:
“Analyze the visual hierarchy of this screen and suggest improvements based on design principles”
Developer handoff:
“Generate the React component for ‘CardProduct’ including PropTypes and styles in CSS modules”
⚡️ Quick installation
Setup: 5 minutes | First automation: 2 minutes
Requirements
- Node.js installed
- Figma Desktop
- AI client:
Step 1: Install and start the websocket
Enables the Agent to send commands to Figma.
安装
npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server配置
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
}
}
}