Прототипирование без Figma: Как ИИ переписал процесс дизайна в сервисной разработке

# Автоматизация в отделе дизайна: прототипы и аналитика без Figma

В первой части цикла «Танец с ИИ и его внедрения» мы обсуждали важность понимания процесса перед выбором инструмента. Сегодня речь пойдет о технической реализации: как команда разработала полностью функциональный прототип сервиса с нуля, минуя традиционный этап макетирования в векторных редакторах.

*«Какая Figma в 2026 году? Убираем».* Так началось обсуждение, приведшее к эксперименту по созданию сервиса исключительно с помощью нейросетей и аналитики данных.

Аналитика как фундамент: от текстов к структуре

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

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

1. Загрузка данных: Блок документации (раздел или страница) подавался в нейросеть. 2. Сравнительный анализ: На вход подавались ссылки на конкурентов и смежные сервисы для контекстного сравнения. 3. Формирование правок: Модель выдавала ранжированный список рекомендаций: от критических уязвимостей UX до мелких доработок. 4. Обратная связь: Автор решения принимал решения о принятии предложений, после чего просил модель обновить документацию с учетом новых комментариев.

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

Прототипирование в терминале: Claude Code вместо макетов

После того как аналитическая часть была готова, подошло время к вёрстке. Традиционный путь — отрисовка макетов в Figma — был заменен на работу с терминалом через инструмент Claude Code.

Процесс начался с локального окружения. Дизайнер отрисовал одну опорную страницу (1920px) для понимания визуальных стилей (шрифты, сетки). Дальше в работу включилась нейросеть, подключенная через MCP (Model Context Protocol) для взаимодействия с внешними системами.

Алгоритм переключения дизайна в код

1. Итеративное обучение: Первые попытки переноса дизайна в код (HTML/CSS) давали «полную шляпу». Чтобы улучшить результат, команда использовала диалоговый подход: нейросеть запрашивала недостающие материалы (скриншоты, брендбук), а команда уточняла параметры. 2. Фиксация правил: После достижения приемлемого результата для первого блока, команда попросила ИИ оформить опыт в виде документа .md. Это стало базовым набором правил (скиллом) для последующих страниц. 3. Системность: Вместо импровизации нейросети дали задачу выстроить систему отступов, паддингов и шрифтов. Было четко прописано: «Запомни. Держи преемственность. Не гуляй шрифтом».

Результат: Нейросеть начала адаптировать свои собственные макеты лучше, чем перерабатывала готовые макеты из Figma. Это логично: легче править свою работу, чем воспроизводить чужую логику без визуального контекста.

Адаптивность как обязательное требование

В отличие от статических презентаций, сервис требует проработки поведения на разных устройствах. На этапе прототипирования были сразу охвачены три разрешения экрана: 1920px, 1084px и 360px.

Команда не давала ИИ вестись на догадки. Вместо этого был сформулирован алгоритм: * Изучить макет 1920px и сверстанный код. * Проанализировать отступы между заголовками и блоками. * Собрать систему шрифтов и сеток согласно нормам UI/UX. * Все изменения фиксировать в CHANGELOG.md.

Этот подход обеспечил чёткость и предсказуемость на всех этапах разработки прототипа.

Презентация HTML: новый стандарт взаимодействия с клиентом

Один из главных вопросов: как показать прототип, не используя привычный для заказчика Figma?

Ответ оказался неожиданным: HTML-код.

Раньше клиент мог оценить только внешний вид статичных картинок и состояний в графическом редакторе. В новом формате клиент получал кликабельный интерфейс.

* Сценарии: Нажатие на кнопку вызывает анимацию, добавление элементов, переключение состояний — всё работает как на реальном сайте (без бэкенда). * Преимущество: Проще найти ошибки до того, как они попадут в релиз. Пользователь «потрогает» сырой, но живой продукт. * Риски: Сложнее оценивать объем работ визуально, чем в развернутой Figma-композиции, однако команда доказала, что функционал важнее визуальной статики.

Клиент, несмотря на новизну формата, оценил возможность взаимодействовать с будущим сервисом и утвердил работу.

Интеграция в рабочий процесс: GitHub и аналитики

Прототипирование не изолировалось, а стало частью общего цикла разработки, базируясь на репозитории GitHub.

1. Совместная проверка: Аналитики просматривали прототипы на соответствие документации и присылали правки в виде файлов с комментариями. 2. Автоматизация правок: Команда загружала файл с пожеланиями в локальную папку проекта. Нейросеть анализировала изменения, выявляла слабые места (например, возврат к старой логике, о которой уже шла речь) и вносила правки в код. 3. Конфликт-менеджмент: При обнаружении противоречий («мы поправили вчера, а сегодня отменяем») алгоритм предлагал выбор вариантов решения, а человек принимал окончательное решение.

Этот цикл позволил ускорить коммуникацию между аналитиками и разработчиками, сделав процесс правок прозрачным и отслеживаемым.

Где ИИ пока буксует

Не все задачи легли на плечи нейросети. В ходе эксперимента было выявлено важное ограничение: креативный контентный дизайн.

На проекте для дистрибьютора оборудования, где требовалась «красивость, чувство прекрасного и космос», нейросети (Claude Design и другие) не справились с генерацией уникального визуального стиля. Даже при подаче референсов и скринов результат был далек от ожидаемого «творческого» уровня. В таких случаях по-прежнему требуется ручной труд дизайнера для создания визуальной концепции, которую ИИ лишь впоследствии может попытаться воспроизвести.

Выводы

Для разработки сервисов с четкой структурой данных, функционала и логики — прототипирование с помощью ИИ является прямым показанием. Это позволяет делегировать рутинные задачи вёрстки и адаптивизации алгоритмам, освобождая ресурсы для анализа и проверки.

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

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