Интеграции
Designer подключается к внешним ИИ-агентам и средам разработки: макет можно собирать, править и разбирать прямо оттуда, не переключаясь в интерфейс Designer.
Например, Claude или Codex откроет ваш макет, поменяет раскладку, добавит компоненты или переберёт варианты оформления — достаточно описать задачу словами.
инфо
Что нужно заранее
- Установленное десктопное приложение FlutterFlow Designer — пока только для macOS.
- Установленные через CLI агенты с поддержкой MCP:
- Claude Code —
npm install -g @anthropic-ai/claude-code - Gemini CLI —
npm install -g @google/gemini-cli - Codex CLI —
npm install -g @openai/codex
- Claude Code —
- Одна из поддерживаемых сред разработки: Cursor или Antigravity.
Установка
Откройте раздел Integrations в FlutterFlow Designer. Там перечислены агенты (Agent MCPs — Claude Code, Gemini CLI, Codex) и среды разработки (IDEs — Cursor, Antigravity). Нажмите Install рядом с нужной.
Запуск агента
- Откройте макет и нажмите пункт меню агента справа вверху.
- Выберите, где открыть проект: Open in Claude Code, Open in Gemini CLI, Open in Cursor или Open in Antigravity.
- В открывшемся терминале опишите задачу — например, попросите сделать несколько вариантов выбранного экрана.
- Когда агент запросит разрешение на вызов инструмента Designer через MCP, подтвердите его: без этого агент не сможет ни прочитать проект, ни изменить.
- Дождитесь окончания работы — агент создаст или обновит фреймы в текущем макете.
- Вернитесь в Designer и посмотрите результат.
Вызовы MCP
Через MCP ассистент работает с открытым проектом Designer напрямую: читает и правит экраны, создаёт их, меняет интерфейс, ведёт компоненты, настраивает тему и выгружает макеты.
Вызовов два:
create_session— подключает ассистента к открытому проекту и возвращает идентификатор сессии со списком доступных инструментов. Вызывается первым.call_design_script— выполняет действия: правку экранов, сборку раскладки, обновление содержимого, экспорт.
Что доступно ассистенту:
- Макеты — создать, открыть, переименовать, выгрузить.
- Фреймы (экраны) — создать, продублировать, изменить, упорядочить.
- Элементы — текст, цвета, изображения, раскладка, структура.
- Компоненты — собрать переиспользуемый блок и обновить его сразу везде.
- Тема — цвета, типографика, отступы, стили.
- Изображения и ассеты — загрузить, заменить, сгенерировать.
- Снимки — снять экран или отдельный элемент.
- Выделение — работа с тем, что выбрано сейчас.
- История — отмена, возврат, просмотр изменений.