MCP-серверы Figma, Playwright и GitHub для автоматизации разработки 2026

MCP-серверы превращают AI-агента из советчика в исполнителя: он сам вытаскивает макет из Figma в код, гоняет тесты в браузере и открывает pull request в GitHub. Всё это по одному протоколу, из Claude Code или Cursor, без ручного копипаста. Ниже разберём три ключевых MCP-сервера для разработки, покажем готовые конфиги и сценарии, а в конце соберём карту "кому что выбрать".

TL;DR. MCP (Model Context Protocol) подключает AI-агента к внешним инструментам. Три рабочие лошадки в 2026: Figma MCP (макет -> код), Playwright MCP (авто-тесты) и GitHub MCP (PR и merge). Все бесплатны, ставятся через npx за пару минут, работают в Claude Code и Cursor. В статье: конфиги, сценарии, риски и таблица выбора.

Цены, версии и адреса серверов проверены по официальным репозиториям на эту дату.

Что такое MCP и зачем он в разработке?

MCP это открытый стандарт, по которому AI-агент вызывает внешние инструменты как функции. Не текст-совет, а реальное действие: клик, коммит, генерация кода.

Протокол придумали в Anthropic, дальше подхватило всё сообщество. Публичный реестр MCP-серверов вырос примерно с 1 200 штук в начале 2025 до 9 400+ к апрелю 2026. То есть за год стандарт превратился из эксперимента в базовую прослойку между моделью и вашими сервисами.

Раньше агенту скидывали скриншот макета или кусок ответа API и надеялись, что он угадает. С MCP агент получает структурированный контекст напрямую из источника: список компонентов Figma, дерево репозитория, состояние страницы в браузере.

Клиент (Claude Code, Cursor, Codex, VS Code) держит соединение с сервером один к одному. Сервер отдаёт набор инструментов. Агент выбирает нужный и выполняет. По факту это USB-разъём для интеграций: один протокол вместо десятка кастомных обёрток.

Как Figma MCP превращает макет в код?

Официальный Figma MCP отдаёт агенту переменные, компоненты и токены из дизайна, а не картинку. На выходе код совпадает и с вашей кодовой базой, и с макетом.

В феврале 2026 Figma запустила двустороннюю связку с Claude Code: не только дизайн -> код, но и код -> холст. Сервер сейчас в бете и бесплатен на время беты. По данным официального блога Figma, контекст из макета экономит токены: модель не рыщет по репозиторию в поисках нужной иконки, а берёт ссылку на конкретный компонент.

Ключевой инструмент get_design_context возвращает разметку в виде React и Tailwind как отправную точку. Второй, get_variable_defs, вытаскивает переменные: цвета, отступы, типографику. Промпт вроде "собери этот фрейм на Vue, отступы возьми из переменных" даёт на выходе код в вашем дизайн-системном стиле.

Есть нюанс по доступу. Локальный сервер работает на платных тарифах с местом Dev или Full. На тарифе Starter лимит жёсткий: до 6 вызовов в месяц. Полноценно гонять генерацию можно только с Dev-местом, там лимиты идут поминутно, как у Tier 1 REST API.

Как подключить Figma MCP к Cursor и Claude Code?

Для официального локального сервера включите его в десктоп-приложении: Preferences -> Enable local MCP server, эндпоинт поднимется на http://127.0.0.1:3845/mcp. Дальше клиент видит инструменты автоматически.

Если платного места нет, берите community-вариант Framelink (figma-developer-mcp). Он работает через API-токен и ставится одной строкой в конфиге. Качество вёрстки при этом сильно зависит от того, как собран макет: Auto Layout, семантичные имена слоёв, переменные вместо фиксированной ширины. Кривой макет -> кривой код, тут MCP не волшебник.

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Как Playwright MCP пишет и чинит тесты за вас?

Playwright MCP от Microsoft управляет браузером через дерево доступности, а не по пикселям. Агент кликает, заполняет формы и проверяет результат по структуре страницы.

Один снапшот страницы в Playwright MCP это 200-400 токенов против тысяч у скриншота или сырого DOM. Поэтому тесты стабильнее: агент цепляется за роли и лейблы, а не за координаты, которые ломаются при малейшем сдвиге вёрстки. Ставится сервер одной командой npx @playwright/mcp@latest и работает в Cursor, VS Code, Claude Code, Codex, Windsurf.

Сценарий из транскрибаций выглядит так. Вы описываете цель словами: "открой демо, добавь три задачи, удали одну, проверь счётчик". Агент сам находит локаторы и прогоняет проверки. Если элемент не находится, добавьте в промпт data-test-id или CSS-селектор, и сервер зацепится точнее.

Отдельная фишка 2026: Playwright Agents. Это тройка ролей, инициализируется через npx playwright install-agents:

TestPlanner инспектирует приложение по дереву доступности и пишет человекочитаемый план тестов.
TestGenerator превращает план в рабочий код.
TestHealer сам чинит упавший тест: находит причину, правит локатор, убирает лишний флаг exact при частичном совпадении.

Замкнёте их в цикл -> получите почти автономную фабрику автотестов. Живой лайфхак по безопасности: не пишите логин и пароль в чат. Прокидывайте их через переменные окружения (.env), тогда данные уходят в Playwright, а не в модель.

VS Code или Cursor для Playwright MCP?

По деньгам расклад простой. VS Code требует Copilot Pro (около $10 в месяц) и иногда упирается в VPN. Cursor стоит дороже, около $20 в месяц, но работает без VPN и даёт триал на 20 дней. Для разработчиков в РФ второй вариант обычно ровнее. Обзоры обоих есть в нашем каталоге AI-инструментов: Cursor и GitHub Copilot.

Как GitHub MCP автоматизирует путь от PR до merge?

GitHub MCP подключает агента к репозиториям, issue и pull request. Из одного промпта агент создаёт ветку, открывает PR, оставляет ревью и мержит.

Удалённый сервер размещён самим GitHub по адресу https://api.githubcopilot.com/mcp/ с авторизацией в один клик через OAuth. Никакого Docker и ротации токенов. По официальному гайду GitHub, по умолчанию включены наборы инструментов repos, issues, pull_requests, actions и code_security. Доступен всем пользователям GitHub, отдельные функции наследуют платные лимиты Copilot.

Реальный сценарий из разбора: агент реализует правку локально, сам открывает pull request, пишет комментарий-ревью, вливает в main и закрывает связанный issue. Всё в одном диалоге. Одна честная оговорка из практики: ветку после мержа сервер не всегда удаляет автоматически, это стоит дописать в промпт.

Управлять доступом просто. Добавьте /readonly в конец URL, и агент сможет только читать. Это разумный старт, пока вы не доверяете ему запись в master. Токенами тоже рулят наборы: заголовок X-MCP-Toolsets ограничивает, что именно видит модель, и заодно снижает размер контекста.

{
  "mcpServers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/"
    }
  }
}

Из ближайших планов GitHub обещает блокировать секреты, сгенерированные ИИ, прямо на уровне сервера, по аналогии с защитой от пуша ключей. Полезно против случайной утечки и промпт-инъекций.

Чем отличаются Chrome MCP, Chrome DevTools MCP и browser MCP?

Playwright MCP это про тесты и действия. Chrome DevTools MCP про отладку: сеть, консоль, профилирование живого Chrome. Browser MCP цепляется к вашим открытым вкладкам с залогиненными сессиями.

Chrome DevTools MCP от Google снимает с агента "повязку с глаз": он видит, что реально творится в браузере с его же кодом. По данным блога Chrome for Developers, сервер умеет записывать перформанс-трейсы, разбирать сетевые запросы и читать консоль с source-map стеками. Ставится через npx chrome-devtools-mcp@latest, на июль 2026 актуальна версия 1.5.

Разложим по задачам, чтобы не путать похожие названия. Chrome DevTools MCP отвечает на вопрос "почему тормозит и падает": LCP, CORS-ошибки, зависшие запросы. Browser MCP и chrome-расширение Playwright подключаются к уже открытому Chrome с вашими куками, что удобно для сценариев за авторизацией. А связка devtools mcp плюс агент даёт цикл "сгенерировал фикс -> проверил в браузере -> подтвердил".

На практике мы держим два сразу: Playwright MCP пишет и прогоняет тесты, chrome devtools mcp ловит перформанс и сетевые баги. Они не конкуренты, а разные слои одной работы.

Какие ещё MCP-серверы стоит знать в 2026?

Кроме тройки-флагманов есть GitLab MCP для команд на GitLab, Codex и OpenCode как клиенты-потребители MCP, а для игр и 3D свои серверы: Unity MCP, Blender MCP и Godot MCP.

Экосистема давно вышла за пределы веба. Игровые серверы отдают агенту редакторные API движка: он вызывает "создай сцену" или "прикрепи скрипт", а движок сам пишет файлы проекта. По данным каталога MCP.Directory, Godot MCP порождает .tscn и .gd, Unity MCP собирает .unity-сцены и C#, Blender MCP лепит .blend и экспортирует меши.

Коротко по остальным из списка, чтобы вы понимали, что гуглить:

gitlab mcp закрывает те же задачи, что GitHub MCP, но для команд на GitLab: MR, issue, пайплайны.
codex mcp и opencode mcp это не серверы, а клиенты. Они потребляют любые MCP-серверы. Подключение в одну строку: codex mcp add playwright npx "@playwright/mcp@latest".
unity mcp тянет почти всю кодовую часть игры с плейсхолдер-графикой, дизайн и арт остаются за человеком.
blender mcp цепляется к Python-API Blender (bpy) и делает промпт-ассистированное 3D-моделирование под управлением Claude.
godot mcp выигрывает для 2D и прототипов: MIT-лицензия, ноль роялти, полный доступ к исходникам движка.

Живая деталь: первого MCP-сервера для Unreal Engine на июль 2026 ещё нет, сообщество только пилит обёртку над Python-API. Если шипите на Unreal, закладывайтесь на кастом.

MCP-сервер	Команда установки	Клиенты	Главная задача
Figma MCP (офиц.)	локальный сервер в приложении	Claude Code, Cursor, VS Code	Макет -> код, переменные и токены
Playwright MCP	npx @playwright/mcp@latest	Cursor, VS Code, Codex, Claude	Авто-тесты по дереву доступности
GitHub MCP	url api.githubcopilot.com/mcp	VS Code, Cursor, Windsurf	PR, issue, merge, Actions
Chrome DevTools MCP	npx chrome-devtools-mcp@latest	Claude, Cursor, Copilot	Отладка: сеть, консоль, перформанс
Blender / Godot / Unity MCP	npx или Python-пакет	Claude, Cursor	Сцены, скрипты и меши для игр

Как настроить MCP в Claude Code и Cursor за 5 минут?

Нужен Node.js LTS 20+. Большинство серверов запускается через npx, отдельная сборка не требуется. В Claude Code это одна CLI-команда, в Cursor блок mcp.json.

Проверка простая: node -v должна показать 20 или выше. Дальше в Claude Code сервер добавляется строкой claude mcp add playwright npx @playwright/mcp@latest. В Cursor тот же сервер прописывается в Settings -> MCP -> Add new MCP Server. После рестарта клиента инструменты появляются в списке доступных агенту.

Пошагово для Cursor и любого клиента с mcp.json:

Откройте конфиг MCP в настройках клиента.
Вставьте нужные серверы в блок mcpServers (пример ниже).
Для GitHub пройдите OAuth или вставьте Personal Access Token, для Figma выдайте Dev-место.
Начните с /readonly и минимального набора toolset, потом расширяйте.

{
  "mcpServers": {
    "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] },
    "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] },
    "github": { "type": "http", "url": "https://api.githubcopilot.com/mcp/" }
  }
}

Лайфхак из транскрибаций: добавьте инструменты Playwright в исключения подтверждений, иначе агент будет спрашивать разрешение на каждый клик. И держите отдельный файл с правилами (best practices), тогда сгенерированный код выходит чище дефолтного.

В чём реальная польза MCP-серверов?

Главный выигрыш это не скорость печати, а убранная ручная рутина между инструментами. Агент сам ходит из дизайна в код, из кода в тесты, из тестов в PR.

Считаем на пальцах. Раньше вёрстка макета занимала часы ручной работы, теперь пара секунд на get_design_context. Тест-план, который QA собирал по клику, TestPlanner делает за проход. PR, ревью и merge схлопываются в один промпт. Экономия времени тут не абстрактная, а измеримая на каждой задаче.

Сильные стороны без воды:

Структура вместо картинки. Агент работает с реальными данными: переменные Figma, дерево доступности, API GitHub. Меньше галлюцинаций.
Токен-эффективность. Снапшот страницы дешевле скриншота в разы, контекст не забивается мусором.
Один протокол на всё. Настроили клиент раз, дальше подключаете сервер за строку.
Открытость. Playwright MCP, Chrome DevTools MCP, GitHub MCP бесплатны и с открытым кодом, вендор-лока нет.

Максим: «VibeCoderz мы собрали за неделю тремя скриптами голосом в Claude Code. 6 200 материалов, первый месяц дал 4 303 посетителя и 36 000 показов в Google. Сделал -> получил цифру. Автоматизация рутины это не про лень, а про то, чтобы руки дошли до продукта.»

Где MCP-серверы подводят?

MCP не песочница безопасности. Агент с правами на запись может натворить дел, а часть инструментов запускает произвольный код. Плюс лимиты тарифов и риск раздутого контекста.

Это прямо написано в документации Playwright и Figma: MCP не является security-границей. Инструмент browser_run_code_unsafe в Playwright MCP по сути эквивалентен удалённому исполнению кода, включайте его только для доверенных клиентов. Отсюда правило: старт с read-only, минимум toolset, никаких секретов в чат.

Честный список ограничений:

Права. Полный доступ к GitHub или Figma это удобно и опасно одновременно. Режьте scope.
Тарифы. Figma-сервер на Starter даёт всего 6 вызовов в месяц, для работы нужно платное место.
Качество зависит от входа. Плохой макет или размытый промпт -> посредственный код, MCP не спасает.
Перегруз агента. Модель иногда "уходит в enterprise-режим" и плодит лишние фазы, её надо притормаживать и вести по одной задаче.

Итог: какой MCP-сервер под вашу задачу

Дизайнерам и фронтендерам Figma MCP, QA и вайбкодерам Playwright MCP, командам с процессами GitHub MCP. Для отладки добавляйте Chrome DevTools MCP, для игр берите движковые серверы.

Правило трёх единичек тут работает и на инструменты: одна задача -> один сервер. Не тащите всё сразу. Соберите связку под конкретный цикл: макет-код-тест-PR, и расширяйте по мере надобности.

Кто вы	Что ставить в первую очередь	Второй сервер
Дизайнер / фронтендер	Figma MCP	Chrome DevTools MCP
QA-инженер	Playwright MCP (+ Agents)	GitHub MCP
Вайбкодер / фулстек	Playwright MCP	Figma MCP + GitHub MCP
DevOps / тимлид	GitHub MCP (или gitlab mcp)	Chrome DevTools MCP
Геймдев / 3D	Godot MCP или Unity MCP	Blender MCP

Если ваша зона это релизы и пайплайны, загляньте в подборку агентов для DevOps на портале, там сценарии под смежные задачи.

FAQ

Что такое MCP простыми словами? Открытый протокол, через который AI-агент подключается к внешним инструментам и сам выполняет в них действия. Figma отдаёт макет, GitHub репозиторий, браузер страницу. Агент не советует, а делает: генерирует код, открывает PR, кликает по кнопкам.

Нужно ли платить за Playwright MCP и GitHub MCP? Оба бесплатны и открыты. Playwright MCP поддерживает Microsoft, GitHub MCP сам GitHub. Платите вы только за AI-клиент, внутри которого они крутятся: Cursor около $20 в месяц, Copilot Pro около $10.

Какой MCP-сервер выбрать для верстки из Figma? Официальный Figma MCP, если есть платное Dev-место. Он отдаёт переменные и компоненты, а не скриншот. Без платного тарифа берите community-сервер Framelink через API-токен, качество зависит от чистоты макета.

Chrome MCP, chrome devtools mcp и browser mcp это одно и то же? Нет. Chrome DevTools MCP это отладка живого Chrome: сеть, консоль, перформанс. Browser MCP цепляется к вашим открытым вкладкам с сессиями. Playwright MCP отвечает за тесты и действия по структуре страницы.

Работает ли MCP в Codex и OpenCode? Да. Codex и OpenCode это клиенты, которые потребляют любые MCP-серверы. Подключение в строку: например codex mcp add playwright npx "@playwright/mcp@latest". Тот же сервер работает и в Claude Code, и в Cursor.

Насколько это безопасно? MCP не является границей безопасности. Давайте агенту минимум прав, стартуйте с режима read-only, не пишите пароли в чат (используйте .env). Отдельные инструменты запускают произвольный код, включайте их только в доверенном окружении.

Есть ли MCP для игр и 3D? Есть. Unity MCP и Godot MCP собирают сцены и скрипты движка, Blender MCP лепит меши и материалы. Godot берут за MIT-лицензию и отсутствие роялти, Unity за консольный вывод и Asset Store. Первого сервера для Unreal на июль 2026 пока нет.

Глоссарий

MCP (Model Context Protocol) открытый стандарт связи AI-агента с внешними инструментами через единый интерфейс.
MCP-сервер сервис, который отдаёт агенту набор инструментов (создать PR, снять снапшот страницы, вытащить переменные Figma).
MCP-клиент приложение, где живёт агент: Claude Code, Cursor, VS Code, Codex, OpenCode.
Дерево доступности (accessibility tree) структурное описание страницы по ролям и лейблам, на нём Playwright MCP работает вместо пикселей.
Toolset набор инструментов сервера, который можно включать и выключать, чтобы урезать доступ и контекст.
OAuth / PAT способы авторизации: вход в один клик либо персональный токен доступа.
get_design_context инструмент Figma MCP, возвращающий разметку выделенного фрейма как отправной код.

Хотите так же собирать продукты и автоматизировать рутину через AI? Смотрите разборы инструментов в каталоге IDE и AI-агентов, а если нужен план под вашу задачу, запишитесь на консультацию к Максиму. Покажем связку MCP-серверов под ваш стек.

Материал команды VibeCoderz. Обновлено: июль 2026.