Урок 2 — Вайб-дизайн в Stitch | AI Trend
🎨 0 XP
1 / 25
Вайб-кодинг · Урок 2
Вайб-
дизайн
в Stitch

От идеи до цельного дизайна для mobile и desktop — без Photoshop, без курсов дизайна.

📅
Урок
2
🎨
Инструмент
Stitch
📱
Результат
Mobile+Desktop
✦ Вайб-дизайн Google Stitch UI/UX #AIVibe
🎨

✦ Stitch → дизайн готов

Темы урока
Знакомство с Google Stitch
Первый промпт → дизайн
Добавляем новые экраны
Десктопная версия
Экспорт в Gemini → код
Теория · Сила дизайна

Достаточно ли просто «работает»?

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

🍎
Apple

Чистота, уверенность, аккуратность — ещё до покупки

Каждый пиксель на сайте Apple — осознанное решение. Белый фон — не лень, а выбор. Большие отступы — не пустота, а воздух. Дизайн — это язык, на котором бренд говорит с пользователем.

+10 XP
✈️
Airbnb

Тепло, доверие, ощущение «я хочу туда»

Airbnb продаёт не квартиры — они продают ощущение дома вдали от дома. И это ощущение начинается с дизайна: тёплые фото, живые шрифты, мягкие цвета.

+10 XP
💡 Главная мысль: Если сайт — это лицо продукта, то дизайн — это его выражение лица, голос, энергия. Один и тот же смысл можно показать скучно, а можно так, что сразу цепляет.
💰 Раньше vs Сейчас

РАНЬШЕ

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

СЕЙЧАС

Один промпт в Stitch — и перед тобой цельная визуальная система за минуты

🆙 Следующий уровень

На прошлом уроке мы научились собирать смысл — превращать идею в работающий продукт.

Сегодня учимся собирать форму — превращать продукт в цельную визуальную систему.

Это и есть вайб-дизайн.

👆 Нажми на карточки — узнай больше

Инструмент · Google Stitch

Знакомься — Stitch

Инструмент от Google, который превращает текстовые идеи в визуальные интерфейсы. Не нужно рисовать вручную, не нужно знать Figma или Photoshop.

✦ Stitch умеет:

→ Собрать первый экран из промпта
→ Задать единый визуальный стиль
→ Добавить новые страницы в том же стиле
→ Показать дизайн на mobile и desktop
→ Переделать уже готовый дизайн по скриншоту
⚡
Replit
Рабочая часть продукта — логика, код, функции
+
🎨
Stitch
Визуальная часть — дизайн, цвета, экраны, стиль
🤖 Модели в Stitch

⚡ 3.0 Flash

Быстрая генерация. Идеальна для первого результата и быстрых экспериментов

🧠 Thinking 3.1 Pro

Более качественный результат, сильная логика. Для финальных версий

🔄 Redesign

Переработка существующего дизайна по скриншоту

💡 Помни: ты — ИИ-инженер. Это значит пробовать каждый инструмент и каждую модель для разных задач. Не останавливайся на одном варианте.
Теория · Промпт для дизайна

Формула дизайн-промпта

Это та же логика вайб-кодинга — только теперь не про код, а про визуал. Мы не говорим «сделай что-нибудь» — мы объясняем смысл.

1
Тема сайта — о чём продукт?
«для школьного театрального клуба»
2
Основные блоки — какие страницы нужны?
«главный экран, о клубе, мероприятия, контакты»
3
Стиль — какая атмосфера?
«чистый, дружелюбный, современный»
4
Тип устройства — mobile или desktop?
«мобильный дизайн»
✦ Итог: Всё вместе в одном запросе = понятный, конкретный промпт для Stitch
✍️ Промпт 1 · Первый экран
Создай мобильный дизайн сайта для школьного театрального клуба с главным экраном, блоком о клубе, блоком мероприятий и контактами. Чистый, дружелюбный, современный стиль.
✍️ Промпт 2 · Расширение
Добавь ещё мобильные экраны для этого сайта: о клубе, расписание, галерея и регистрация. Сохрани тот же стиль.
✍️ Промпт 3 · Desktop
Создай десктопные версии всех этих экранов: главная, контакты, мероприятия, расписание, галерея и регистрация. Сохрани тот же стиль, цвета, типографику и единый визуальный язык.
Теория · Процесс

Что происходит после промпта

После отправки промпта Stitch не просто «рисует экран» — он думает, планирует и строит систему.

1
Sleva — план действий
Stitch показывает что именно он планирует делать — можно остановить и исправить
2
Цветовая палитра + шрифты
Сначала появляется стиль: цвета, кнопки, иконки — визуальная система всего сайта
3
Страницы по отдельности
Каждый экран — отдельно, чтобы не было путаницы
4
Готовая система экранов
Все страницы в одном стиле — единый продукт, а не набор случайных экранов
✦ STITCH PLANNING
Анализирую промпт и определяю тип проекта
Выбираю цветовую палитру под тему
Подбираю типографику и кнопки
Собираю главный экран
Добавляю дополнительные страницы
✓ Единый стиль — готово

💡 Важно знать

Слева внизу ты всегда видишь все свои запросы и версии проекта. Stitch помнит всю историю — можно вернуться к любому моменту.

Теория · Адаптивность

Mobile vs Desktop

Хороший дизайн умеет жить в разных форматах — не теряет себя, но подстраивается под экран пользователя.

📱 Mobile-first
  • → Всё компактно
  • → Фокус на главном
  • → Вертикальный скролл
  • → Большие кнопки для пальца
🖥 Desktop
  • → Больше воздуха
  • → Блоки шире и свободнее
  • → Больше контента сразу
  • → Горизонтальные сетки
✓ Stitch не растягивает мобильный дизайн — он именно адаптирует его под формат большого экрана. Это разные решения для разных устройств.
🎯 Mobile-first подход

Начинаем с мобильной версии — это профессиональный стандарт. Почему?

📊 60%+ трафика в мире — с телефонов
🎯 Mobile заставляет думать о главном — убирает лишнее
⬆️ Расширить на desktop проще, чем сжать с desktop
✦ Итерация продукта: Не создаём заново каждый раз. Расширяем то, что уже собрано, сохраняя единую логику. Это навык настоящего дизайнера.
Промпты · Расширенные

Промпты для разных задач

🇷🇺 Смена стиля
Измени цветовую палитру на более тёмную и современную. Сохрани структуру экранов, только обнови визуальный стиль — тёмный фон, неоновые акценты.
✍️ Доработка деталей
Сделай кнопки более контрастными и заметными. Добавь больше воздуха между блоками. Увеличь размер заголовков для лучшей читаемости.
🌐 Перевод на русский
Переведи весь текст интерфейса на русский язык. Сохрани структуру, стиль и все экраны без изменений.
🚀 Экспорт в Gemini
Напиши HTML и CSS код по этому дизайну. Используй его как точный референс — цвета, шрифты, расположение блоков должны совпадать с дизайном.
💡 Скриншот из Stitch → Gemini → «Напиши код по этому дизайну». Gemini будет видеть твой дизайн, а не придумывать что-то своё.
Задание 1 · Лёгкий уровень

🟢 «Мой первый дизайн»

🟢 Лёгкое Stitch Mobile
Создай мобильный дизайн сайта для любой школьной организации или клуба

Задача: первый опыт в Stitch. Сфокусируйся на чистом результате — не на идеальном.

  • Минимум 4 мобильных экрана: главная страница, страница «О нас», страница с мероприятиями или расписанием, контакты
  • Единый визуальный стиль: цвета, шрифты и кнопки совпадают на всех экранах — смотришь на любой и понятно, что это один сайт
  • Промпт по формуле: тема + основные блоки + желаемый стиль + тип устройства (мобильный)
  • Скриншот финала: все 4 экрана в одном кадре из Stitch
0 символов
✓ Критерии успеха
  • Незнакомый человек смотрит на дизайн 5 секунд и понимает: что это за сайт, чем занимается организация, как связаться
  • Все 4 экрана выглядят как единый продукт — одни цвета, один стиль, одна атмосфера
  • Дизайн вызывает ощущение продуманности — не случайный набор элементов
💬 Вопросы для самопроверки
  • ?Понятно ли сразу, что это за сайт?
  • ?Чувствуется ли атмосфера?
  • ?Ощущение единого продукта — есть?

📤 Сдача

Скриншот → Discord → #homework-урок2 → хештег #AIVibe

Задание 2 · Средний уровень

🟡 «Полноценный продукт»

🟡 Среднее Stitch Mobile + Desktop
Создай полный дизайн для реального проекта — стартапа, личного бренда или бизнес-идеи

Задача: и мобильная, и десктопная версия. Минимум 2 промпта. Сравни результаты.

  • Минимум 6 мобильных экранов: главная, о проекте, услуги/продукты, галерея/портфолио, форма регистрации или обратной связи, контакты
  • Десктопные версии тех же экранов — дизайн адаптируется под большой экран, а не просто растягивается
  • Минимум 2 промпта: первый создаёт базу, второй расширяет и добавляет страницы с сохранением стиля
  • Сравнение mobile vs desktop: покажи оба варианта рядом + напиши 2–3 предложения — что изменилось и почему это правильно
  • Перевод интерфейса: если Stitch сгенерировал на английском — попроси перевести прямо в промпте
0 символов
✓ Критерии успеха
  • Mobile и desktop версии сохраняют один характер — но каждая удобна на своём устройстве
  • Все 6 страниц связаны логически — пользователь понимает куда идти дальше
  • Дизайн можно показать как реальный прототип продукта — без стеснения
  • Перевод интерфейса выполнен, если нужен
💡 Советы
  • →Выбирай тему которая тебе реально интересна — это чувствуется в результате
  • →В desktop промпте явно укажи «сохрани те же цвета, шрифты и стиль»
  • →Попробуй модель 3.1 Pro для финальной версии

📤 Сдача

Скриншоты обеих версий + 2–3 предложения сравнения → Discord #homework-урок2 → #AIVibe

Задание 3 · Сложный уровень

🔴 «Дизайн-система»

🔴 Сложное Stitch + Gemini Видео-презентация
Создай дизайн продукта который хочешь когда-нибудь запустить

Не просто экраны — продуманная визуальная система с обоснованием каждого решения.

  • Минимум 8 экранов: мобильные и десктопные версии для каждой страницы
  • Минимум 3 промпта: первый — базовый дизайн, второй — расширение, третий — доработка деталей (контраст кнопок, воздух между блоками, цветовая палитра)
  • Описание дизайн-решений — текст 5–7 предложений: почему эти цвета, что они передают, на какую аудиторию рассчитан, в чём уникальность стиля
  • Экспорт → Gemini: скриншот или экспорт дизайна → Gemini → «напиши HTML/CSS код по этому дизайну» → приложи результат
  • Видео-презентация 30–60 секунд: покажи дизайн в Stitch, пройдись по экранам, расскажи голосом — что за продукт, для кого, почему выглядит именно так
0 символов
✓ Критерии успеха
✓Смотришь на дизайн — сразу понятно для кого, какое настроение, чем отличается
✓Mobile и desktop — осознанная адаптация, а не «переставленные блоки»
✓В описании чувствуется: ты думал как дизайнер, а не просто нажимал кнопки
✓Gemini написал код — и он хотя бы отдалённо похож на оригинал
✓Видео-презентация: слушаешь голос и понимаешь продукт без картинки

📤 Сдача (всё вместе)

  • → Скриншоты всех экранов
  • → Текст описания дизайн-решений
  • → Видео-презентация 30–60 сек
  • → Скриншот результата из Gemini
  • → Discord #homework-урок2 → #AIVibe
Конструктор · Промпт

Собери свой дизайн-промпт

Нажимай на блоки — промпт для Stitch собирается автоматически.

🎯 Тип проекта:
сайт стартапа
личный бренд / портфолио
школьный клуб
мобильное приложение
📱 Тип устройства:
мобильный дизайн
десктопная версия
обе версии — mobile и desktop
📋 Основные страницы:
главная, о нас, контакты
главная, услуги, портфолио, контакты
главная, расписание, галерея, регистрация
онбординг, дашборд, профиль, настройки
🎨 Визуальный стиль:
чистый, минималистичный, современный
тёмный, неоновые акценты, tech-стиль
тёплый, дружелюбный, playful
элегантный, люксовый, editorial
← Выбери блоки выше — промпт появится здесь
Квиз · 7 вопросов

Проверь себя — дизайнер?

Игра · Сортировка

Разложи по категориям

Нажми карточку → выдели → нажми зону. Каждый элемент относится к одной категории дизайна.

🎨 Визуальный стиль
🖱 UX / Структура
✍️ Промпт
Дополнительно · Анализ

Разбери сайт как дизайнер

Выбери любой сайт который тебе нравится. Посмотри на него глазами дизайнера — не пользователя.

📐 Дизайн-разбор любимого сайта
  • Назови сайт — и что он продаёт или предлагает
  • Опиши цветовую палитру — 2–3 основных цвета. Что они передают?
  • Типографика — крупные или мелкие шрифты, строгие или игривые?
  • Структура — как расположены блоки? Есть ли воздух между ними?
  • Как бы ты воссоздал этот стиль в Stitch — какой промпт написал бы?
0 символов
🔍 На что смотреть

Цвет

Тёплые = уют и доверие. Холодные = технологии и точность. Тёмные = премиум и серьёзность.

Типографика

Крупные заголовки = уверенность. Тонкие шрифты = элегантность. Округлые = дружелюбность.

Воздух

Много пространства = премиум. Плотная вёрстка = информационный сайт.

Дополнительно · Итерация

Улучши свой дизайн

Возьми свой первый дизайн из Stitch. Сделай ещё один промпт для улучшения — и сравни версии.

🔄 Промпт для улучшения
  • Посмотри на свой первый результат — что тебе не нравится?
  • Напиши конкретный промпт для улучшения: цвет, шрифт, воздух, кнопки
  • Получи новую версию — сравни с первой
  • Что стало лучше? Что можно улучшить ещё?
📐 Что улучшать в дизайне
Контраст кнопок — они должны «кричать» — нажми меня!
Воздух между блоками — дизайн должен дышать
Иерархия текста — заголовок должен быть заметно крупнее
Единство стиля — все страницы из одной «семьи»
✦ Итерация — это норма. Даже лучшие дизайнеры редко попадают в точку с первого раза. Каждая версия — шаг вперёд.
Итог · Суперсилы

Теперь у тебя две суперсилы

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

⚡
Суперсила 1
Собирать СМЫСЛ

Идея → работающий продукт. Вайб-кодинг с Replit, Claude, Gemini. Урок 1.

🎨
Суперсила 2
Собирать ФОРМУ

Продукт → цельная визуальная система. Вайб-дизайн со Stitch. Урок 2.

✦ Главная мысль урока

Мы всё ближе к уровню настоящих создателей продуктов. Ты уже не просто повторяешь — ты придумываешь, строишь и формируешь. Считай это следующим уровнем вайб-кодинга — вайб-дизайн.

Итог · Чек-лист

Что ты освоил?

Я понимаю почему дизайн важен — не только «работает», но и «ощущается»
Я знаю что такое Stitch и чем он отличается от Replit
Я понимаю формулу дизайн-промпта: тема + блоки + стиль + устройство
Я создал свой первый дизайн в Stitch
Я добавил дополнительные экраны вторым промптом
Я создал или понимаю как создать десктопную версию
Я понимаю разницу между mobile-first и desktop
Я знаю как итерировать дизайн — улучшать версию за версией
Я понимаю как экспортировать дизайн в Gemini для генерации кода
Я готов выполнить ДЗ и опубликовать результат с #AIVibe
0/10

пунктов выполнено

Отмечай пункты слева
Домашнее задание · Урок 2

Три уровня — выбирай

🟢 Лёгкий
«Мой первый дизайн»

4 мобильных экрана для школьной организации. Единый стиль. 1 промпт по формуле.

Скриншот всех 4 экранов в одном кадре

#AIVibe
🟡 Средний
«Полноценный продукт»

6 экранов + desktop версия. 2 промпта. Сравнение mobile vs desktop. Перевод на русский.

Скриншоты обеих версий + 2–3 предложения сравнения

#AIVibe
🔴 Сложный
«Дизайн-система»

8+ экранов. 3 промпта. Описание решений. Экспорт → Gemini → код. Видео 30–60 сек.

Скрины + текст + видео + скрин из Gemini

#AIVibe
💬 Сдача
Discord

Все работы публикуй в канале. Смотрим у кого самый сильный визуальный язык!

#homework-урок2

ИТОГОВЫЙ XP УРОКА

0 XP
«Раньше за такой результат люди платили огромные деньги дизайнерам, студиям — неделями обсуждали цвета, шрифты, сетки. А сейчас ты сидишь за своим компьютером и управляешь процессом. Считай это следующим уровнем — вайб-дизайн.»
— AI Trend · Урок 2 · Вайб-дизайн в Stitch · #AIVibe