Можно ли сделать мобильный интерфейс без человека.

Сегодня пользовательский интерфейс — это не просто «визуалка». Это один из ключевых драйверов роста компании в борьбе за пользователя. И относиться к нему по принципу «лишь бы был нормальный UI» уже нельзя. Каждый элемент — это труд и деньги дизайнеров и разработчиков.

В первой части статьи мы уже разбирали, как Claude 4.5 помогает ускорять релизы и влиять на бизнес-результаты. Теперь посмотрим, как достичь того же с помощью других инструментов.

Кому будет полезна эта статья

Материал пригодится дизайнерам, разработчикам, тимлидам и продактам, которым:

• нужно быстро генерировать и поддерживать UI на Flutter или других фреймворках;
• важна кроссплатформенность и максимальная автоматизация;
• требуется формализовать процесс: внедрить гайды, контролировать логику, выстроить правила обучения;
• интересно, как работать с MCP (Multi-Context Protocol) и перейти к модели «дизайн по подписке»;
• надоело вручную мигрировать дизайн и исправлять одни и те же ошибки.

Почему важно именно сейчас:

• проекты требуют итеративных обновлений, а рутина съедает всё больше ресурсов;
• растут требования к качеству и унификации интерфейсов;
• супер-приложения диктуют стандарты и ускоряют процессы;
• между командами и платформами идёт гонка: скорость обновлений влияет на выживаемость продукта;
• Figma стала стандартом, а Cursor — новым must-have инструментом для тех, кто хочет делегировать рутину без потери качества.

Cursor, Figma, нейросети и MCP

Чтобы понять, как автоматизировать создание UI-компонентов, важно разобраться в инструментах и протоколах, которые делают это возможным.

Cursor — AI-помощник для кода и интерфейсов

Cursor — это IDE на базе VS Code, где уже встроен AI-агент. Он умеет:

• читать дизайн и генерировать код (в том числе Flutter-компоненты);
• вести диалог в чате, уточнять детали;
• подключаться к внешним источникам (например, к Figma);
• использовать правила и логику команды при генерации;
• автоматически исправлять ошибки и предупреждения линтера с помощью Makefile и скриптов.

Cursor помогает быстро получить рабочий код, который потом можно довести до продакшн-качества.

Figma — индустриальный стандарт дизайна

Figma известна всем: это графический редактор с мощным UI/UX-функционалом.

• централизованное хранилище макетов, стилей и компонентов;
• инструменты совместной работы и комментирования;
• dev-режим с доступом к CSS, PNG и мета-данным;
• экспорт компонентов и API для стилей, цветов, иконок и переменных.

Figma становится единым источником правды, вокруг которого строится автоматизация UI-генерации.

MCP (Multi-Context Protocol) — протокол интеграции и доступа

MCP — это не просто API, а стандартизированный протокол общения между AI и внешними системами.
Он позволяет:

• давать Cursor доступ к «живым» данным из Figma;
• получать PNG-файлы из кэша без обращения к сетевым API;
• передавать стили и переменные локально, экономя ресурсы;
• синхронизировать визуальную часть и кодовую базу.

MCP решает главную проблему генерации по картинке — недоступность исходных данных дизайна.

Нейросети

Нейросеть — это мозг всей системы, генерирующий Flutter-компоненты по запросам.
Но сама по себе она не работает без:

• правил обучения (MD-файлы с примерами хорошего и плохого кода);
• линтера, взаимодействующего с Cursor через make-команды;
• четкого порядка действий: анализ контекста → обучение правилам → получение данных через MCP → генерация → анализ и исправление.

Такой цикл обеспечивает реальный результат, а не просто «черновик».

Пример: генерация Flutter-компонента из макета Figma

Рассмотрим, как на практике автоматизируется процесс.

1. Подготовка

Берем типовой экран e-commerce — главная с бонусной картой.
Задача: получить компонент BonusWidget из PNG-изображения.

Действия:

• в Figma копируем PNG в Dev-режиме;
• загружаем в чат Cursor;
• отправляем запрос: «Сгенерируй UI-компонент по изображению».

2. Первые результаты

Cursor анализирует изображение и создает Flutter-компонент.
Он:

• находит сущности total_bonuses, expiring, expireZ;
• создает BonusWidget;
• генерирует QR-код через CustomPainter (вместо иконки).

3. Что не сработало

Результат пока сырой:

• стили не совпадают — Cursor «угадывает» цвета и шрифты;
• пропуски в локализации;
• имена классов не всегда соответствуют архитектуре проекта;
• встречаются ignore-комментарии;
• потеряны декоративные элементы и отступы.

Это рабочий MVP, который можно дорабатывать.

4. Выводы

AI не даст идеальный код «с первой картинки».
Самое эффективное применение — быстрая генерация прототипа, который потом шлифуется человеком.

Главное — контекст и правила. Чем четче вы их зададите, тем лучше AI поймет задачу.

Управление качеством: правила и линтер

Правила — это основной инструмент контроля качества.
Они хранятся в .cursor/rules и могут быть:

• глобальными — для всех проектов;
• локальными — в пределах конкретного проекта;
• временными — формируются на основе истории диалога.

Как писать правила:

• дробите крупные на короткие (до 500 строк);
• формулируйте конкретно: «используй 2 пробела», «не оставляй ignore»;
• добавляйте примеры верного и ошибочного кода;
• фиксируйте архитектуру, стиль и обработку ошибок.

Линтер и автоматизация контроля

Линтер (например, Surf Lint Rules или Dart Code Metrics) — второй фильтр качества.
На уровне Makefile/CI прописывается обязательный запуск линтера после каждой генерации.

AI должен понимать правила:

• «не сдавай код с предупреждениями»;
• «исправь все ошибки до 0 перед завершением задачи».

Команды make autofix и make analyze автоматизируют процесс исправлений и анализа.

Обучение через обратную связь

После каждой генерации важно давать понятный фидбэк:

«Stack внутри DecoratedBox без размеров — исправь»
«Добавь описание для Text.rich»

После исправления добавляем новое правило.

Так AI перестает повторять ошибки и постепенно повышает качество кода.

Stub-класс — каркас для UI

Stub-класс — это «скелет» UI-компонента, включающий данные (Entity) и нужные поля.

Зачем он нужен:

• снижает количество ошибок: AI четко видит доступные поля;
• стабилизирует структуру, особенно в крупных проектах;
• позволяет интегрировать компонент без лишней правки.

Итог

Качественная автоматизация UI-разработки держится на трёх китах:

1. Формализованные правила для AI.
2. Жесткий контроль линтером.
3. Постоянная обратная связь и обучение.

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