MCP-серверы превращают AI-агента из советчика в исполнителя: он сам вытаскивает макет из Figma в код, гоняет тесты в браузере и открывает pull request в GitHub. Всё это по одному протоколу, из Claude Code или Cursor, без ручного копипаста. Ниже разбе…
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
Об авторе →Claude Code: новый CLI-агент от Anthropic
Anthropic выпустила Claude Code — терминальный AI-агент для разработчиков. Инструмент работает прямо в командной строке и умеет писать, редактировать и запускать код.
Zcode AI: Полный гид по визуальному интерфейсу для Claude Code и AI-агентов
Узнайте, как использовать Zcode для управления Claude Code, Gemini и Codex в едином GUI. Настройка провайдеров, MCP-серверов и визуальный вайбкодинг.
YouTube-канал с монетизацией из любой точки мира: Пошаговый гайд 2026
Инструкция по созданию YouTube-канала: обход блокировок SMS, настройка расширенных функций через виртуальные номера и правила безопасности для монетизации.
Windsurf Code Maps: Как глубоко понимать архитектуру проекта перед написанием кода
Полный гайд по Windsurf Code Maps, модели Sway 1.5 и Sway Grep. Узнайте, как визуализировать архитектуру кода и ускорить разработку в 13 раз.
Vk Fast Cash Strategy
Аудитория ВКонтакте — это те же люди, что и в Instagram, но 'социальный контракт' площадки другой. Если Instagram — это 'дорогой ресторан' с демонстрацией успеха, то VK — это 'душевная шашлычная'. Здесь не работает глянцевый 'успешный успех
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 это открытый стандарт, по которому AI-агент вызывает внешние инструменты как функции. Не текст-совет, а реальное действие: клик, коммит, генерация кода.
Протокол придумали в Anthropic, дальше подхватило всё сообщество. Публичный реестр MCP-серверов вырос примерно с 1 200 штук в начале 2025 до 9 400+ к апрелю 2026. То есть за год стандарт превратился из эксперимента в базовую прослойку между моделью и вашими сервисами.
Раньше агенту скидывали скриншот макета или кусок ответа API и надеялись, что он угадает. С MCP агент получает структурированный контекст напрямую из источника: список компонентов Figma, дерево репозитория, состояние страницы в браузере.
Клиент (Claude Code, Cursor, Codex, VS Code) держит соединение с сервером один к одному. Сервер отдаёт набор инструментов. Агент выбирает нужный и выполняет. По факту это USB-разъём для интеграций: один протокол вместо десятка кастомных обёрток.
Официальный 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.
Для официального локального сервера включите его в десктоп-приложении: 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 от 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:
Замкнёте их в цикл -> получите почти автономную фабрику автотестов. Живой лайфхак по безопасности: не пишите логин и пароль в чат. Прокидывайте их через переменные окружения (.env), тогда данные уходят в Playwright, а не в модель.
По деньгам расклад простой. VS Code требует Copilot Pro (около $10 в месяц) и иногда упирается в VPN. Cursor стоит дороже, около $20 в месяц, но работает без VPN и даёт триал на 20 дней. Для разработчиков в РФ второй вариант обычно ровнее. Обзоры обоих есть в нашем каталоге AI-инструментов: Cursor и GitHub Copilot.
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 обещает блокировать секреты, сгенерированные ИИ, прямо на уровне сервера, по аналогии с защитой от пуша ключей. Полезно против случайной утечки и промпт-инъекций.
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 ловит перформанс и сетевые баги. Они не конкуренты, а разные слои одной работы.
Кроме тройки-флагманов есть 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 и экспортирует меши.
Коротко по остальным из списка, чтобы вы понимали, что гуглить:
codex mcp add playwright npx "@playwright/mcp@latest".Живая деталь: первого 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 | Сцены, скрипты и меши для игр |
Нужен 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:
/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), тогда сгенерированный код выходит чище дефолтного.
Главный выигрыш это не скорость печати, а убранная ручная рутина между инструментами. Агент сам ходит из дизайна в код, из кода в тесты, из тестов в PR.
Считаем на пальцах. Раньше вёрстка макета занимала часы ручной работы, теперь пара секунд на get_design_context. Тест-план, который QA собирал по клику, TestPlanner делает за проход. PR, ревью и merge схлопываются в один промпт. Экономия времени тут не абстрактная, а измеримая на каждой задаче.
Сильные стороны без воды:
Максим: «VibeCoderz мы собрали за неделю тремя скриптами голосом в Claude Code. 6 200 материалов, первый месяц дал 4 303 посетителя и 36 000 показов в Google. Сделал -> получил цифру. Автоматизация рутины это не про лень, а про то, чтобы руки дошли до продукта.»
MCP не песочница безопасности. Агент с правами на запись может натворить дел, а часть инструментов запускает произвольный код. Плюс лимиты тарифов и риск раздутого контекста.
Это прямо написано в документации Playwright и Figma: MCP не является security-границей. Инструмент browser_run_code_unsafe в Playwright MCP по сути эквивалентен удалённому исполнению кода, включайте его только для доверенных клиентов. Отсюда правило: старт с read-only, минимум toolset, никаких секретов в чат.
Честный список ограничений:
Дизайнерам и фронтендерам 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 на портале, там сценарии под смежные задачи.
Что такое 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 пока нет.
Хотите так же собирать продукты и автоматизировать рутину через AI? Смотрите разборы инструментов в каталоге IDE и AI-агентов, а если нужен план под вашу задачу, запишитесь на консультацию к Максиму. Покажем связку MCP-серверов под ваш стек.
Материал команды VibeCoderz. Обновлено: июль 2026.