Google Stitch: дизайн интерфейса приложения из текста

Ты придумал приложение и примерно видишь, что должно быть на экране, но открывать редактор и час двигать прямоугольники — отдельная задача, которая не имеет отношения к самой идее. Google Stitch убирает этот разрыв: описываешь экраны обычными словами или загружаешь набросок с бумаги, а сервис сразу выдаёт несколько связанных макетов — не один экран, а целую цепочку: главный экран, экран действия, экран результата. Это бесплатный инструмент от Google Labs на моделях Gemini. Разберём, как он работает на практике, чем отличается от Figma AI, v0 и Uizard, и как передать готовый макет Claude Code как визуальный ориентир, прежде чем просить агента писать код.

Что такое Google Stitch простыми словами

Google Stitch — экспериментальный сервис Google Labs, который превращает текстовое описание приложения или загруженное изображение в готовые макеты интерфейса. Работает на мультимодальных моделях Gemini: они понимают не только текст, но и картинки, поэтому на вход можно подать и промпт, и скетч, и скриншот чужого приложения как референс. Доступен по адресу stitch.withgoogle.com, впервые показан в мае 2025 года.

Принцип простой. Ты пишешь, каким должно быть приложение: назначение, набор экранов, цветовая палитра, общее настроение — «строгий минимализм» или «яркая аркадная эстетика». Можно вместо текста приложить фотографию рисунка от руки или скриншот интерфейса, который нравится по стилю, — Gemini разберёт изображение и возьмёт из него расположение элементов. В ответ Stitch генерирует не одну картинку, а сразу несколько экранов, которые складываются в связный сценарий: пользователь как будто уже может пройти путь от входа до результата, просто щёлкая по превью.

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

В марте 2026 года сервис получил крупное обновление, которое в обзорах и на форумах чаще всего называют Stitch 2.0, хотя сама Google подаёт его под названием «vibe design». Идея обновления в том, что дизайнер описывает только суть и настроение будущего интерфейса, а разбивку на отступы, сетки и вложенность компонентов берёт на себя модель. Экраны на холсте стали не просто рядом лежащими картинками, а связанными между собой переходами — ближе к кликабельному прототипу, чем к статичной картинке. Раз обновления выходят регулярно и заметно меняют интерфейс, актуальный набор функций надёжнее смотреть прямо на сайте сервиса, а не в конкретной статье месячной давности.

Открыть Stitch можно с обычным Google-аккаунтом, без привязки банковской карты. Дальше действует бесплатный лимит генераций — как именно он считается и меняется со временем, лучше уточнять в самом интерфейсе сервиса на момент работы, а не полагаться на цифры из чужих обзоров.

Логично спросить, кому вообще нужен ещё один генератор макетов. Основная аудитория Stitch — те, у кого просто нет дизайнера под рукой: соло-разработчик собирает приложение в одиночку и не готов тратить неделю на изучение Figma ради трёх экранов, стартапер проверяет гипотезу до найма команды, продакт-менеджер хочет за пять минут показать идею разработчику или инвестору вместо долгого словесного пересказа. Вайбкодер из этого же ряда: ты умеешь поставить задачу ИИ и получить рабочий код, но нарисовать интерфейс с нуля — отдельный навык, которым не обязательно владеть, если есть инструмент, закрывающий именно этот шаг. Небольшой команде из двух-трёх человек Stitch тоже экономит время: не нужно ждать, пока освободится дизайнер, чтобы показать разработчику черновой вариант экрана и начать разговор предметно, с картинкой перед глазами.

Появление такого сервиса у Google — логичное продолжение более широкого тренда. Генеративные модели уже несколько лет ускоряют написание кода: промпт превращается в рабочую функцию за секунды. Следующий шаг — ускорить этап до кода, сам процесс дизайна. Раньше макет интерфейса собирали руками в графическом редакторе, показывали программисту, ждали правок и только потом переходили к вёрстке. Stitch сокращает всю эту цепочку до одного текстового запроса и нескольких уточнений — дизайн перестаёт быть отдельным долгим этапом перед разработкой, а становится частью того же быстрого цикла, что и написание кода.

Практическая польза видна уже на первом шаге курса: прежде чем тратить время на промпты для Claude Code, полезно сначала увидеть черновой макет — так дешевле, чем несколько раз переписывать готовый код ради одной перестановки кнопок. Stitch годится именно для такой проверки на скорую руку: не финальный дизайн, а быстрый способ договориться с самим собой, как должно выглядеть приложение, прежде чем переходить к разработке.

Как открыть Google Stitch из России

Для доступа к иностранным ИИ-сервисам из России обычно действуют сразу два фактора: сетевые ограничения, из-за которых сервис не открывается напрямую, и региональные проверки самого провайдера, которые могут коснуться конкретного аккаунта отдельно от факта блокировки. Stitch — не исключение: он живёт на инфраструктуре Google, а не на отдельном домене российской компании, поэтому те же правила курса про VPN и аккаунты распространяются и на него.

Если в первом модуле курса ты уже настроил VPN и рабочий аккаунт для Claude, GitHub и других сервисов — отдельно готовить что-то специально под Stitch не нужно. Вход туда идёт через обычный Google-аккаунт, тот же самый, каким ты пользуешься в Gmail или Google Диске: отдельной регистрации, приглашения или ожидания в списке доступа сервис не требует.

Технически Stitch — обычная веб-страница в браузере, без отдельного приложения для компьютера или телефона. Значит открыть её можно откуда угодно, где есть браузер и стабильное соединение через VPN, — с ноутбука, с рабочего компьютера или со смартфона. Единственное условие — чтобы VPN не отваливался посреди генерации макета: сервис обрабатывает запрос не мгновенно, а разрыв соединения на середине означает начинать заново. Если страница просто не загружается с первой попытки, прежде чем искать проблему именно в Stitch, стоит проверить то же самое на любом другом сервисе Google — если и там та же картина, дело в соединении, а не в конкретном инструменте.

Конкретные способы настройки VPN, требования к аккаунту и типичные грабли первого подключения не привязаны именно к Stitch — это общий вопрос доступа к зарубежным ИИ-сервисам из России, который курс уже разбирал. Подробный и актуальный разбор — в статье «Claude AI в России»: там про выбор VPN, работу с аккаунтом и что делать, если сервис не открывается с первой попытки. Здесь достаточно знать главное: если у тебя уже открываются другие сервисы Google из-под VPN, Stitch откроется тем же способом, без дополнительной настройки.

Чем Stitch отличается от Figma AI, v0 и Uizard

В курсе уже разобраны три похожих инструмента, и на первый взгляд легко решить, что Stitch — ещё один дубль. На деле у каждого своя ниша, и понимание разницы экономит время: не приходится пробовать все четыре сервиса подряд, чтобы понять, какой нужен именно сейчас.

Figma AI работает внутри Figma. Это набор ИИ-функций для тех, кто уже открыл файл в Figma и ведёт проект в привычном редакторе — генерация первого варианта экрана, подписывание слоёв, вариации компонента. Чтобы этим пользоваться, нужен аккаунт Figma и хотя бы базовое знакомство с интерфейсом редактора. Подробнее об этом в статье «Figma AI: дизайн интерфейса нейросетью». Stitch — самостоятельный сервис: заходишь с нуля, без Figma и без готового проекта, а результат уже потом при желании отправляешь в Figma.

v0 от Vercel сразу выдаёт рабочий код. На выходе — компонент на React и Tailwind CSS, который вставляется в проект и запускается. Это удобно, если ты уже собираешь приложение на этом стеке и хочешь получить готовый кусок разметки. Подробности — в статье «v0 от Vercel: готовый код интерфейса по текстовому описанию». Stitch устроен иначе: в фокусе — визуальный макет нескольких экранов сразу, дизайн, а не код продакшена, хотя экспорт в код тоже есть.

Uizard — про быстрые наброски. Он выдаёт кликабельный вайрфрейм: набор экранов с кнопками и переходами, но без плотной проработки стиля — это ранний этап планирования, детали читать в статье «Uizard: макет интерфейса приложения из текста или скетча». Stitch метит выше по степени завершённости: макеты сразу выглядят как более-менее готовый дизайн приложения, а не схема с подписанными прямоугольниками.

Если резюмировать одной мыслью: Figma AI — для тех, кто уже в Figma, v0 — для тех, кому сразу нужен код на React, Uizard — для самого первого наброска, а Stitch — для случая, когда хочется получить сразу несколько по-настоящему похожих на финальный дизайн экранов, начиная с чистого листа.

Как это работает на практике: от описания до макета

Сценарий работы со Stitch укладывается в несколько понятных шагов, без специфического дизайнерского жаргона.

Шаг 1. Заходишь и выбираешь способ старта

Открываешь stitch.withgoogle.com, входишь с Google-аккаунтом. Дальше выбираешь, с чего начать: с текстового описания или с загруженного изображения. Сервис также предлагает выбор между более быстрым режимом для черновика и более медленным, но детальным — для проработанного результата с приёмом изображений на вход. Конкретные названия и набор режимов в интерфейсе меняются вместе с обновлениями, поэтому ориентируйся на подписи в самом сервисе.

Шаг 2. Описываешь экраны или прикладываешь скетч

В текстовом виде описание должно включать не только «что за приложение», но и детали: сколько экранов, что на каждом, какая палитра, какое настроение. Чем конкретнее запрос, тем меньше потом придётся переспрашивать. Альтернатива — сфотографировать набросок на бумаге или приложить скриншот интерфейса-референса: модель считает с картинки расположение блоков и общий стиль.

Шаг 3. Получаешь несколько связанных экранов

Stitch не выдаёт один кадр, а сразу собирает набор экранов, которые логически продолжают друг друга: открыл главный — есть переход на следующий, и стиль между ними совпадает. Это удобно проверить: пролистай экраны и посмотри, ведёт ли сценарий от входа к результату без разрывов.

Шаг 4. Правишь промптом

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

Шаг 5. Экспортируешь результат

Когда макет устраивает, есть два пути: отправить его в Figma для дальнейшей ручной доработки или выгрузить код разметки и стилей, чтобы взять его за основу при вёрстке. Подробнее про оба варианта — в отдельном разделе ниже.

flowchart TB
    A["Описание экранов текстом или скетч"] --> B["Stitch генерирует несколько экранов"]
    B --> C["Правки обычными фразами"]
    C --> D{"Макет устраивает?"}
    D -->|"Нет"| C
    D -->|"Да"| E["Экспорт в Figma или код"]

Пример: три экрана «Змейки» — от промпта до макета

Разберём на учебном проекте курса — браузерной игре «Змейка». Прежде чем просить Claude Code написать интерфейс, полезно сначала увидеть, как экраны должны выглядеть и куда ведёт каждая кнопка. Это как раз тот случай, когда нужно не одно изображение, а сразу несколько согласованных экранов.

Запрос в Stitch может выглядеть так:

На выходе получаешь три превью, оформленных в одной стилистике: одинаковый шрифт заголовков, одна палитра, похожие по форме кнопки. Дальше идут правки: «сделай кнопку «Играть» крупнее и по центру», «в таблице рекордов добавь строку с датой», «убери иконку настроек с главного экрана, перенеси на экран паузы». Каждая правка — это отдельное короткое сообщение, а не попытка описать всё сразу заново.

Когда макет устраивает, у тебя на руках визуальное техническое задание. Вместо «сделай главный экран для игры Змейка» ты говоришь агенту: «сверстай главный экран по этому макету — заголовок сверху, зелёная кнопка «Играть» по центру, серая кнопка «Таблица рекордов» под ней, тёмный фон». Claude Code меньше додумывает за тебя, а значит меньше промежуточных итераций уйдёт на то, чтобы просто сойтись во мнениях о том, как экран должен выглядеть.

Отдельная польза — сам процесс описания экранов заставляет продумать сценарий заранее. Что происходит при нажатии «Пауза»? Как выглядит таблица рекордов, если она ещё пустая? Такие вопросы легче заметить, глядя на макет из трёх экранов, чем удерживая всё в голове одним текстовым списком функций.

Как писать промпт для Stitch, чтобы получить хороший результат

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

Несколько вещей, которые стоит указывать явно в любом запросе:

• Точное число экранов. Не «сделай экраны для приложения», а «три экрана» или «пять экранов» — и дальше по каждому отдельно, что конкретно на нём должно быть.
• Платформа и ориентация. Мобильное приложение или веб-сайт, вертикальный экран телефона или горизонтальный экран монитора — без этой детали Stitch выбирает сам, и выбор может не совпасть с тем, что нужно.
• Переходы между экранами. Какой экран открывается по какой кнопке, что происходит после конкретного действия — именно это превращает набор картинок в связный сценарий, а не в три случайные заставки.
• Стиль и палитру — словами, а не намёками. «Красиво» и «современно» Stitch трактует по-своему. Конкретные цвета, настроение (минимализм, ретро, аркада, строгий деловой стиль) и форма элементов (скруглённые кнопки, острые углы) дают предсказуемый результат.
• Если начинаешь со скетча или скриншота — платформу и палитру всё равно проговори текстом. Изображение задаёт расположение блоков, но не всегда однозначно считывается по стилю и назначению устройства.

Если чёткой картинки в голове ещё нет и составить подробное описание сходу не получается, не обязательно откладывать запуск Stitch до момента, пока всё продумается. Можно начать с трёх-четырёх предложений, посмотреть на черновой результат, а затем уже уточнять его конкретными правками — иногда быстрее довести расплывчатый первый вариант до нужного вида короткими репликами, чем пытаться идеально описать весь сценарий заранее.

Разница видна на примере. Вот расплывчатый запрос — из тех, что кажутся достаточными, пока не увидишь результат:

А вот конкретный запрос, который учитывает все пункты выше:

Второй запрос длиннее, но экономит время: вместо трёх-четырёх циклов уточнений в духе «нет, не так» ты сразу получаешь макет, близкий к задуманному.

Ещё один нюанс — баланс детализации. Слишком общий запрос Stitch трактует по-своему; слишком детальный, вплоть до точных отступов в пикселях, сервис всё равно не воспримет буквально, потому что не работает на уровне точных координат. Оптимальный уровень детализации — тот, что в примере выше: что на экране, в каком порядке, какого цвета, но без чисел вроде «отступ 24 пикселя».

Как уточнять, если результат не устроил с первого раза

Не обязательно описывать всё идеально с первой попытки — Stitch рассчитан на то, чтобы дорабатываться короткими репликами. Если макет в целом устраивает, но что-то режет глаз, полезно поправлять по одному пункту за раз, а не переписывать запрос целиком:

• «Сделай кнопку «Начать» крупнее и подвинь её в центр экрана».
• «Поменяй акцентный цвет с фиолетового на зелёный».
• «На экране результата убери таймер — он там не нужен».
• «Добавь пятый экран — настройки звука — между стартовым экраном и первым вопросом».

Каждая такая правка — отдельное сообщение с одной конкретной задачей. Попытка вписать сразу пять правок в одну длинную фразу работает хуже: часть из них Stitch может не учесть или учесть не так, как задумано, и потом придётся распутывать, какая именно правка не сработала.

Тот же принцип пригодится и дальше, когда экраны из Stitch превращаются в промпт для Claude Code: чем точнее описан макет — что где расположено, какого цвета, что происходит по клику, — тем меньше итераций уйдёт на то, чтобы агент понял задачу с первого раза. Привычка формулировать конкретно, которую ты нарабатываешь здесь, пригодится на каждом следующем шаге курса.

Экспорт макета: в Figma или в код

После того как макет устраивает, Stitch предлагает два пути дальше, и они закрывают разные задачи.

Путь первый: передать в Figma

Экспорт в Figma полезен, если хочется довести дизайн до полноценного проекта: добавить компоненты, выстроить систему отступов и цветов, подготовить макет для более тонкой ручной доработки. Это тот же формат, в котором работает Figma AI, — то есть после экспорта макет можно продолжать редактировать инструментами, описанными в статье про Figma AI. Полезно, когда планируешь и дальше вести дизайн в Figma, а не сразу переходить к коду.

Путь второй: экспортировать код

Второй вариант — выгрузить код разметки и стилей и взять его за основу при вёрстке. Здесь стоит сразу понимать формат: Stitch делает акцент на визуальном макете, а не на готовом продакшен-компоненте фреймворка, поэтому экспортированный код обычно ближе к обычной HTML/CSS-разметке, чем к React-компоненту, как у v0. Для учебного проекта на чистом HTML, CSS и JavaScript — такого, как «Змейка» в курсе skillmake, — это может означать меньше переделок, чем адаптация React-кода. Но в любом случае экспортированный код — черновик: имена классов, точные отступы и часть стилей почти наверняка придётся поправить руками или отдать на доработку Claude Code, попросив «перепиши этот код под структуру проекта, сохрани внешний вид».

Какие именно форматы кода доступны на экспорт в конкретный момент — вопрос, который сервис периодически пересматривает вместе с обновлениями. Прежде чем закладывать в план конкретный формат вывода, стоит свериться с актуальным списком прямо в интерфейсе Stitch.

Бесплатно ли Google Stitch и какие у него ограничения

Stitch — бесплатный продукт линейки Google Labs. Чтобы начать, достаточно обычного Google-аккаунта, банковскую карту при регистрации не просят. Как у любого экспериментального Labs-проекта, у сервиса есть ограничения на число генераций за период, и со временем Google их пересматривает — точные условия смотри непосредственно на сайте сервиса на момент, когда ты им пользуешься, а не в старых обзорах.

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

• Макеты — черновик, а не финальный дизайн. Цвета, отступы и мелкие детали почти всегда требуют доработки, если важен точный фирменный стиль, а не общее ощущение «выглядит аккуратно».
• Интерфейс сервиса — на английском языке. Это касается кнопок и меню самого Stitch, а не языка твоего будущего приложения: описание экрана можно писать по-русски, и модель его поймёт, но навигация по сайту англоязычная.
• Сложные нестандартные интерфейсы даются хуже простых. Стандартные паттерны — экран входа, лента, список, настройки, карточка товара, таблица рекордов — сервис собирает уверенно. Необычная навигация, редкие жесты или сильно кастомная айдентика получаются менее предсказуемо и требуют больше правок промптом.
• Не заменяет понимание задачи. Даже самый удачный макет — это визуализация того, что ты уже придумал, а не подсказка, что вообще должно быть в приложении. Идею и логику экранов всё равно продумываешь сам.

Частые вопросы

Google Stitch правда бесплатный?

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

Нужен ли аккаунт Figma, чтобы начать работу в Stitch?

Нет. Stitch — самостоятельный сервис, который не требует Figma для старта. Аккаунт Figma понадобится только на этапе экспорта, если решишь отправить туда готовый макет для дальнейшей доработки.

Чем Google Stitch отличается от Figma AI?

Figma AI — это ИИ-функции внутри уже открытого проекта в Figma, для тех, кто продолжает вести дизайн в этом редакторе. Stitch — отдельный сервис, с которого можно начать с нуля, без Figma и без готового файла, а в Figma передать результат уже потом, если нужно.

Можно ли загрузить свой скетч или скриншот вместо текстового описания?

Да. Помимо текста Stitch принимает изображение — фото наброска на бумаге или скриншот интерфейса-референса. Модель считывает с картинки расположение элементов и общий стиль и строит на этой основе макет.

Подходит ли Stitch для мобильных приложений, а не только сайтов?

Да, сервис одинаково работает и с мобильными макетами, и с веб-интерфейсами. При описании задачи стоит явно указать целевую платформу и ориентацию экрана, чтобы результат сразу был ближе к нужному формату.

Что такое Stitch 2.0 и стоит ли ждать именно её?

Так в обзорах и на форумах чаще называют обновление сервиса от марта 2026 года — оно принесло связанные между собой экраны и более крупный рабочий холст вместо отдельных картинок. Официально Google называет эту функциональность иначе, но по сути речь об одном и том же сервисе на stitch.withgoogle.com: отдельно устанавливать что-либо не нужно, обновления приходят сами.

Заключение

Google Stitch закрывает конкретный шаг: превращает идею экранов из головы или из текстового списка функций в набор макетов, которые можно посмотреть, полистать и поправить обычными фразами. Для вайбкодера это способ увидеть, как должно выглядеть приложение, до того как писать первый промпт для Claude Code — и отдать агенту не абстрактное «сделай красиво», а конкретный визуальный ориентир с расположением кнопок, палитрой и переходами между экранами.

При этом не стоит ждать от сервиса готового к публикации дизайна или продакшен-кода за один запрос. Макет — это черновик, который экономит время на самом трудном этапе — переходе от пустого листа к первой конкретной картинке. Дальнейшая доработка, будь то в Figma или в коде вместе с Claude Code, всё равно остаётся частью работы.

Если сравниваешь несколько инструментов для этапа дизайна, посмотри также статьи про Figma AI, v0 от Vercel и Uizard — выбор между ними зависит от того, с какого этапа ты стартуешь и что нужно на выходе: готовый код, работа внутри Figma или самый первый набросок сценария.