46просмотров
26 марта 2026 г.
📷 ФотоScore: 51
🤖 ИИ-агенты в Figma: собираем 9 экранов через Sonnet 4.6 и GPT-5.4 Thinking Figma вчера анонсировала работу с AI-агентами через MCP. На игрушечном примере посмотрела насколько современные ИИ-агенты готовы забрать на себя реальную рутину по сборке макетов. В тесте участвовала связка Claude Code Sonnet 4.6 и Codex GPT-5.4 Thinking (поскольку Pro-тариф на Claude Code очень быстро отлетел по лимитам). О задача - сделать dashboard-сайт из нескольких, который позволяет визуально планировать ремонт квартиры: выбирать комнаты, расставлять мебель, подбирать материалы и сразу видеть итоговую стоимость проекта. Добавляем обязательным условием работу с компонентами. Весь пайплайн генерации полноценного флоу из 9 экранов занял около часа. Вот как это выглядело: 1. Создание каркаса и базового UI-кита (2 минуты) - Здесь всё отработало отлично. Быстро собралась базовая палитра, стили текста и сетка. 2. Генерация компонентов (10 минут) - Агент выдал по 5-10 вариантов на каждый сложный элемент (карточки, кнопки, хедеры и тд). Но проблема в том, что у модели пока нет пространственного "зрения" - она просто слепила все эти варианты в одну нечитаемую кучу друг на друге. Визуально это выглядело как один глитч-элемент, который пришлось растаскивать руками. На этом моменте Claude Code ушел, но обещал вернуться :0 3. Отрисовка 9 экранов (батчами по 1-3, 4-6, 7-9) - С точки зрения UX и расположения блоков логика выстроилась неплохо. Но по части UI модель совершенно не "чувствует" эстетику: отступы гуляют, элементы съезжают, выравнивание живет своей жизнью. Как выжать из этого процесса максимум и не слить токены: ✨ Если просто кинуть агенту референсы чужих сайтов, он нахватает случайных стилей, и дизайн-система поплывет. Чтобы результат был рабочим, нужен четкий сетап: Скармливать готовый UI-kit заранее и лучше всего ссылкой на UI Kit в Figma. Пусть агент берет уже зашитые токены и переменные, а не выдумывает их на ходу. ✨ Разделять контекст. Отдельно подгружать текстовые файлы с UX-исследованиями и описанием логики продукта. ✨ Жесткие правила в промпте. Обязательно просить собирать макет строго через Auto Layout и выдавать макет, готовый к разработке, чтобы избежать наслоений. ✨ Организация медиа. Создавать отдельную папку assets с готовыми картинками - пусть агент сам забирает нужный контент. ✨ Работа с иконками. Нужно либо отдавать отдельный файл (Figma) с векторами, либо детально прописывать их текстом. Иначе останутся просто серые квадраты или очень быстро отрисованные кривые svg. Figma сейчас жестко закрутила гайки: на Starter-тарифах дают всего 6 вызовов MCP в месяц. Один промпт = один вызов, но по логам Codex видно, что под капотом во время работы над этим проектом агент дернул MCP около 20 раз. То есть лимиты сгорают мгновенно. Текущий уровень ИИ-агентов в Figma - это мощнейший инструмент именно для UX-драфтов и вайрфреймов, а не для финального UI. Скорость проектирования интерфейсов возрастает кратно, если научиться правильно упаковывать контекст в Markdown-файлы и жестко задавать правила верстки. P.S. Видео в посте полностью было сделано с помощью Codex GPT-5.4 Thinking @shot_neurodesign