Google Stitch — экран из промпта

Иногда идея интерфейса в голове есть, а рисовать её негде и нечем — Figma тяжёлая, дизайнить ты не умеешь, а хочется просто увидеть экран. Google Stitch закрывает ровно это: заходишь в браузер, описываешь экран словами — и через пару минут смотришь на готовые макеты. Бесплатно, без установки, без навыка дизайна. В этом гайде разберём, как сделать первый экран, почему всё держится на файле DESIGN.md и где у Stitch честный предел.

Короткий ответ

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

Что это и чем полезно

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

• Ноль порога входа. Всё в браузере, бесплатно, регистрация в дизайне не нужна. Открыл вкладку — начал.
• Быстрый черновик глазами. От описания до готовых экранов — примерно 2–5 минут. Прикинуть, как выглядит идея, дешевле, чем собирать её руками.
• Не один экран, а система. Stitch сначала собирает дизайн-систему, а потом рисует по ней несколько экранов рядом на холсте — сразу цельная картинка потока, а не разрозненные наброски.
• Вход не только текст. Можно скормить картинку, вайрфрейм или скриншот — Stitch превратит их в интерфейс.

Как сделать первый экран

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

экран приложения для фитнеса: план тренировки
на сегодня, кольцо прогресса, ярлык в библиотеку
упражнений. Тёмная тема, чисто, минимализм

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

Ключевая мысль: качество макета почти целиком определяется качеством описания. «Сделай красивый экран» даст пустой результат; «экран X с блоками A, B, C, тёмная тема, минимализм» — попадание. Работай на уровне смысла и деталей, а раскладку Stitch возьмёт на себя.

DESIGN.md — источник правды

Главное, что стоит понять про Stitch: он всегда создаёт файл DESIGN.md. Это единый источник правды по проекту — в нём собраны цвета, типографика и общий вид каждого экрана. Модель держит его как контекст: когда ты добавляешь новый элемент или экран, она сверяется с DESIGN.md, чтобы новое не выбивалось из уже собранного стиля.

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

Итерации и правки

Макет — не финал, а черновик, который ты доводишь обычным языком. Работа идёт итеративно:

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

Плюс есть кнопка предпросмотра — она собирает Instant Prototype, кликабельный прототип, по которому можно пройтись. Оговорка честная: работают только переходы на уже сгенерированные экраны. Если экрана ещё нет — ссылка никуда не ведёт, это не поломка, а следствие того, что прототип кликается лишь по тому, что реально нарисовано.

Экспорт: код или Figma

Когда макет устраивает, у Stitch два выхода:

• Код фронтенда. Экспортируешь готовый front-end код — отправную точку, которую дальше доводишь (в том числе через агента в терминале).
• Paste to Figma. Переносишь макет в Figma для дальнейшей доработки — если хочешь допилить визуал руками или отдать дизайнеру.

То есть Stitch не запирает тебя в себе: черновик из него можно вытащить и в код, и в привычный дизайн-редактор.

Где предел — честно

Stitch легко переоценить и потом разочароваться, поэтому — прямо.

• Это отправная точка, а не финальный прод. На выходе — высококачественный черновик интерфейса, а не отлаженное приложение, которое можно катить в продакшн. Результат нужно доводить.
• Прототип кликается только по нарисованному. Instant Prototype проведёт по уже сгенерированным экранам; ждать от него живого приложения со всей логикой не стоит.
• Вкус и финал — на тебе. Разложить блоки и собрать систему Stitch умеет. Фирменный стиль и последние десять процентов доводки — по-прежнему работа человека или следующего инструмента.

Относись к Stitch как к быстрому способу увидеть идею и вытащить её в код или Figma — а не как к кнопке «сделай мне готовое приложение». Он закрывает старт и структуру; финал и продакшн — следующий этап.

FAQ

Stitch платный?

Нет. Он бесплатный и работает целиком в браузере — ничего устанавливать не надо. Это проект Google Labs на моделях Google Gemini.

Нужно ли уметь дизайнить?

Нет, в этом вся суть. Ты описываешь экран словами — тип, элементы, стиль — а раскладку берёт на себя Stitch. От тебя нужно понимание, что должно получиться, а не навык работы в редакторе.

Можно ли скормить свой скриншот или вайрфрейм?

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

Что делать с результатом дальше?

Два пути: экспортировать front-end код или перенести макет в Figma через «paste to Figma» для доработки. Код — отправная точка для агента, Figma — для ручной доводки визуала.

Итог

Google Stitch превращает текстовое описание в высококачественный макет прямо в браузере — бесплатно и без навыка дизайна. Он собирает дизайн-систему, фиксирует её в DESIGN.md и приводит к ней каждый новый экран, а на выходе отдаёт код или перенос в Figma. Пользуйся им как быстрым способом обкатать идею глазами и вытащить черновик дальше — не как генератором готового приложения. Финал, вкус и продакшн — следующий этап и на тебе.

А про то, как та же идея — дизайн словами — работает у Anthropic и стыкуется с кодом в терминале, читай гайд Claude Design — макет словами.