Webflow через MCP: как поручить AI работу с уже готовым сайтом
У команды есть сайт, компоненты и правила оформления. Теперь нужно добавить новую страницу, обновить содержимое CMS и сохранить привычную визуальную систему. Для такой задачи важен доступ AI к существующему проекту.
Webflow предлагает официальный MCP-сервер, который связывает внешнего агента с инструментами платформы. Разберём его возможности по документации и пример задания для первой проверки.
Что агент получает вместе с подключением
MCP позволяет работать с Webflow из совместимого AI-клиента. Пользователь авторизуется через OAuth и предоставляет доступ к нужным сайтам. Агент действует в пределах его прав.
Для подключения используется удалённый сервер `https://mcp.webflow.com/mcp`. В документации есть инструкции для нескольких клиентов; для других можно настроить подключение вручную. Понадобятся аккаунт Webflow и доступ к хотя бы одному сайту. Источник: [инструкция Webflow](https://developers.webflow.com/mcp/reference/getting-started).
Агенту доступны операции с элементами, компонентами, стилями, переменными и CMS. Большинство таких действий выполняется через Data API. Для отдельных задач, связанных с текущим состоянием Designer, нужен открытый MCP Bridge App: например, для визуальных снимков и чтения текущего выделения. Источник: [архитектура интеграции](https://developers.webflow.com/mcp/reference/how-it-works).
Сайт может хранить инструкции для агента
В Webflow есть Agent Instructions — инструкции, которые живут на уровне сайта и передаются подключённому агенту. Они могут ссылаться на реальные компоненты, стили, страницы и CMS-коллекции проекта.
Для команды это способ закрепить правила работы рядом с самим сайтом. Например, объяснить, какие компоненты использовать для новых страниц и какие части проекта требуют согласования. Инструкции через Shared Libraries можно распространять вместе с ресурсами системы дизайна. Источник: [Agent Instructions](https://developers.webflow.com/mcp/reference/how-it-works).
С чего начать
Для проверки удобно взять одну тестовую страницу и ограниченную задачу. Например, попросить агента подготовить раздел услуги на основе существующих компонентов:
Прочитай структуру тестовой страницы и доступные компоненты. Предложи, как собрать раздел услуги из существующих элементов. Используй приложенные тексты. Не создавай новые стили, если подходящие уже есть. Сначала покажи план и дождись подтверждения. После согласования внеси изменения в тестовую страницу. Публикацию не выполняй.
Такое задание помогает проверить сразу несколько вещей: понимает ли агент устройство проекта, использует ли имеющиеся ресурсы и сохраняет ли границы задачи.
Это пример для проверки, а не результат проведённого теста. После выполнения нужно открыть страницу, посмотреть адаптивное поведение и попробовать изменить результат вручную.
Дальше первой страницы
Webflow описывает работу через MCP с CMS, нативными взаимодействиями и ветками страниц. Например, агент может помогать обновлять контент или создавать анимации по прокрутке. Платформа также предлагает проверять и доводить результат на визуальном холсте перед публикацией. Источник: [возможности Webflow MCP](https://webflow.com/feature/mcp).
Для уже работающей команды практический вопрос — насколько агент вписывается в существующий процесс. Если он использует принятые компоненты, а дизайнеру удобно проверить результат, подключение может быть полезно для регулярных обновлений.
Первый эксперимент стоит оценивать по готовой задаче: что удалось поручить агенту, что пришлось исправить и удобно ли будет вернуться к этой странице через месяц.
Какую часть работы со своим сайтом вы бы проверили первой: новые страницы, CMS или оформление?