Как подключить Figma, Notion, Canva, Webflow, Higgsfield и другие сервисы к Claude и Hermes через MCP и API для чайников

Если вас, как и меня, уже довели видео про «лёгкое подключение за пять минут», после которых ничего не работает и кажется, что проблема в вас — то вы по адресу)

Я не разработчик, а творческий человек. Я долго разбиралась с настройками, ошибалась, переделывала и в итоге нашла рабочий для себя вариант. В этой инструкции расскажу простым языком, как подключить Figma, Notion, Canva, Webflow, Higgsfield, Buildin и другие сервисы к Claude Desktop и Hermes Agent.

Инструкция в первую очередь рассчитана на macOS. На Windows принцип почти тот же: отличаются в основном расположение файла настроек и вид системных путей.

Важно: интерфейсы, адреса MCP-серверов и условия тарифов со временем меняются. Перед подключением сверяйте адрес сервера с официальной документацией выбранного сервиса. Никому не отправляйте свои API-ключи и не вставляйте их в случайные сайты или чаты.

Эти понятия часто смешивают, хотя они решают разные задачи.

API модели даёт Claude Desktop или Hermes доступ к самой языковой модели через провайдера или шлюз. Обычно такой доступ оплачивается по объёму использования.

MCP, или Model Context Protocol, подключает к ассистенту внешние инструменты и данные: макеты Figma, страницы Notion, проекты Canva, сайты Webflow, генерацию Higgsfield и другие сервисы.

То есть API отвечает за то, какая модель думает и генерирует ответ, а MCP — за то, с какими программами она умеет работать.

Для настройки потребуются установленный Claude Desktop и/или Hermes Agent, аккаунты в нужных сервисах, доступ к подходящему API-провайдеру или LLM-шлюзу, а для варианта с конфигурационным файлом — Node.js LTS с командами npm и npx.

Проверить установку Node.js можно в Terminal:

BASH

node --version

npm --version

npx --version

Если команды не распознаются, установите актуальную LTS-версию Node.js с официального сайта.

Это мой путь подключения Claude Desktop через сторонний LLM-шлюз. Он подходит только для шлюза, совместимого с требованиями Claude. Не любой сервис, который продаёт API-ключи, будет работать.

1. Установите и запустите Claude Desktop.

2. Включите режим разработчика: Help → Troubleshooting → Enable Developer Mode.

3. Откройте Developer → Configure Third-Party Inference.

4. В разделе Connection выберите Gateway, а в поле Credential kind — Static API key, если именно такой способ авторизации указал ваш провайдер.

5. Введите адрес шлюза, API-ключ, название модели и остальные параметры, которые выдал провайдер.

6. Нажмите Test connection, а после успешной проверки — Apply Changes.

У разных провайдеров отличаются адрес шлюза, название модели, формат ключа и способ авторизации. Не копируйте эти значения из чужого примера: возьмите их в личном кабинете и документации своего провайдера.

С Hermes Agent настройка у меня прошла проще:

1. Запустите в Terminal команду:

BASH

hermes model

2. Выберите Custom endpoint.

3. Укажите базовый URL, API-ключ и точное название модели, предоставленные вашим сервисом.

4. Сохраните настройки и проверьте подключение.

Для пользовательского эндпоинта Hermes ожидает OpenAI-совместимый интерфейс, обычно с маршрутом /v1/chat/completions. Поэтому здесь тоже нельзя брать произвольный API: сначала проверьте совместимость у провайдера.

Бесплатная десктопная программа не означает бесплатное использование модели через API. Стоимость запросов и условия хранения данных определяет выбранный API-провайдер.

Сначала составьте список сервисов, которые хотите подключить: например, Figma, Notion, Canva, Webflow, Higgsfield и Buildin.

Лучше не добавлять всё подряд. Чем больше сторонних MCP-серверов, тем сложнее понять причину ошибки, если что-то перестанет работать. Начните с одного сервиса, проверьте его, а затем подключайте остальные по одному.

Перед авторизацией обращайте внимание, какие права запрашивает каждый коннектор. Если для вашей задачи достаточно чтения, не выдавайте доступ на редактирование без необходимости.

Есть два основных способа. Современный и более простой вариант — добавить официальный удалённый коннектор в интерфейсе Claude (если платная подписка Claude). Вариант с claude_desktop_config.json (если бесплатный Claude) пригодится для локальных серверов и клиентов, которым нужен мост между локальным stdio и удалённым MCP.

Если сервис предоставляет официальный удалённый MCP-сервер, сначала попробуйте этот способ:

1. Откройте Claude → Settings → Connectors.

2. Нажмите Add custom connector или аналогичную кнопку добавления коннектора.

3. Вставьте официальный адрес MCP-сервера.

4. Нажмите Connect.

5. Завершите авторизацию в браузере и предоставьте только необходимые разрешения.

Актуальные адреса на момент подготовки инструкции:

Сервис

Адрес удалённого MCP-сервера

Figma

https://mcp.figma.com/mcp

Notion

https://mcp.notion.com/mcp

Canva

https://mcp.canva.com/mcp

Webflow

https://mcp.webflow.com/mcp

Higgsfield

https://mcp.higgsfield.ai/mcp

Buildin

https://mcp.buildin.ai/message

Большинство официальных удалённых MCP-серверов используют авторизацию через браузер, поэтому отдельный API-ключ для них часто не нужен. При этом доступность конкретных действий зависит от вашего тарифа, прав в рабочем пространстве и ограничений самого сервиса.

Поддержка конкретного клиента может различаться. Например, Figma публикует список одобренных MCP-клиентов. Если сервер не подключается к вашей версии Claude Desktop, проверьте официальный список поддержки, а не создавайте новый персональный токен наугад.

Этот вариант нужен, если вы используете локальный MCP-сервер либо совместимый мост mcp-remote.

На macOS файл обычно находится здесь:

TEXT

~/Library/Application Support/Claude/claude_desktop_config.json

На Windows:

TEXT

%APPDATA%\Claude\claude_desktop_config.json

Перед изменением полностью закройте Claude Desktop и сделайте резервную копию файла. Например, сохраните рядом копию под именем claude_desktop_config.backup.json.

Используйте минимальную конфигурацию — только раздел mcpServers. Не переносите из чужих файлов внутренние настройки Claude, ID аккаунта, ID рабочих пространств, пути к папкам и параметры интерфейса: они индивидуальны и не нужны для подключения MCP.

JSON

{

"mcpServers": {

"notion": {

"command": "npx",

"args": ["-y", "mcp-remote", "https://mcp.notion.com/mcp"]

},

"canva": {

"command": "npx",

"args": ["-y", "mcp-remote", "https://mcp.canva.com/mcp"]

},

"webflow": {

"command": "npx",

"args": ["-y", "mcp-remote", "https://mcp.webflow.com/mcp"]

},

"higgsfield": {

"command": "npx",

"args": ["-y", "mcp-remote", "https://mcp.higgsfield.ai/mcp"]

},

"buildin": {

"command": "npx",

"args": ["-y", "mcp-remote", "https://mcp.buildin.ai/message"]

}

}

}

mcp-remote — сторонний мост, а не официальный пакет Anthropic. Он запускается через npx и позволяет клиенту, который ожидает локальный stdio-сервер, обратиться к удалённому MCP-серверу. Используйте его только в том случае, если прямое подключение через Connectors недоступно, и проверяйте название пакета и его источник перед запуском.

После сохранения файла снова откройте Claude Desktop. При первом обращении к некоторым сервисам браузер предложит войти в аккаунт и подтвердить доступ.

В первоначальном варианте я использовала сторонний пакет figma-developer-mcp и персональный ключ Figma. Такой способ встречается во многих старых инструкциях:

JSON

{

"mcpServers": {

"figma": {

"command": "npx",

"args": [

"-y",

"figma-developer-mcp",

"--figma-api-key=ВСТАВЬТЕ_СЮДА_НОВЫЙ_КЛЮЧ_FIGMA",

"--stdio"

]

}

}

}

Сейчас предпочтительнее начинать с официального удалённого сервера Figma и OAuth-авторизации — если ваш MCP-клиент поддерживается Figma. Это позволяет не хранить персональный токен прямо в JSON-файле (пока только Hermes мог так подключить).

Если всё же используете сторонний пакет, сначала изучите его репозиторий (своего рода облако с папками и данными кода и тп), разрешения и историю обновлений. Создайте отдельный токен с минимально необходимыми правами. Не отправляйте готовый конфигурационный файл нейросети, если в нём уже есть реальный ключ.

Hermes Agent умеет подключать удалённые MCP-серверы напрямую из чата (можете просто попросить его дать ссылки и сказать что хотите подключить и но все пришлет). Общий формат команды выглядит так:

BASH

hermes mcp add НАЗВАНИЕ --url АДРЕС_MCP_СЕРВЕРА

Например, для Higgsfield:

BASH

hermes mcp add higgsfield --url https://mcp.higgsfield.ai/mcp

По той же схеме можно добавить другие совместимые серверы, подставив их официальные адреса:

BASH

hermes mcp add notion --url https://mcp.notion.com/mcp

hermes mcp add canva --url https://mcp.canva.com/mcp

hermes mcp add webflow --url https://mcp.webflow.com/mcp

Если сервис использует OAuth, Hermes откроет или предложит пройти авторизацию. Точные команды и параметры лучше сверять с документацией Hermes и выбранного сервиса: поддержка клиентов и способы входа могут меняться.

Нейросеть действительно может помочь найти пропущенную запятую или неверную скобку, но отправляйте ей только шаблон с заглушками (дублирую шаблон с кодом, подставьте свои данные).

Безопасный порядок такой:

1. Сделайте резервную копию исходного файла.

2. Объедините нужные блоки mcpServers, не создавая второй раздел с тем же названием.

3. Проверьте JSON на синтаксические ошибки.

4. Убедитесь, что адреса серверов взяты из официальных источников.

5. Только после проверки добавьте секреты локально, если они действительно нужны.

6. Не публикуйте и не пересылайте итоговый файл с токенами.

7. Перезапустите Claude Desktop и подключайте сервисы по одному.

Проверить JSON без передачи данных в интернет можно локально в Terminal:

BASH

python3 -m json.tool "$HOME/Library/Application Support/Claude/claude_desktop_config.json" >/dev/null && echo "JSON корректен"

Если коннектор не появился или выдаёт ошибку, сначала полностью закройте и снова откройте Claude Desktop. Затем проверьте, установлен ли Node.js и работает ли npx, нет ли лишних запятых и повторяющихся блоков в JSON, точно ли скопирован официальный URL и завершена ли OAuth-авторизация в браузере.

Если подключено сразу много серверов, временно оставьте один. Так проще понять, в каком именно блоке ошибка. Ещё одна частая причина — ограничения тарифа или недостаточные права в рабочем пространстве Figma, Notion, Canva, Webflow либо другого сервиса.

Если ключ когда-либо попал в скриншот, публикацию или чат, считайте его скомпрометированным: отзовите старый ключ в настройках сервиса и создайте новый.

Подключение MCP само по себе не отменяет тарифы сервисов. Claude или Hermes получают только тот доступ, который есть у вашего аккаунта.

Поэтому возможны три отдельные статьи расходов: использование языковой модели через API, подписка на Claude или другой клиент — если она нужна для выбранных функций — и платные тарифы подключённых сервисов. Например, отдельные возможности Higgsfield, Canva, Figma или Webflow могут быть недоступны на бесплатном плане.

Перед оплатой проверьте, какие действия доступны на вашем тарифе, есть ли лимиты MCP и требуется ли отдельный API-биллинг.

Да, если вы используете официальные удалённые MCP-коннекторы с OAuth. В этом случае вход и выдача разрешений проходят через браузер. Персональный API-ключ нужен не всегда.

Обычно он расположен по адресу ~/Library/Application Support/Claude/claude_desktop_config.json. Для удалённых MCP-серверов сначала проверьте раздел Settings → Connectors: возможно, редактировать файл вообще не потребуется.

Сам блок mcpServers обычно выглядит одинаково. Отличаются системные пути и иногда способ запуска команд. На Windows файл находится в %APPDATA%\Claude\claude_desktop_config.json.

Чаще всего причина в ошибке JSON, неустановленном Node.js, неверном URL, незавершённой авторизации, неподдерживаемом клиенте или ограничениях тарифа. Перезапустите приложение и проверяйте серверы по одному.

Это обычный текстовый файл, поэтому такой способ менее безопасен, чем OAuth или системное хранилище секретов. Если без ключа не обойтись, ограничьте его права, не синхронизируйте файл с публичным облаком и никогда не публикуйте его содержимое.

Да, если Hermes поддерживает транспорт и авторизацию конкретного MCP-сервера. Удалённые серверы добавляются командой hermes mcp add, после чего может потребоваться OAuth-вход.

На деле схема проще, чем кажется: сначала вы подключаете к Claude Desktop или Hermes языковую модель через совместимый API, а затем добавляете нужные программы через MCP. Лучше начинать с официальных удалённых коннекторов и OAuth, а claude_desktop_config.json использовать для локальных серверов или как запасной вариант.

Главное — не копировать огромный чужой конфигурационный файл целиком, не вставлять свои секретные ключи в открытые чаты и подключать сервисы по одному. Так вы быстро найдёте ошибку, если она появится, и не будете снова проходить весь этот квест с горящей головой.

Вот и всё. Теперь Figma, Notion, Canva, Webflow, Higgsfield и другие нужные программы могут работать рядом с Claude или Hermes, а вы стали на шаг ближе к уменьшению своей головной боли.

Если есть вопросы или интересно разобраться с настройками под свои задачи — пишите комментарии под статьей, делитесь и будем разбираться вместе)

· Claude Desktop: установка и настройка стороннего inference

· Claude Desktop: подключение через LLM-шлюз

· Claude: пользовательские коннекторы и удалённые MCP-серверы

· Model Context Protocol: подключение локальных MCP-серверов

· Hermes Agent: модели и пользовательские endpoint

· Hermes Agent: работа с MCP-серверами

· Figma: настройка официального удалённого MCP-сервера

· Notion: подключение официального MCP-сервера

· Canva: подключение AI Connector

· Webflow: начало работы с MCP-сервером

· Higgsfield: официальный MCP-сервер

· Buildin: руководство по подключению MCP

· Node.js: загрузка LTS-версии