Google Stitch — ИИ от Google для UI и кода: три режима Gemini 3 + экспорт в Figma
Следующий шаг
Открой бота или продолжай маршрут внутри раздела.
Статья -> план в ИИ
Отправь ссылку на эту статью в любой ИИ и получи план внедрения под свой проект.
Прочитай эту статью: https://vibecode.morecil.ru/ru/interfeis-i-sayty/google-stich-ii-dlya-ui/
Работай в контексте моего текущего проекта.
Сделай план внедрения под мой стек:
1) что изменить
2) в каких файлах
3) риски и типичные ошибки
4) как проверить, что всё работает
Если есть варианты, дай "быстрый" и "production-ready". Как использовать
- Скопируй этот промпт и отправь в чат с ИИ.
- Прикрепи проект или открой папку репозитория в ИИ-инструменте.
- Попроси изменения по файлам, риски и короткий чеклист проверки.
Что такое Stitch сейчас
Эксперимент Google Labs (запущен май 2025, большой апдейт с Gemini 3 — декабрь 2025).
Превращает текст, скетч или скриншот → готовый UI (мобильный + веб) + production-ready код (HTML + Tailwind, иногда React).
Слоган остался: «From idea to app».
Идеально для вайбкодеров: идея → 3–4 варианта UI за 1–2 минуты → сразу в Figma или Cursor.
Как начать
- https://stitch.withgoogle.com
- Логин Google-аккаунтом
- В Settings → выключи «Allow AI model training»
- Лимиты (обновляются ежемесячно):
- ~350–400 генераций в месяц (зависит от режима)
- Хватает на 4–5 полноценных приложений
Три актуальных режима
| Режим | Модель | Для чего идеально | Скорость | Качество | Поддержка изображений | Прямой экспорт в Figma |
|---|---|---|---|---|---|---|
| 3 Flash | Gemini 3.0 Flash | Быстрые HTML-макеты, массовое создание, код | ★★★★★ | ★★★★ | Нет | Да |
| Thinking with 3 Pro | Gemini 3 Pro | Максимальное качество, сложная логика, дашборды | ★★ | ★★★★★ | Да | Да |
| Redesign | Nano Banana Pro | Редизайн существующих приложений/сайтов | ★★★ | ★★★★★ | Обязательно (скриншот) | Нет |
Все функции
- Текст → UI (самый мощный промпт-режим)
- Изображение → UI (только Thinking with 3 Pro и Redesign)
- Интерактивный чат-рефайнмент (выбираешь экран → пишешь «тёмная тема + расстояние до магазина»)
- Варианты (Shift + клик по нескольким экранам → меняешь всё сразу)
- Прототипы (декабрь 2025) — соединяешь экраны стрелками → кликабельный flow
- Тема-селекторы (один клик: светлая/тёмная, вся палитра)
- Redesign — загружаешь скриншот конкурента или своего старого приложения → «сделай в стиле iOS 2026 минимализм»
Экспорт
Figma
- Кнопка «Export → Figma»
- Правой кнопкой «Copy to Figma»
- Вставляешь в Figma → все слои редактируемые + Auto Layout
(Если вдруг не сработало — копируешь код и используешь бесплатный плагин html.to.design или Stitch to Figma)
Код
- «View Code» → чистый HTML + Tailwind CSS (иногда React + shadcn)
- Скачать весь проект .zip
- Код сразу production-ready, с правильной семантикой
Реальный workflow
- Redesign → загружаю скриншот старого приложения
- Thinking with 3 Pro → дорабатываю до идеала
- Переключаюсь на 3 Flash → делаю 5–6 дополнительных экранов
- Export → Figma (всё сразу)
- Или сразу в Codex: «преврати этот Tailwind в Next.js 15 + shadcn/ui + TypeScript»
Плюсы и минусы
Плюсы
- Три режима покрывают 95 % задач
- Figma-экспорт теперь действительно во всех
- Nano Banana Pro в Redesign — лучший в мире по сохранению текста и брендинга
- Прототипы внутри инструмента
- Бесплатно и лимиты щедрые
Минусы
- В Thinking with 3 Pro иногда дольше ждёшь (30–90 сек)
- Сложные дашборды всё равно требуют 1–2 ручных правок в Figma
- Пока нет прямого экспорта в SwiftUI / Jetpack Compose (только веб)
Вывод
В феврале 2026 Google Stitch окончательно стал мощным инструментом для вайбкодеров. Три режима + Figma-экспорт.
Прямая ссылка: https://stitch.withgoogle.com