Урок 3: Google Stitch и другие AI-генераторы UI

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

• Работать с Google Stitch после major update 19 марта 2026
• Использовать Vibe Design — описание ощущения вместо пиксельной спецификации
• Управлять макетом голосом через Voice Canvas
• Экспортировать код в IDE и понимать его ограничения

Google Stitch: что изменилось 19 марта 2026

Google Stitch — бывший Galileo AI, приобретённый Google и перезапущенный как часть экосистемы Google Labs. Обновление 19 марта 2026 — самое крупное с момента запуска. Stitch полностью переработан в AI-native infinite canvas — рабочее пространство, где идеи растут от набросков до прототипов без переключения между инструментами.

Работает на Gemini 2.5 Pro. Полностью бесплатен: нет платных планов, нет кредитов, нет ограничений по генерациям. Для Google это эксперимент через Labs — монетизация пока не запущена.

Google Stitch -- после обновления 19 марта 2026
├── AI-native infinite canvas (не отдельные экраны, а связанное пространство)
├── Vibe Design: описание ощущения → варианты
├── Voice Canvas: голосовое управление в реальном времени
├── Автогенерация flow: экран → следующий экран с переходами
├── Кодогенерация: HTML, CSS, Tailwind, React
├── Экспорт в Claude Code, Cursor, VS Code
└── Цена: бесплатно (Google Labs)

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

Vibe Design: дизайн по ощущению

Обычный подход: «заголовок 48px, кнопка синяя, карточки в 3 колонки». Vibe Design работает иначе — вы описываете ощущение, которое должен вызывать интерфейс.

Stitch интерпретирует «настроение» и подбирает типографику, цвета, spacing и композицию. Генерирует не один вариант, а 3-4 концепции, из которых вы выбираете направление.

Примеры промптов:

"Лендинг для meditation app. Ощущение: спокойствие, природа,
минимализм. Как Calm, но современнее"
→ Мягкие цвета, много воздуха, органические формы

"Дашборд финтех-стартапа. Ощущение: надёжность, контроль,
технологичность. Как Bloomberg, но чище"
→ Тёмная тема, чёткая сетка, data-dense layout

"Портфолио фотографа. Ощущение: галерея, свет, пространство.
Как музейная выставка в браузере"
→ Белый фон, крупные фото, минимум текста

Пошагово:

1. Откройте stitch.withgoogle.com (через VPN)
2. Нажмите New Project и выберите тип: Desktop, Mobile или Tablet
3. В поле промпта опишите ощущение и контекст
4. Stitch сгенерирует 3-4 варианта — кликните на ближайший к вашему видению
5. Доработайте через текстовые итерации в чате

После выбора направления Stitch может автоматически генерировать связанные экраны. Попросите «покажи следующий экран после регистрации» — и Stitch создаст логичное продолжение flow.

Voice Canvas: голосовые правки

Новая функция обновления — Voice Canvas. Вы буквально разговариваете с дизайном. AI слушает, задаёт уточняющие вопросы, даёт критику и вносит правки в реальном времени.

Как использовать:

1. Откройте готовый макет на canvas
2. Нажмите иконку микрофона в нижней панели
3. Говорите:
   • «Заголовок слишком мелкий, увеличь»
   • «Сдвинь карточки ближе друг к другу»
   • «Добавь секцию с отзывами — три карточки с фото и цитатой»
   • «Мне не нравится фон, сделай градиент от тёмно-синего к чёрному»
4. Stitch применяет изменения сразу — вы видите результат в реальном времени

Голосовые команды работают на английском и русском. Точность распознавания русского ниже на сложных составных запросах. Для «чуть крупнее» и «другой цвет» русский работает хорошо. Для «сделай вертикальную навигацию с аккордеоном и суб-меню» лучше перейти на текст.

Кодогенерация и экспорт

Stitch генерирует не только визуал, но и код. Три формата:

Форматы кодогенерации
├── HTML + CSS: чистый код, без фреймворков
├── HTML + Tailwind CSS: utility-first стили
└── React + Tailwind: компонентный подход

Как получить код:

1. Откройте готовый макет
2. Нажмите Export в верхней панели
3. Выберите формат
4. Скопируйте или экспортируйте в IDE

Экспорт в IDE работает через кнопки «Open in Claude Code» и «Open in Cursor». Claude Code откроет проект с нового сеанса, Cursor создаст папку с файлами.

Важно: сгенерированный код — стартовая точка, не продакшен. Он чистый и читаемый, но потребует доработки: responsive-поведение, accessibility-атрибуты, оптимизация производительности. Ожидайте 30-50% дополнительной работы разработчика.

Ограничения, которые стоит знать

Нет импорта дизайн-систем. В отличие от Figma Make, Stitch работает со своим набором компонентов. Вы не можете загрузить кастомные токены или Figma-библиотеку. Для проектов с жёсткой дизайн-системой это проблема.

Слабая история версий. Нет привычного Ctrl+Z на 50 шагов назад. Если удачный вариант потерялся после трёх итераций — вернуться сложно. Совет: делайте скриншоты промежуточных результатов.

VPN обязателен из России. Без VPN Stitch не загрузится. Рекомендуется VPN с IP в США или Европе. Cloudflare WARP тоже работает.

Практическое задание

Создайте прототип лендинга через Vibe Design:

1. Vibe Design: введите «Лендинг для AI-сервиса транскрибации аудио. Ощущение: технологичный, но дружелюбный. Как Otter.ai, но чище и современнее»
2. Выберите вариант и доработайте текстом: «Добавь секцию с 3 тарифами: бесплатный, Pro $12/мес, Team $29/мес»
3. Voice Canvas: включите микрофон и скажите «Выдели Pro-тариф визуально, сделай его карточку крупнее»
4. Экспорт: выберите Tailwind-формат и посмотрите сгенерированный код
5. Сравните с результатом Figma Make из предыдущего урока: где ближе к вашему видению?

Запишите время от первого промпта до готового результата — понадобится для сравнения в уроке 5.

Резюме урока

Google Stitch — единственный полностью бесплатный инструмент prompt-to-UI профессионального уровня. Vibe Design меняет подход к прототипированию: вместо спецификации пикселей вы описываете ощущение. Voice Canvas ускоряет итерации. Кодогенерация и экспорт в IDE замыкают путь от идеи до кода.

Главные ограничения: VPN из России обязателен, нет импорта кастомных дизайн-систем, слабая история версий. Но для быстрого прототипирования и бесплатного создания стартовых макетов — лучший вариант на рынке.