AI во Framer: правки на холсте, интерактивные компоненты и внешние агенты

Для сайта-портфолио или страницы продукта важны детали: как ведёт себя сетка на телефоне, где переносится заголовок, что происходит при наведении на карточку. Такие задачи требуют работы с конкретными элементами проекта.

Во Framer есть несколько способов использовать AI. Встроенные Agents работают на холсте, Workshop помогает создавать компоненты, а сторонние MCP-плагины подключают внешние AI-клиенты. Это разные инструменты, и выбирать их стоит под задачу.

Материал основан на документации Framer и описаниях плагинов. Он не заменяет проверку их работы на своём проекте.

Framer описывает работу агента с выбранными страницами, фреймами и компонентами. Ему можно поручить создание секций, изменение стилей, анимаций и адаптивных раскладок. Результат остаётся на холсте, где его можно просмотреть, отредактировать или отменить.

В инструкции рекомендуется сначала выделить нужный объект и объяснить, какие существующие стили использовать. Для изменений, затрагивающих несколько страниц и компонентов, Framer предлагает Branching — отдельное пространство для проверки работы до объединения изменений (источник).

Задание на правку можно сформулировать так:

> Посмотри выбранную секцию с работами. Предложи раскладку для узкого экрана, сохрани существующие стили текста и карточек. Остальные секции не меняй. После правки перечисли затронутые элементы.

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

Workshop — плагин от Framer для создания компонентов через диалог. Среди описанных примеров — калькуляторы, многошаговые формы, интерактивные тесты и сравнение изображений. Сгенерированный компонент можно уточнять в чате и настраивать через property controls. Источник: [Workshop в Marketplace](https://www.framer.com/marketplace/plugins/workshop/).

Это отдельный сценарий: у страницы уже может быть готовый дизайн, но для неё нужен интерактивный элемент. Сначала стоит определить его поведение, затем проверять каждую ветку взаимодействия.

Например, в задании для калькулятора полезно сразу указать входные данные, формулу и поведение при пустом значении. Само наличие красивого компонента ещё не подтверждает правильность расчёта.

В Marketplace есть MCP-плагин Tommy D. Rossi. Автор прямо указывает, что это не официальный плагин Framer. По его описанию, внешнему агенту доступны структура проекта, текстовые и цветовые стили, операции с узлами и кодовыми компонентами.

Этот плагин связывает AI-клиент с открытым проектом через туннель и должен оставаться открытым для работы. Его возможности и условия стоит рассматривать отдельно от встроенных Agents (источник).

Для изменения существующей секции можно начать со встроенного агента. Для нового интерактивного компонента — изучить Workshop. Если работа уже организована во внешнем AI-клиенте, имеет смысл отдельно проверить подходящий MCP-плагин.