Урок 3: Финальный проект — полный дизайн-кейс

Чему вы научитесь

• Проектировать полный сквозной дизайн-кейс из 6 этапов за 5–6 часов вместо 4–6 недель
• Создавать мастер-файл DESIGN.md — единый источник правды (токены палитры, типографика, сетка, стиль графики), который удерживает визуальную цельность во всех AI-инструментах
• Передавать контекст между Claude, Recraft V4.1, Figma Make / Google Stitch, Framer / Bolt.new, Kling 3.0 и Hunyuan3D 3.1 без распада стиля
• Собирать убедительную защиту проекта в Gamma с измеримой связью между болями из UX-исследования и финальным интерфейсом

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Главная болезнь AI-проектов: почему 6 разных генераторов распадаются на куски

Когда начинающий дизайнер собирает дипломный или коммерческий проект в шести разных нейросетях, возникает классическая проблема «лоскутного одеяла». Логотип из векторного генератора оказывается кислотно-зелёным в стиле плоского минимализма, сайт в Bolt или Lovable по умолчанию красится в дефолтный фиолетовый градиент Tailwind, иллюстрации из Midjourney уходят в тёмный киберпанк, а 3D-иконка блестит мультяшным пластиком. Арт-директор смотрит на такой проект 5 секунд и выносит вердикт: «Это не дизайн-система, а случайный набор генераций».

В 2026 году индустриальным стандартом решения этой проблемы стал текстовый паспорт дизайн-системы — файл DESIGN.md. Изначально появившись в экосистеме Google Stitch, Cursor и v0, он превратился в универсальный «паспорт визуального стиля», который вы скармливаете каждому AI-инструменту перед началом работы. Вместо того чтобы каждый раз объяснять вкус на пальцах, вы задаёте точные HEX-коды, роли цветов, шрифтовую шкалу, радиусы скругления и характер освещения.

Нулевой этап: создаём сквозной паспорт дизайн-системы (DESIGN.md)

Перед тем как открывать Figma или генератор картинок, потратьте 15 минут на создание в Claude файла DESIGN.md для вашего проекта. Возьмём в качестве сквозного примера запуск сервиса экспресс-доставки фермерских продуктов FreshGo.

Скопируйте этот шаблон и адаптируйте его под тему своего дипломного кейса:

# DESIGN.md — Дизайн-система проекта FreshGo

## 1. Характер бренда и визуальная метафора
Чистый скандинавский фудтех-минимализм. Ощущение свежести утреннего рынка и технологической точности (ориентиры: Samokat, Linear, Apple Health). Никаких кричащих скидочных баннеров и кислотных оттенков.

## 2. Цветовые токены (Color Tokens)
- `background.primary`: `#FAF8F5` (тёплый молочно-кремовый фон вместо стерильного белого)
- `surface.card`: `#FFFFFF` (чистые карточки продуктов с тонкой рамкой)
- `text.primary`: `#141A16` (глубокий лесной графит — основной текст и заголовки)
- `text.muted`: `#5C6660` (вторичные подписи, граммовка, калорийность)
- `brand.primary`: `#059669` (насыщенный изумрудно-зелёный — только для главных кнопок CTA и активных состояний)
- `brand.accent`: `#EA580C` (тёплый терракотовый — бейджи времени доставки «15 мин»)
- `border.subtle`: `#E4E2DD` (деликатный разделитель толщиной 1px)

## 3. Типографика и шкала размеров
- Заголовки (Heading): `Golos Text` или `Inter Tight`, начертание SemiBold (600), плотный трекинг `-0.02em`.
  - H1 Hero: `48px / 52px` (Desktop), `32px / 36px` (Mobile)
  - H2 Section: `32px / 38px`
- Основной текст (Body): `Inter`, Regular (400), `16px / 24px`, максимальная ширина строки `65ch`.
- Цифры и таймеры: `JetBrains Mono` или табличные цифры `font-variant-numeric: tabular-nums`.

## 4. Сетка, отступы и радиусы скругления
- Базовый модуль: `8px`. Внутренний отступ карточек: `24px`. Расстояние между секциями: `96px` (Desktop) / `56px` (Mobile).
- Скругления: карточки `16px`, кнопки и поля ввода `12px`, теги-пилюли `9999px`.

## 5. Правила для 2D/3D-графики и видео (Art Direction)
- Векторные иконки (Recraft V4.1): толщина линии `2px`, скруглённые концы, палитра строго `#141A16` + акцент `#059669` на фоне `#FAF8F5`.
- Фото и видео (Nano Banana / Kling 3.0): естественный утренний боковой свет из окна слева, матовые натуральные текстуры (камень, крафт-бумага, свежее дерево), глубина резкости f/2.8.
- Строгие запреты (Don'ts): никаких неоновых фиолетовых градиентов, никаких стеклянных 3D-шаров из 2021 года, никаких стоковых улыбок в камеру.

Теперь этот документ — ваш главный фильтр. Вы вставляете его в начало диалога в Claude, в поле настроек проекта в Lovable / Bolt / v0, а HEX-коды переносите в палитру Recraft V4.1 и переменные Figma.

Пошаговое прохождение 6 этапов финального кейса

Весь маршрут построен так, что выход каждого предыдущего этапа становится входом для следующего:

1. Этап 1. UX-исследование и продуктовый фундамент (40 минут). Соберите 15 реальных отзывов пользователей конкурирующих сервисов доставки и синтезируйте в Claude JTBD-персону (Урок D.9/02) и карту пути User Journey Map. Выделите 3 конкретных страха покупателя, которые обязан решить ваш интерфейс:

   • Инсайт 1 (Страх тухлых овощей): люди боятся заказывать зелень и авокадо вслепую → Решение в UI: блок «Фото заказа перед отправкой курьером и возврат денег в 1 клик без споров».
   • Инсайт 2 (Скрытые доплаты): раздражение от сервисного сбора в корзине → Решение в UI: честный бейдж «Доставка 0 ₽ от 600 ₽, без сервисного сбора» прямо в шапке и на карточке.
   • Инсайт 3 (Паралич выбора вечером): в 21:00 нет сил собирать корзину по одному продукту → Решение в UI: готовые наборы «Ужин на двоих за 15 минут» на первом экране.
2. Этап 2. Айдентика в Recraft V4.1 и интерактивный прототип в Figma Make / Google Stitch (60 минут).
   • Откройте Recraft V4.1 в режиме Vector (SVG), задайте ваши цвета из DESIGN.md (#059669, #141A16, фон #FAF8F5) и сгенерируйте чистый векторный знак логотипа и единую сетку из 6 иконок преимуществ с одинаковой толщиной штриха.
   • Перейдите в Google Stitch (stitch.withgoogle.com) или Figma Make. Вставьте ваш DESIGN.md и три продуктовых решения из Этапа 1. Сгенерируйте 5 связанных экранов лендинга (Hero с набором ужина, интерактивный расчёт доставки, блок гарантии свежести, отзывы с таймкодами, футер).
   • Проверьте первый экран через плагин Attention Insight (Урок D.9/01): убедитесь, что главная кнопка «Собрать ужин за 15 минут» набирает не менее 7–8% внимания, а Clarity Score превышает 65 баллов.

3. Этап 3. Сборка живого сайта с микроанимациями во Framer или Bolt.new (60 минут). Перенесите прототип из статичных картинок в настоящий рабочий веб-сайт на публичном домене:

   • Вариант А (без кода — Framer): перенесите структуру секций во Framer, подключите глобальные стили цветов и шрифтов из DESIGN.md, настройте адаптив для десктопа (1440px) и мобильного (390px) и опубликуйте на домене .framer.app.
   • Вариант Б (через вайб-кодинг — Bolt.new / Lovable / v0): прикрепите файл DESIGN.md первым сообщением с инструкцией: «Используй токены и правила из этого DESIGN.md как строгий источник правды. Не придумывай свои цвета. Сверстай адаптивный лендинг FreshGo». Добавьте GPU-микроанимации карточек и кнопок с поддержкой prefers-reduced-motion из Урока D.10/02.

4. Этап 4. Гибридное демо-видео продукта на 45–60 секунд (45 минут). По методике из Урока D.10/01 создайте опорные кадры в Nano Banana в палитре #FAF8F5 и #059669, сгенерируйте 3 кинематографичных B-Roll шота в Kling 3.0 по режиссёрской формуле (пустой холодильник вечером → заказ в один тап → горячий ужин на столе) и скомбинируйте их в CapCut с 20-секундным чётким скринкастом вашего реального сайта из Этапа 3 и озвучкой в ElevenLabs.

5. Этап 5. 3D-акцент для Hero-блока и подачи на Behance (35 минут). Чтобы выделить проект среди плоских шаблонных сайтов, создайте фирменный трёхмерный объект — например, минималистичную крафтовую сумку-бокс FreshGo со свежими продуктами:

   • Сгенерируйте чистый референс объекта на светлом фоне в Nano Banana.
   • Загрузите референс в генератор 3D-моделей Hunyuan3D 3.1 или Tripo H3.1 с включённой опцией PBR-текстур и контролем полигональной сетки (Quad/Low-poly topology).
   • Экспортируйте готовую модель в формате .glb и встройте интерактивное вращение на сайт через веб-компонент <model-viewer> или снимите студийный рендер под углом 3/4 в Spline.

6. Этап 6. Сборка презентации и питч-дека проекта в Gamma (30 минут). Соберите все артефакты в логичную историю защиты проекта в сервисе Gamma или на лонгрид-странице кейса: Покажите цепочку «Исходная проблема → Находки JTBD и тепловой карты → Система токенов DESIGN.md → Живой сайт и 3D → Промо-видео → Результаты проверки».

Реалистичный бюджет времени: AI-процесс против классической разработки

Этап работы над кейсом          │ С AI-пайплайном │ Классический цикл │ Ключевые инструменты этапа
────────────────────────────────┼─────────────────┼───────────────────┼──────────────────────────────────────────
0. Паспорт стиля (DESIGN.md)    │ 15 мин          │ 2–3 дня           │ Claude (токены цветов, шрифтов и правил)
1. UX-исследование и JTBD       │ 40 мин          │ 1,5–2 недели      │ Claude + отзывы + Attention Insight
2. Вектор, иконки и прототип    │ 60 мин          │ 3–5 дней          │ Recraft V4.1 (SVG) + Figma Make / Stitch
3. Рабочий адаптивный сайт      │ 60 мин          │ 1–2 недели        │ Framer / Bolt.new + CSS-анимации 60 FPS
4. Гибридное промо-видео        │ 45 мин          │ 4–7 дней          │ Nano Banana + Kling 3.0 + CapCut
5. 3D-ассет с PBR-материалами   │ 35 мин          │ 2–4 дня           │ Hunyuan3D 3.1 / Tripo H3.1 / Spline
6. Упаковка презентации         │ 30 мин          │ 1–2 дня           │ Gamma / Behance Case Study
────────────────────────────────┼─────────────────┼───────────────────┼──────────────────────────────────────────
ИТОГО НА ПОЛНЫЙ КЕЙС            │ ~4,5–5 часов    │ 4–6 недель        │ Полный цикл от ресёрча до релиза

Чек-лист сквозной проверки перед защитой проекта

Прежде чем считать финальный проект завершённым, проверьте его по 6 критериям арт-директора:

1. Трассируемость решений: можете ли вы ткнуть пальцем в любой блок на первом экране сайта и назвать конкретную боль из Этапа 1, которую этот блок решает?
2. Единство палитры: совпадают ли HEX-коды зелёного и фонового бежевого в SVG-иконках из Recraft, в вёрстке сайта и в титрах промо-ролика?
3. Проверка тепловой картой: набирает ли ваша главная кнопка на финальном сайте >7% внимания в Attention Insight при Clarity Score выше 65?
4. Живая ссылка: открывается ли ваш сайт по реальному URL со смартфона без горизонтального скролла и наезжающих друг на друга текстов?
5. Чистота движения: работают ли микроанимации на transform/opacity и добавлен ли в код медиазапрос prefers-reduced-motion?
6. Достоверность видео: видит ли зритель в демо-ролике настоящий чёткий интерфейс вашего продукта, а не размытые нейросетевые экраны?