MCP для дизайнерів: підключення Figma, токенів і коду до Claude і Cursor
Що означає Model Context Protocol для дизайнерів, які інструменти проектування мають сервери MCP, як підключити їх до Claude Code і Cursor і на що слід звернути увагу.
Основний винос
MCP (Model Context Protocol) — це відкритий стандарт, який дозволяє таким інструментам ШІ, як Claude Code і Cursor підключатися до іншого програмного забезпечення. Для дизайнерів це означає, що інструмент кодування штучного інтелекту може зчитувати реальні дані проекту, як-от фрейми, компоненти, змінні та токени, замість того, щоб здогадуватися зі знімків екрана, а в деяких інструментах він може записувати зміни назад. Figma, Penpot і ExodeUI пропонують сервери MCP.
Що таке MCP, простими словами
Офіційна документація MCP описує його як стандарт з відкритим вихідним кодом для підключення програм ШІ до зовнішніх систем, таких як файли, бази даних і інструменти. Одним із власних прикладів є створення Claude Code цілої веб-програми з дизайну Figma. Для дизайнера важлива частина полягає в наступному: штучному інтелекту більше не потрібно вгадувати, як виглядає ваш дизайн. Він може запитувати безпосередньо інструмент проектування.
Інструменти проектування з серверами MCP сьогодні
Станом на жовтень 2026:
- Figma: сервер MCP, який надає агентам контекст проектування (змінні, компоненти, макет) для генерації коду та може писати рідний вміст назад на полотно. Figma вказує його на стартових і платних планах; Напис на полотні є безкоштовним протягом бета-версії.
- Penpot: безкоштовний відкритий сервер MCP, який працює з будь-яким клієнтом MCP, включаючи Claude, Cursor, VS Code і OpenAI Codex, і може бути розміщений самостійно.
- ExodeUI (ми це робимо): сервер MCP, який дозволяє інструментам програмування штучного інтелекту створювати та редагувати інтерактивні анімації зі станами та фізикою пружини.
- Спроектуйте токени: якщо ваші токени знаходяться в сховищі як JSON, інструмент кодування AI вже може читати їх як файли; виділений сервер потрібен лише для токенів, що зберігаються в інструменті.
Як це використовують дизайнери
Найпоширеніші робочі процеси є радше практичними, ніж магічними. Розробники вибирають фрейм і просять ШІ реалізувати його за допомогою наявної бібліотеки компонентів. Дизайнери просять штучний інтелект перевірити, чи відповідає кодований екран дизайну та відмінностям у списку. Команди просять штучний інтелект оновити маркери компонента в усій кодовій базі. І все частіше дизайнери використовують ШІ, щоб креслити варіанти безпосередньо на полотні, а потім вдосконалювати їх вручну.
Підключення сервера
Claude Code додає сервери за допомогою команди claude mcp add або через файл .mcp.json у проекті та підтримує віддалені сервери HTTP, а також локальні. Cursor керує серверами MCP у своїх налаштуваннях і підтримує локальні (stdio) і віддалені сервери. Віддалені сервери зазвичай просять увійти один раз за допомогою OAuth. Кожен постачальник документує точну команду або URL-адресу свого сервера.
На що слід звернути увагу
MCP надає інструментам штучного інтелекту реальний доступ, тому сприймайте це як будь-яку інтеграцію:
- Дозволи: агент, який може писати на полотно або репозиторій, також може робити помилки. Використовуйте історію версій і переглядайте зміни.
- Конфіденційність: перевірте, куди надсилаються дані проекту та чи дозволяє це ваш план.
- Вартість: деякі функції запису є безкоштовними в бета-версії та плануються, що вони стануть залежними від використання.
- Якість: вихід ШІ відповідає вашій системі дизайну, лише якщо система добре структурована з іменованими компонентами та маркерами.
Ключі Principle, які слід запам’ятати
- MCP — це відкритий стандарт для підключення інструментів ШІ до іншого програмного забезпечення
- Це дозволяє штучному інтелекту читати реальні дані дизайну замість скріншотів
- Figma, Penpot і ExodeUI пропонують сервери MCP
- Claude Code і Cursor підтримують локальні та віддалені сервери
- Добре структурована система проектування важливіша за інструмент
Часті запитання
Джерела
- What is the Model Context Protocol (MCP)? — modelcontextprotocol.io
- Guide to the Figma MCP server — Довідковий центр Figma
- Penpot MCP server — Penpot
- Connect Claude Code to tools via MCP — Claude Code документи
- Model Context Protocol (MCP) — Cursor документи