arinspunk/claude-talk-to-figma-mcp

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

674 stars 133 forks Качество 79 Тренд 22MIT

arinspunk/claude-talk-to-figma-mcp — это кандидат на сервер MCP, импортированный из https://github.com/arinspunk/claude-talk-to-figma-mcp.

Обзор

arinspunk/claude-talk-to-figma-mcp — это кандидат на сервер MCP, импортированный из https://github.com/arinspunk/claude-talk-to-figma-mcp.

Обзор (машинный перевод)

Позвольте вашим AI-агентам читать, анализировать и изменять дизайны Figma.

Работает с вашими любимыми агентными инструментами:

Claude Desktop
Код Клода
Курсор
Антигравитация
Виндсерфинг
VS Code + GitHub Copilot
Клайн
Roo Code

👩🏽 💻 Для кого это

UX/UI команды

Автоматизируйте повторяющиеся задачи дизайна и поддерживайте согласованность бренда без ручных усилий:

Автоматические аудиты доступности - Обнаружение и устранение проблем контраста за секунды
Массовые обновления стиля - Изменение цветов, типографики или интервалов по всему документу одной командой
Визуальный анализ иерархии - Мгновенная обратная связь по структуре вашего дизайна

Разработчики

Генерируйте готовый к производству код непосредственно из дизайнов:

Компоненты React/Vue/SwiftUI - От проектирования до кода одним шагом
Кодирование с помощью токенов дизайна - Синхронизировать дизайн и разработку
Уменьшить трение при передаче - Меньше переключений с командой разработчиков

Ключевое преимущество: В отличие от официального MCP Figma, который требует лицензии Dev Mode, этот MCP работает с любым аккаунтом Figma (даже с бесплатными).

💡 Реальные случаи использования

Доступность:

Эта страница переведена автоматически. Технические детали смотрите в оригинале.

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:
- Claude Desktop
- Claude Code
- Cursor
- Antigravity
- Windsurf
- VS Code + GitHub Copilot
- Cline
- Roo Code

Step 1: Install and start the websocket

Enables the Agent to send commands to Figma.

Открыть полный README на GitHub

Установка

npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server

Новичок в MCP? Начните с руководства на mcpskill.org →

Конфигурация

{
    "mcpServers": {
      "ClaudeTalkToFigma": {
        "command": "npx",
        "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
      }
    }
  }