Создаём визуал сайта: от идеи до цельного дизайна для mobile и desktop
СЕГОДНЯ
От первого промпта — к полноценному дизайну
Вайб-кодинг — уже реальность
Идея превращается в продукт через правильный запрос к ИИ
Первый деплой
Мысль в голове → GitHub → Netlify → живой URL
Продукт работает
Но работать ≠ цеплять. Есть следующий уровень
ВОПРОС УРОКА 2
Достаточно ли просто сделать так, чтобы продукт работал?
Apple
Чистота, аккуратность, уверенность — ты чувствуешь это ещё до покупки
Nike / Airbnb
Сильный визуальный язык. Цепляют не только функцией, но и ощущением
Notion
Ещё не начал пользоваться — а уже чувствуешь, что продукт продуман
Если сайт — это лицо продукта...
то дизайн — это его выражение лица, голос, энергия
❌ Раньше
Дорого и долго
— Дизайнеры и студии
— Недели обсуждений
— Цвета, шрифты, сетки вручную
— Огромные бюджеты
✓ Сейчас
Вайб-дизайн
+ Объясняем идею
+ ИИ собирает визуальную систему
+ Итерируем и улучшаем
+ Результат за минуты
Добро пожаловать в вайб-дизайн 🎨
Инструмент от Google — превращает текстовые идеи в визуальные интерфейсы.
КАК ЭТО РАБОТАЕТ
Replit = рабочая часть → Stitch = визуальная часть
Заходим на главную
stitch.google.com
Нажимаем «Try now»
Правый верхний угол главной страницы
Вход через Google
Используй свой Google-аккаунт
Главный экран
Слева — проекты, справа — рабочая область и поле промпта
МОИ ПРОЕКТЫ
НОВЫЙ ПРОЕКТ
Как в любом ИИ-инструменте — разные модели под разные задачи
Быстрая генерация
Для старта. Быстро получить первый результат.
← Используем сегодня
Качество и логика
Более продуманный и точный результат.
Переработка
Загружаешь скриншот → Stitch переделывает дизайн.
ИИ-инженер не останавливается на одной модели — пробует каждую под разные задачи
Формула: задача + контекст + формат + детали
ПРОМПТ #1:
ЧТО ЗАДАЁМ:
💡 Как и в вайб-кодинге
Мы не говорим «сделай что-нибудь». Мы объясняем смысл. Только теперь не про код, а про визуал.
STITCH ПОКАЖЕТ:
Stitch создаёт не один экран — целую визуальную систему
ЧТО ПОЛУЧАЕМ:
Главная ценность
Stitch умеет не просто один красивый экран, а сразу несколько связанных страниц — части одного сайта.
Повтори шаги: выбери тип проекта, напиши промпт, создай первый дизайн
+200 XP за выполнение
Не начинаем заново — расширяем то, что уже есть
🏗 Ключевой навык разработчика
Не каждый раз начинать с нуля, а уметь расширять систему, сохраняя единую логику.
ПРОМПТ #2:
ЧТО ДОБАВЛЯЕМ:
О клубе
Описание, история, участники
Расписание
Ближайшие события и фильтрация
Галерея
Фото и визуальные материалы
Регистрация
Форма для записи в клуб
Из набора экранов — в полноценную структуру сайта
3 → 7 экранов
Stitch помнит стиль и добавляет в нём
Единый стиль
Цвета, шрифты, кнопки — всё совпадает
Путь пользователя
Появилась логика использования сайта
Добавь блоки, которые считаешь нужными для своего проекта
СПРОСИ СЕБЯ КАК ПОЛЬЗОВАТЕЛЬ:
Что дополнительно ты бы хотел видеть в своём продукте? Какие страницы тебе не хватает?
Улучшение проекта — важная часть разработки
Каждый пользователь — с компьютера или телефона — должен иметь удобный доступ
ПРОМПТ #3:
Desktop vs Mobile
Больше пространства, шире блоки, контента помещается больше — это нужно учитывать отдельно
Преврати свой проект в десктопную версию
мобильных
экранов
десктопных
версий
единый
стиль
промпта
вместо недель
История версий
Все запросы и версии видны слева снизу в маленьком окне Stitch. Можешь вернуться к любой версии — как git revert, только в дизайне.
Экспортируй дизайн и дай Gemini точный референс
Скриншот
Сделай скриншот экрана из Stitch
Отправь в Gemini
«Напиши код по этому дизайну»
Точный код
Gemini видит точно, что ты хочешь — не придумывает своё
Считай скриншот как референсное фото — как тогда, когда мы генерировали изображения в модуле с постерами
🇬🇧
Английский дизайн
Stitch по умолчанию на английском
🇷🇺
Русская версия
Один промпт — и всё на родном языке
Да, это так легко 😄
УРОК 1
🧱
Собирать смысл
Идея → работающий продукт через вайб-кодинг
УРОК 2
🎨
Собирать форму
Продукт → цельная визуальная система через Stitch
Мы всё ближе к уровню настоящих создателей продуктов 🚀
Создай проект в Stitch
Для своей идеи — приложение или сайт
Минимум 3 промпта
Первый экран → дополнительные → десктоп
Скриншот → в Gemini
Попроси написать код по своему дизайну
Бонус: переведи на русский
Один промпт — дизайн на родном языке
Сдача
Скриншоты Stitch + результат от Gemini — куратору в Discord
+400 XP
за полное выполнение
Твой дизайн ожил — теперь сделаем его живым
СЕГОДНЯ ТЫ УМЕЕШЬ
Сдавай домашку в Discord 💬