Этап 3: UI — проектирование интерфейса и прототипов

UI — это третий этап конвейера Agent App Factory, отвечающий за преобразование функциональных описаний из PRD в четкую структуру интерфейса (UI Schema) и интерактивные прототипы. Этот этап определяет внешний вид и пользовательский опыт конечного приложения, являясь ключевым мостом между продуктовыми требованиями и технической реализацией.

Что вы сможете делать после изучения

• Преобразовывать PRD в файлы ui.schema.yaml, соответствующие стандартам
• Использовать навык ui-ux-pro-max для создания профессиональных дизайн-систем (стили, цветовые схемы, шрифты)
• Создавать прототипы, которые можно просматривать в браузере (HTML + CSS + JS)
• Понимать границы ответственности UI Agent (проектирование визуала, без технической реализации)
• Избегать распространенных ловушек AI-дизайна (таких как злоупотребление фиолетовыми градиентами и шрифтом Inter)

Ваша текущая ситуация

У вас может быть четкий PRD, но вы не знаете, с чего начать проектирование интерфейса:

• "PRD готов, но я не могу придумать подходящий стиль UI" (отсутствие знаний о дизайн-системах)
• "Не знаю, какие цвета, шрифты и макеты использовать" (зависимость от личного вкуса вместо профессиональных стандартов)
• "Созданный прототип не соответствует PRD" (отрыв структуры интерфейса от функциональных требований)
• "Боюсь, что дизайн будет слишком уродливым или вычурным, не соответствующим позиционированию продукта" (отсутствие опыта в отраслевом дизайне)

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

Когда использовать этот подход

Когда ваш PRD завершен и выполняются следующие условия:

1. Наличие четкого PRD-документа (включает пользовательские истории, список функций, нецели)
2. Проектирование интерфейса еще не начато (UI — первый этап проектирования)
3. Технологический стек еще не определен (детали технической реализации на этапе Tech)
4. Желание контролировать объем проектирования и избежать избыточного дизайна (на этапе UI ограничение — не более 3 страниц)

🎒 Подготовка к началу

Предварительные условия

Перед началом этапа UI убедитесь, что:

• ✅ Завершен этап PRD, файл artifacts/prd/prd.md сгенерирован
• ✅ Установлен плагин ui-ux-pro-max (рекомендуемый способ: выполнение factory init установит его автоматически)
• ✅ Изучен обзор 7-этапного конвейера
• ✅ Подготовлен AI-ассистент (рекомендуется Claude Code)

Основная концепция

Что такое этап UI?

Этап UI — это мост между продуктовыми требованиями и технической реализацией, единственная обязанность которого — преобразовать функциональные описания из PRD в структуру интерфейса и визуальные спецификации.

Не фронтенд-разработка

UI Agent — не инженер фронтенда, он не пишет компоненты React или код CSS. Его задачи:

• Анализ функциональных требований в PRD
• Определение информационной архитектуры интерфейса (страницы и компоненты)
• Генерация дизайн-системы (цвета, шрифты, отступы, скругления)
• Создание интерактивных прототипов (HTML + CSS + JS)

Он не решает "какой фреймворк использовать для реализации", а только определяет "как это должно выглядеть".

Зачем нужна дизайн-система?

Представьте ремонт дома без дизайн-системы:

• ❌ Без дизайн-системы: гостиная в минималистичном стиле, спальня в винтажном, кухня в индустриальном — общий хаос
• ✅ С дизайн-системой: единая цветовая гамма, единый стиль, единые материалы — гармония и согласованность

Этап UI через навык ui-ux-pro-max генерирует именно такое "руководство по ремонту всего дома", обеспечивая, чтобы все интерфейсы, созданные на последующем этапе Code, следовали единым визуальным спецификациям.

Структура выходных файлов

На этапе UI создаются три файла:

Файл	Содержание	Назначение
ui.schema.yaml	Конфигурация дизайн-системы + определение структуры страниц	Этап Tech читает этот файл для проектирования модели данных, этап Code читает этот файл для генерации интерфейса
preview.web/index.html	Прототип, который можно просматривать в браузере	Позволяет заранее увидеть эффект интерфейса и проверить, соответствует ли дизайн ожиданиям
design-system.md (опционально)	Постоянный документ дизайн-системы	Запись дизайнерских решений для удобства последующих корректировок

Пошаговое руководство

Шаг 1: Подтвердите завершение PRD

Перед запуском этапа UI убедитесь, что файл artifacts/prd/prd.md существует и содержит полный контент.

Контрольные точки ✅:

1. Целевая аудитория определена?

   • ✅ Есть конкретный портрет (возраст/профессия/технические навыки)
   • ❌ Размыто: "все"

2. Ключевые функции перечислены?

   • ✅ Есть 3-7 ключевых функций
   • ❌ Слишком много или слишком мало

3. Нецели достаточно подробны?

   • ✅ Перечислено не менее 3 функций, которые не будут реализованы
   • ❌ Отсутствуют или слишком мало

Если PRD неполный

Вернитесь к этапу PRD для внесения изменений, чтобы обеспечить четкий вход для проектирования.

Шаг 2: Запустите конвейер на этап UI

Выполните в каталоге проекта Factory:

# Продолжить с этапа PRD (если этап PRD только что завершен)
factory continue

# Или напрямую указать начало с ui
factory run ui

CLI отобразит текущее состояние и доступные этапы.

Шаг 3: AI-ассистент считывает определение UI Agent

AI-ассистент (например, Claude Code) автоматически считает agents/ui.agent.md, чтобы понять свои обязанности и ограничения.

Обязанности Agent

UI Agent может только:

• Читать artifacts/prd/prd.md
• Писать в artifacts/ui/
• Использовать навык ui-ux-pro-max для генерации дизайн-системы
• Создавать прототипы не более чем из 3 страниц

Он не может:

• Читать другие файлы
• Писать в другие каталоги
• Определять технологический стек (это на этапе Tech)
• Использовать стиль AI по умолчанию (фиолетовые градиенты, шрифт Inter)

Шаг 4: Обязательное использование дизайн-системы ui-ux-pro-max (ключевой шаг)

Это основной шаг этапа UI. AI-ассистент должен сначала вызвать навык ui-ux-pro-max, даже если вы считаете, что направление дизайна очевидно.

Роль навыка ui-ux-pro-max:

1. Автоматическая рекомендация дизайн-системы: автоматический подбор оптимального стиля на основе типа продукта и отраслевой области
2. 67 стилей UI: от минимализма до необрутализма
3. 96 цветовых палитр: предварительно разработанные по отраслям и стилям
4. 57 комбинаций шрифтов: избегая распространенных AI-стилей (Inter, Roboto)
5. Применение 100 правил отраслевых рассуждений: обеспечение соответствия дизайна позиционированию продукта

Что сделает AI-ассистент:

• Извлечь ключевую информацию из PRD: тип продукта, отраслевая область, целевая аудитория
• Вызвать навык ui-ux-pro-max для получения полной рекомендации дизайн-системы
• Применить рекомендованную дизайн-систему к ui.schema.yaml и прототипу

Пропуск этого шага приведет к отклонению

Планировщик Sisyphus проверит, использован ли навык ui-ux-pro-max. Если нет, результаты, сгенерированные UI Agent, будут отклонены и потребуется повторное выполнение.

Что включает дизайн-система?

design_system:
  style: "Glassmorphism"           # Выбранный стиль (например, стекломорфизм, минимализм)
  colors:
    primary: "#2563eb"             # Основной цвет (для основных действий)
    secondary: "#64748b"           # Вспомогательный цвет
    success: "#10b981"             # Цвет успеха
    warning: "#f59e0b"             # Цвет предупреждения
    error: "#ef4444"               # Цвет ошибки
    background: "#ffffff"          # Фоновый цвет
    surface: "#f8fafc"            # Цвет поверхности
    text:
      primary: "#1e293b"           # Основной текст
      secondary: "#64748b"         # Вторичный текст
  typography:
    font_family:
      headings: "DM Sans"          # Шрифт заголовков (избегать Inter)
      body: "DM Sans"              # Шрифт основного текста
    font_size:
      base: 16
      lg: 18
      xl: 20
      2xl: 24
  spacing:
    unit: 8                        # Базовый отступ (сетка 8px)
  border_radius:
    md: 8
    lg: 12
  effects:
    hover_transition: "200ms"      # Время перехода при наведении
    blur: "backdrop-blur-md"       # Эффект матового стекла

Шаг 5: Проектирование структуры интерфейса

AI-ассистент спроектирует информационную архитектуру интерфейса (страницы и компоненты) на основе функциональных требований в PRD.

Пример структуры интерфейса (из ui.schema.yaml):

pages:
  - id: home
    title: "Главная"
    type: list
    description: "Отображает список всех проектов"
    components:
      - type: header
        content: "Мое приложение"
      - type: list
        source: "api/items"
        item_layout:
          - type: text
            field: "title"
            style: "heading"
          - type: text
            field: "description"
            style: "body"
        actions:
          - type: "navigate"
            target: "detail"
            params: ["id"]

  - id: detail
    title: "Детали"
    type: detail
    params:
      - name: "id"
        type: "number"

  - id: create
    title: "Создание"
    type: form
    fields:
      - name: "title"
        type: "text"
        label: "Заголовок"
        required: true
    submit:
      action: "post"
      endpoint: "/api/items"
      on_success: "navigate:home"

Типы страниц:

• list: страница списка (например, главная страница, результаты поиска)
• detail: страница деталей (например, просмотр деталей проекта)
• form: страница формы (например, создание, редактирование)

Шаг 6: Создание интерактивного прототипа

AI-ассистент создаст интерактивный прототип с использованием HTML + CSS + JS, демонстрирующий ключевые потоки взаимодействия.

Особенности прототипа:

• Использование нативных технологий (без зависимости от фреймворков)
• Применение рекомендованных цветов, шрифтов и эффектов из дизайн-системы
• Все кликабельные элементы имеют состояние hover и cursor-pointer
• Дизайн mobile-first (правильное отображение при 375px и 768px)
• Использование SVG-иконок (Heroicons/Lucide), без emoji

Способ просмотра: Откройте файл artifacts/ui/preview.web/index.html в браузере, чтобы увидеть прототип.

Шаг 7: Подтверждение выходных данных UI

После завершения работы UI Agent вам нужно проверить выходные файлы.

Контрольные точки ✅:

1. Существует ли ui.schema.yaml?

   • ✅ Файл в каталоге artifacts/ui/
   • ❌ Отсутствует или неверный путь

2. Использована ли дизайн-система через навык ui-ux-pro-max?

   • ✅ Явно указано в выходных данных или schema
   • ❌ Самостоятельно выбранная дизайн-система

3. Количество страниц не превышает 3?

   • ✅ 1-3 страницы (MVP фокусируется на ключевых функциях)
   • ❌ Более 3 страниц

4. Можно ли открыть прототип в браузере?

   • ✅ Открытие preview.web/index.html в браузере работает корректно
   • ❌ Невозможно открыть или отображается ошибка

5. Избегается ли стиль AI по умолчанию?

   • ✅ Нет фиолетовых/розовых градиентов
   • ✅ Не используется шрифт Inter
   • ✅ Используются SVG-иконки (без emoji)
   • ❌ Присутствуют вышеуказанные AI-стили

6. Есть ли интерактивная обратная связь у всех кликабельных элементов?

   • ✅ Есть cursor-pointer и состояние hover
   • ✅ Плавный переход (150-300ms)
   • ❌ Отсутствует индикация взаимодействия или мгновенное изменение

Шаг 8: Выбор продолжения, повтора или паузы

После подтверждения CLI отобразит опции:

Выберите действие:
[1] Продолжить (перейти к этапу Tech)
[2] Повторить (перегенерировать UI)
[3] Пауза (продолжить позже)

Рекомендуется сначала просмотреть прототип

Перед подтверждением в AI-ассистенте сначала откройте прототип в браузере, чтобы проверить, соответствует ли дизайн ожиданиям. После перехода к этапу Tech стоимость изменения дизайна будет выше.

Предупреждения о подводных камнях

Подводный камень 1: Не использован навык ui-ux-pro-max

Пример ошибки:

AI-ассистент самостоятельно выбрал стиль стекломорфизма и синюю цветовую схему

Последствия: Планировщик Sisyphus отклонит результаты и потребует повторного выполнения.

Рекомендация:

AI-ассистент должен сначала вызвать навык ui-ux-pro-max для получения рекомендованной дизайн-системы

Подводный камень 2: Использован стиль AI по умолчанию

Пример ошибки:

• Фиолетовый/розовый градиентный фон
• Шрифт Inter или Roboto
• Emoji в качестве UI-иконок

Последствия: Дизайн выглядит непрофессионально, легко распознается как сгенерированный AI, что влияет на имидж продукта.

Рекомендация:

• Выбирайте из 57 комбинаций шрифтов, рекомендованных ui-ux-pro-max
• Используйте библиотеки SVG-иконок (Heroicons/Lucide)
• Избегайте злоупотребления градиентами и неоновыми цветами

Подводный камень 3: Количество страниц превышает 3

Пример ошибки:

Сгенерировано 5 страниц: главная, детали, создание, редактирование, настройки

Последствия: Объем MVP выходит из-под контроля, резко возрастает объем работы на этапах Tech и Code.

Рекомендация: Ограничьтесь 1-3 страницами, сосредоточившись на ключевых пользовательских сценариях.

Подводный камень 4: В прототипе отсутствует интерактивная обратная связь

Пример ошибки:

У кнопок нет состояния hover, у ссылок нет cursor-pointer

Последствия: Плохой пользовательский опыт, прототип выглядит нереалистично.

Рекомендация: Добавьте cursor-pointer и состояние hover ко всем кликабельным элементам (переход 150-300ms).

Подводный камень 5: Недостаточная контрастность в светлом режиме

Пример ошибки:

Стеклянная карточка с фоном bg-white/10 (слишком прозрачный), цвет текста #94A3B8 (слишком светлый)

Последствия: В светлом режиме контент невидим, не соответствует стандартам доступности.

Рекомендация:

• Для стеклянных карточек в светлом режиме используйте bg-white/80 или выше
• Контрастность текста >= 4.5:1 (стандарт WCAG AA)

Подводный камень 6: Несоответствие между прототипом и schema

Пример ошибки:

В schema определено 2 страницы, но в прототипе показано 3 страницы

Последствия: Этапы Tech и Code будут в замешательстве, не зная, на что ориентироваться.

Рекомендация: Убедитесь, что прототип и schema полностью согласованы, количество страниц и структура компонентов должны соответствовать.

Резюме урока

Суть этапа UI — это дизайн-система:

1. Вход: Четкий PRD-документ (artifacts/prd/prd.md)
2. Процесс: AI-ассистент генерирует профессиональную дизайн-систему через навык ui-ux-pro-max
3. Выход: ui.schema.yaml (дизайн-система + структура интерфейса) + preview.web/index.html (интерактивный прототип)
4. Проверка: Проверка профессионализма дизайн-системы, возможности просмотра прототипа, избегания стиля AI по умолчанию

Ключевые принципы

• ❌ Чего не делать: не определять технологический стек, не писать фронтенд-код, не использовать стиль AI по умолчанию
• ✅ Что делать: генерировать дизайн-систему, проектировать структуру интерфейса, создавать интерактивные прототипы

Анонс следующего урока

В следующем уроке мы изучим Этап 4: Tech — проектирование технической архитектуры.

Вы узнаете:

• Как проектировать техническую архитектуру на основе PRD и UI Schema
• Как выбирать подходящий технологический стек (Express + Prisma + React Native)
• Как проектировать минимально жизнеспособную модель данных (Prisma Schema)
• Почему этап Tech не должен касаться деталей реализации UI

---

Приложение: Справка по исходному коду

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

Время обновления: 2026-01-29

Функция	Путь к файлу	Номер строки
Определение UI Agent	agents/ui.agent.md	1-98
UI Skill	skills/ui/skill.md	1-430
Определение конвейера (этап UI)	pipeline.yaml	34-47
Определение планировщика	agents/orchestrator.checkpoint.md	1-100+

Ключевые ограничения:

• Обязательное использование навыка ui-ux-pro-max: ui.agent.md:33, 53-54
• Запрет AI-стилей цветов: ui.agent.md:36
• Запрет иконок-emoji: ui.agent.md:37
• Обязательное добавление cursor-pointer и состояний hover: ui.agent.md:38
• Прототип не более 3 страниц: ui.agent.md:34
• Использование нативного HTML/CSS/JS: ui.agent.md:35

Условия выхода (pipeline.yaml:43-47):

• ui.schema.yaml существует
• Количество страниц не превышает 3
• Страница предпросмотра может быть открыта в браузере
• Agent использовал навык ui-ux-pro-max для генерации дизайн-системы

Структура содержимого UI Skill:

• Концептуальная рамка: цель, тон, дифференциация, информационная архитектура
• Рабочий процесс генерации дизайн-системы: анализ требований → генерация дизайн-системы → дополнительный поиск → получение руководства по технологическому стеку
• 67 стилей UI: минимализм, неоморфизм, стекломорфизм, брутализм и др.
• Отраслевые правила рассуждений: 100 правил, автоматическая рекомендация дизайн-системы по типу продукта
• Руководство по дизайн-системе: цветовая система, типографика, система отступов, спецификации компонентов
• Контрольный список перед доставкой: визуальное качество, взаимодействие, светлый/темный режим, макет, доступность
• Принципы принятия решений: целеориентированность, mobile-first, доступность, простота и ограниченность, согласованность предпросмотра, приоритет инструментов
• НЕ делайте (NEVER): AI-стили шрифтов/цветов, иконки-emoji, низкая контрастность, более 3 страниц и др.