От стикеров к UI: генерация экранов на базе доменной модели и ИИ

От стикеров к UI: генерация экранов на базе доменной модели и ИИ

Все привет! В эпоху AI разработки Domain Driven Design приобретает очень весомое значение для разработки. Из философии построения сложных программных систем он становится великолепным инструментом для управления #AI4SDLC (Artificial Intelligence for Software Development Life Cycle).

В этом видео я хочу рассказать, как испльзование Domain Driven Design и Event Storming позволяет сгенерировать макеты интерфейсов уже на раннем этапе разработки. Все что вам нужно - доска event storming описание моделей, а остальное за вас сделает чат-бот или агент.

Почему DDD отлично подходит для агентской разработки

DDD - моделирование бизнес-процессов. Мы создаем аналитическую модель, которая описывает простым текстом и языком схем необходимые нам бизнес процессы. Хорошая модель не противоречива и лаконична, а также не имеет двойного толкования. А это, как выяснилось, основная слабость AI разработки.

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

Транскрибация видео:

Как из доски EventStorming сделать мокапы и готовые макеты экранов

В процессе проектирования новой функциональности «Конструктор тренировок» для приложения «Гиря – Русский мах» я опробовал интересную связку: превращение результатов доменного моделирования сразу в готовый UI с помощью связки LLM и генеративных дизайн-инструментов.

Когда доменная логика и бизнес-процессы разложены по полочкам, передача контекста в нейросети дает поразительную точность генерации без лишней «отсебятины».

Пошаговый процесс

  • 1. Фиксация бизнес-логики в EventStorming На доске (например, в Excalidraw) моделируется полный пользовательский путь: события домена, команды, агрегаты, состояния и необходимые данные. Даже при работе в соло такой штурм четко очерчивает границы фичи.
  • 2. Подготовка контекста и правил (Модели данных) К сессии подключаются описания существующих моделей, сущностей, бизнес-инвариантов и жизненного цикла объектов (models_v1.md), чтобы новые экраны органично вписывались в архитектуру приложения.
  • 3. Формирование ТЗ через агентскую LLM Скриншот доски (image.png), файл с моделями и контекст текущей кодовой базы скармливаются модели (например, GPT-5/Luna в OpenCode). Задача агента — проанализировать связи и составить подробное техническое описание экранов, списков виджетов, состояний форм и пользовательских переходов (to_desing_prompt.md).
  • 4. Скармливание промпта дизайн-генератору Готовый промпт отправляется в сервис генерации интерфейсов (например, Stitch with Google). Туда же подгружаются дизайн-система приложения и скриншоты уже существующих экранов для сохранения общего визуального стиля и темы.
  • 5. Получение интерактивных прототипов Инструмент генерирует экраны на лету: форму конструктора, выбор упражнений, таймеры и превью тренировки, строго следуя доменным событиям и шагам из первого этапа.

Важные нюансы

  • Жесткий запрет на галлюцинации: В системный промпт LLM необходимо явно закладывать инструкцию: «Не придумывать лишнего, только то, что явно требует бизнес-логика».
  • Опора на дизайн-систему: Чтобы экраны не выглядели чужеродными, генератору дизайна обязательно передаются палитра, типографика и сетка текущего проекта.
  • Повторяемость результата: Чем чище структурирован EventStorming и строже описана доменная модель (State Driven Domain Model), тем меньше итераций правок требуется как для UI, так и для последующей кодогенерации.

В итоге такой подход закрывает разрыв между архитектурой и UI: прототипы рождаются напрямую из бизнес-требований за считанные минуты.

Мой канал в telegram