Дизайн с AI-агентами: от идеи до лендинга и визуальной системы

Статус: draft программы
Формат: живой онлайн-воркшоп, 4 часа
Дата draft: 2026-07-10

Идея воркшопа

За четыре часа участник проходит на собственной идее путь от короткого продуктового и UX-брифа до целиком собранного лендинга.

Сначала мы покажем быстрый способ получить аккуратную страницу из готовых визуальных систем и компонентов. Затем перейдём к более глубокому итерируемому дизайну: исследованию визуальных направлений, выбору отдельных секций, реализации авторской версии и полировке результата.

В финале участник зафиксирует принятые решения в DESIGN.md и переиспользует визуальную систему за пределами лендинга — например, в карусели, обложке или баннере.

Для кого

Воркшоп рассчитан на людей, которые уже пробовали ChatGPT, Claude, Codex, Lovable, v0 или другие AI-инструменты.

Профессиональные знания UX, дизайна, frontend-разработки и программирования не обязательны.

Что участник унесёт

Основные артефакты:

1. brief.md с идеей, аудиторией, пользовательским сценарием и структурой лендинга.
2. Базовый лендинг из готовых визуальных решений и компонентов.
3. Авторское визуальное направление или глубокая итерация базовой версии.
4. Целиком собранный и улучшенный лендинг.
5. DESIGN.md с зафиксированными визуальными правилами.
6. Упаковку вокруг продукта в зафиксированной дизайн-системе.

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

Переиспользуется не обязательно код первой версии. Неизменной основой остаются продуктовый бриф, пользовательский сценарий и структура коммуникации.

Что подготовить

Перед воркшопом желательно:

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

Не нужно заранее проектировать UX, писать подробное ТЗ или придумывать дизайн с нуля.

Рекомендуемая структура проекта:

project/
├── brief.md
├── references/
├── landing/
├── DESIGN.md
└── packaging/

Как работаем

В начале ведущий:

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

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

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

Карта инструментов

Задача	Возможные инструменты
Бриф и пользовательский сценарий	Универсальный brief.md в любом агенте
Быстрая компонентная версия	Refero Styles, готовые компоненты, Lovable, v0 или привычный агент
Итерируемый дизайн	GPT Image, Google Stitch, Claude Design, Product Design
Отбор и сборка секций	Figma, любой другой canvas или агент
Реализация и полировка	Product Design в Codex, Claude Design с передачей в Claude Code, Stitch, Gemini или другой мультимодальный агент
Аудит и cleanup	Skills для проверки сетки, типографики, композиции и очистки frontend-кода
Стандартизация	DESIGN.md
Упаковка и экспорт	HTML/CSS-шаблоны, Playwright и специализированные skills

Карта не является рейтингом. Участник выбирает подходящий маршрут, а не повторяет один проект во всех инструментах.

Программа

Вход: маршрут и карта инструментов

Ориентир: 10–15 минут.

Цель

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

Что показывает ведущий

• Две возможные реализации одного брифа.
• Общий маршрут от идеи до лендинга и DESIGN.md.
• Карту инструментов.
• Принципы работы с вопросами и гибкими паузами.

Что делают участники

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

Глава 1. От идеи до базового лендинга

Ориентир: 45–50 минут.

Цель

Собрать переносимый UX-бриф, определить структуру страницы и быстро получить целый базовый лендинг.

Шаблон brief.md

# Design Brief

## Идея
Что создаём — одним предложением.

## Пользователь
Кто приходит и в какой ситуации.

## Job
Когда <ситуация>, я хочу <действие>, чтобы <результат>.

## Главное действие
Что посетитель должен сделать на лендинге.

## Happy path
3–5 шагов от входа до результата.

## Структура
4–7 блоков лендинга.

## Визуальные ориентиры
Что берём из референсов и чего избегаем.

## Ограничения
Обязательный контент, формат и технические рамки.

## Результат
Какой лендинг должен получиться.

Что показывает ведущий

• Как из идеи получить короткий бриф.
• Как сформулировать пользовательский сценарий.
• Как определить главное действие на странице.
• Как разложить лендинг на последовательность блоков.
• Как выбрать готовую визуальную систему.
• Как использовать готовые компоненты.
• Как быстро собрать целую аккуратную страницу через Lovable, v0 или другой доступный инструмент.

Что делают участники

• Заполняют brief.md.
• Определяют четыре–семь блоков страницы.
• Выбирают готовую визуальную основу.
• Собирают первую версию лендинга.

Инструменты

• любой привычный агент;
• Refero Styles;
• готовая компонентная библиотека;
• Lovable, v0 или другой быстрый путь до работающей страницы.

Минимальный результат

• готовый brief.md;
• определён пользовательский сценарий;
• зафиксирована структура лендинга.

Целевой результат

Целиком собранная базовая страница из готовых решений.

Гибкая пауза

Ориентир: 15 минут.

Нового материала нет. Участник может:

• отдохнуть;
• продолжить текущую работу;
• догнать группу;
• решить техническую проблему;
• задать короткий вопрос ведущему.

Глава 2. Итерируемый дизайн

Ориентир: 50–60 минут.

Цель

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

Что показывает ведущий

• Как получить до трёх визуальных направлений.
• Как генерировать варианты отдельных секций, а не бесконечно перегенерировать всю страницу.
• Как работать с hero, контентными блоками, карточками, CTA и footer отдельно.
• Как сравнивать варианты и выбирать сильные решения по номерам.
• Как подобрать типографику и общий характер страницы.
• Как собрать выбранные секции в цельный visual target.
• Как давать агенту конкретную обратную связь.

Что делают участники

• Выбирают ключевые секции своего лендинга.
• Получают несколько визуальных вариантов.
• Отбирают сильные решения.
• Собирают цельный референс страницы.
• Формулируют, что нужно сохранить и чего нужно избегать.

Инструменты

• GPT Image;
• Google Stitch;
• Claude Design;
• Product Design;
• Figma, любой другой canvas или агент для сборки.

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

Минимальный результат

• выбрано одно визуальное направление;
• получены варианты двух-трёх ключевых секций;
• сформулированы основные визуальные принципы.

Целевой результат

Собран цельный визуальный референс всей страницы.

Гибкая пауза

Ориентир: 15 минут.

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

Глава 3. Реализация и полировка

Ориентир: 45–55 минут.

Цель

Перевести выбранное визуальное направление во frontend и пройти хотя бы одну осмысленную итерацию качества.

Что показывает ведущий

• Как выбрать один подходящий путь реализации.
• Как передать бриф и визуальный референс агенту.
• Как выполнять design-to-code и image-to-code.
• Как использовать Product Design в Codex.
• Как работать с Claude Design и передавать результат в Claude Code.
• Как использовать Stitch как самостоятельный путь до прототипа.
• Как применять мультимодальные возможности Gemini для анализа изображения, layout и image-to-code.
• Как сравнить реализованную страницу с visual target.
• Как найти основные расхождения в композиции, сетке, типографике, отступах, радиусах и изображениях.
• Как исправлять результат точечно, не перегенерируя всё с нуля.
• Как использовать audit- и cleanup-skills.

Что делают участники

• Выбирают один build-path.
• Переносят выбранное направление во frontend.
• Сравнивают страницу с референсом.
• Формулируют список главных различий.
• Проводят одну сфокусированную итерацию.

Skills для полировки

Можно показать:

• skills для аудита сетки и композиции;
• typography-аудит;
• visual QA;
• cleanup сгенерированного frontend-кода;
• ai-slop-cleaner как пример очистки кода и повторяющихся AI-паттернов.

ai-slop-cleaner не заменяет визуальный аудит: его основная роль — очистка и упрощение уже работающего кода.

Минимальный результат

Ключевые секции перенесены во frontend и проверены относительно референса.

Целевой результат

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

Глава 4. Стандартизация и переиспользование

Ориентир: 20–25 минут.

Цель

Зафиксировать найденный визуальный язык и доказать, что он работает не только на одной странице.

Что показывает ведущий

• Как извлечь принятые решения из лендинга.
• Как зафиксировать типографику, палитру, сетку, отступы, радиусы, кнопки, карточки и изображения.
• Как сформировать DESIGN.md.
• Как проверить правила на дополнительной секции.
• Как применить ту же систему к карусели, обложке или баннеру.
• Как верстать упаковку в HTML/CSS.
• Как использовать Playwright для воспроизводимого рендера и захвата материалов в нужных размерах.
• Как применять специализированные skills для каруселей и баннеров.

Что делают участники

• Создают DESIGN.md.
• Проверяют его на одной дополнительной итерации.
• Переносят систему в формат упаковки.
• Собирают карусель из трёх карточек.

Минимальный результат

• готовый DESIGN.md;
• создана обложка или первая карточка.

Целевой результат

• DESIGN.md описывает визуальный язык продукта;
• собрана карусель из трёх связанных карточек.

Финальные вопросы и разборы

Ориентир: 20–30 минут.

В финале:

• разбираем накопившиеся содержательные вопросы;
• смотрим несколько результатов участников;
• обсуждаем различия между выбранными маршрутами;
• фиксируем, что стоит улучшить после эфира;
• показываем, как продолжить развивать продукт с помощью brief.md и DESIGN.md.

Что не входит в воркшоп

• освоение всех показанных инструментов;
• подробное обучение интерфейсу каждого сервиса;
• сравнение тарифов и моделей;
• полноценный UX-research;
• большая продуктовая дизайн-система;
• production-ready разработка со всеми состояниями и интеграциями;
• обязательная публикация проекта;
• рейтинг «лучшего» AI-инструмента.

Главный результат воркшопа — не знание конкретного сервиса, а воспроизводимый процесс:

brief.md
→ базовый лендинг
→ визуальные итерации
→ выбранный visual target
→ frontend
→ полировка
→ DESIGN.md
→ упаковка продукта