Google Stitch и Claude Code: подключение за 1 команду

Что такое Google Stitch и при чём тут Claude Code

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

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

Зачем звать Stitch, если Claude Code и так рисует интерфейсы

Claude Code и без Stitch умеет собрать сайт с нуля по одному описанию. Разница - в том, ЧТО он придумывает вместо тебя, когда деталей не хватает. Возьми только цвет: не сказал, какой синий - помощник возьмёт какой-то свой, обычно один из горстки популярных у всех нейросетей сразу. То же со шрифтом, отступами, формой кнопок. На одном экране это незаметно, на десятом экране сайта эти «свои» решения начинают спорить друг с другом: где-то отступ 24 пикселя, где-то 32, кнопки то острые, то скруглённые

Stitch решает не эту генерацию красивее, а эту РАЗНОБОЙ. Он строит не просто картинку, а дизайн-систему - таблицу точных значений (цвет кнопки, размер заголовка, радиус угла), и Claude Code потом читает эту таблицу вместо того, чтобы каждый раз придумывать заново. Идея та же, что у списка правил для написания кода, только для того, как сайт выглядит

У меня Stitch подключён к Claude Code не ради этой статьи - он уже стоит рабочим инструментом, и в аккаунте лежат два реальных проекта. Один - лендинг регистрации на мероприятие, с 02.06.2026, вторая - дизайн-система для контент-хаба theivansergeev.com, с 30.05.2026: заголовки одним шрифтом (Playfair Display), текст - другим (Inter), фон цвета старой бумаги, колонка чтения ровно 720 пикселей. Когда я прошу помощника собрать новую страницу гайдов, он читает эту же таблицу значений, а не рисует стиль заново

DESIGN.md: третий файл рядом с README и AGENTS

Если уже пользовался Claude Code, то видел файл AGENTS.md - список правил для помощника, как СОБИРАТЬ код в этом проекте. У Stitch есть его сосед - DESIGN.md, список правил, КАК ЭТОТ КОД ДОЛЖЕН ВЫГЛЯДЕТЬ. Сама Google в документации кладёт их рядом одной таблицей:

Внутри DESIGN.md два слоя. Верхний - точные цифры (какой именно синий, какой именно размер шрифта в пикселях), нижний - обычный текст, который объясняет ПОЧЕМУ выбраны именно эти цифры. Цифры дают помощнику точность, текст - смысл решения, чтобы он не подставил синий туда, где по логике нужен нейтральный серый

Получить такой файл можно тремя путями: попросить Stitch собрать его по описанию вайба одной фразой («тёплый уютный интернет-магазин кофе, закруглённые углы»), скормить ему ссылку на уже существующий сайт или картинку бренда - он вытащит палитру и шрифты сам, либо написать вручную (это обычный текстовый файл, без специального синтаксиса)

Шаг 0. Что должно быть готово заранее

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

Шаг 1. Собери личный ключ в настройках Stitch

Заходишь на stitch.withgoogle.com и открываешь свой профиль → пункт «Settings»

В официальной инструкции Google это описано четырьмя строками: раздел Settings, внутри него блок API key, кнопка «Create key», и следом совет скопировать полученный ключ в надёжное место

По этому же кадру видно, как выглядит панель настроек: тёмный фон, строка «API key», рядом розовая кнопка «Create key», а ниже - уже готовая строка ключа с датой создания, когда он существует

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

Хранить ключ открыто - не в общем доступе, не в переписке, не в публичном коде. Официальная страница отдельно предупреждает: если ключ случайно попал в открытый доступ, Stitch отключает его сам, ради твоей же защиты

Шаг 2. Подключи Stitch к Claude Code одной командой

В том же окне, где обычно пишешь Claude Code задачи обычными словами, есть строка ввода и для служебных команд - официальная инструкция Google для Claude Code даёт для этого случая ровно одну строку целиком:

Место «твой-ключ» меняется на строку из первого шага, а остальное переносится дословно. По той же инструкции, в ответ Claude Code коротко подтверждает, что сервер stitch подключён и доступен помощнику - обычно одна строка со словом вроде «added» или «connected»

С этой секунды Claude Code знает про Stitch как про ещё один инструмент под рукой, рядом с обычным чтением и правкой файлов, и спрашивать про него можно уже обычными словами, без повторного ввода команд

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

Шаг 3. Спроси у Claude Code свои проекты Stitch

Официальное руководство Google предлагает для первой проверки одну простую фразу: «покажи мои проекты Stitch, и экраны в каждом»

Помощник сам выбирает нужный инструмент подключения и присылает список - в моём собственном прогоне 01.09.2026 в ответ пришли оба реальных проекта аккаунта, с датой создания каждого и коротким перечнем экранов внутри. У пустого нового аккаунта список будет пустым, и это нормальный результат: значит подключение прошло, а рисовать экраны ещё не начинали

С этого момента не нужно держать сайт Stitch отдельной вкладкой, чтобы узнать, что там лежит - Claude Code сам сходит и посмотрит по просьбе

Дальше тем же способом можно попросить помощника сгенерировать новый экран по описанию, слегка изменить готовый или собрать несколько вариантов одного экрана сразу - под капотом это разные инструменты (генерация экрана из текста, правка выбранных экранов, сборка вариантов), но с твоей стороны всё выглядит одной и той же фразой на человеческом языке. Экран рисуется не мгновенно: сама Google предупреждает, что на один запрос может уйти пара минут, и повторно жать не нужно - лучше подождать и переспросить готово ли

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

Отдельный разбор этой части лежит в гайде ИИ для создания приложений в 2026 году

Flash или Pro: какая модель рисует экран

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

Если Claude Code не видит Stitch

Два типичных случая, оба разбираются без переустановки:

От экрана Stitch до рабочего кода

Готовый экран Stitch хранит не только картинку, но и код разметки (HTML с готовыми классами оформления). Попроси Claude Code скачать этот код для нужного экрана - и получишь обычный файл, с которым помощник и так умеет работать: переименовать, разбить на части, вставить в проект. Тот же файл можно занести и в другие сборщики сайтов на словах, не только в Claude Code - например Bolt.new или Lovable, если привычнее работать там

Дальше этот файл переводится в любую форму, в которой собран сам сайт: React, Vue или другую - для помощника это привычная задача перевода с одного формата разметки на другой, ровно то же самое, что он делает при обычной правке кода. Так же можно попросить перевести экран не в веб-формат, а в формат мобильного приложения. Что вообще получается на выходе из такой сборки и сколько это стоит целиком - разбор сайта одной строкой и как вообще сделать сайт с помощью ИИ

Есть и более короткий путь для React: Google выпустила отдельный готовый набор инструкций для Claude Code (официальный «skill», тот же принцип, что и у умений самого Claude Code - список готовых уже есть здесь), который сам разбирает экран Stitch на отдельные React-компоненты по одной фразе - без ручной сортировки файлов. Ставится он тоже одной строкой в Claude Code, командой из документации Google (ссылка в источниках), и дальше работает по фразе вида «переведи экран Х в React» - та же логика точного запроса, что разобрана в гайде по формулировке промптов. Для новичка это необязательный ускоритель: без него всё равно получится, просто на один шаг больше

Где Stitch экономит время, а где нет

Честная граница, а не реклама:

• Stitch рисует ТОЛЬКО внешний вид: базу данных, кнопку оплаты, форму с реальной проверкой полей всё равно достраивает код в Claude Code; сколько вообще стоит довести сайт до такого состояния без всей этой связки - отдельный разбор цен
• правка на холсте Stitch - это в основном перерисовка заново по новому описанию, а не точное перетаскивание пикселя, как в редакторах точной вёрстки
• один и тот же запрос может дать немного разный результат в разные разы - это особенность генеративного рисования, а не баг конкретно у Stitch
• Stitch - продукт Google Labs, то есть часть кнопок и лимитов ещё может измениться без предупреждения; сколько экранов можно нарисовать бесплатно в месяц, официальная документация точным числом не называет - актуальный остаток проще всего смотреть в собственных настройках аккаунта, а не запоминать чужую цифру из статьи
• прямого доступа с российского адреса у сайта Stitch нет, он открывается через тот же способ, что и доступ к Claude из России - подробно разобрано в отдельном гайде; на саму связку с Claude Code это не влияет, канал MCP работает независимо от того, откуда открыт браузер

Google Stitch, Claude Design и наш скилл: кто за что отвечает

Рядом стоят три вещи с похожими на слух названиями, а работают по-разному:

Если тариф Claude уже оплачен (как его оформить - здесь) и хочется остаться в одном приложении - раздобери Claude Design. Если работа и так идёт кодом внутри Claude Code и нужна не новая картинка, а согласованный стиль без разъезжающихся цветов - собери UI UX Pro Max. Если же подписка пока барьер, а принцип нужен тот же самый - есть бесплатный клон, Open Design. А Stitch - для случая из этой статьи: отдельный визуальный редактор Google, который сам заходит в Claude Code и приносит готовую дизайн-систему вместе с кодом экрана. Более широкий разговор про дизайн без штатного дизайнера - здесь и здесь

Источники

Все цитаты, шаги и цифры сняты с официальной документации Google 01.09.2026 живым браузером (обычная выгрузка страниц Stitch отдаёт пустой каркас - контент рисует клиентский код), кадры выше сделаны в тот же день

• Официальная стартовая страница документации Stitch (корневой раздел /docs): бейдж BETA у продукта и карта разделов (MCP, SDK, DESIGN.md, Agent Skills) - подтверждает вводную формулировку статьи про статус Google Labs - stitch.withgoogle.com, Docs Overview
• Официальная документация Stitch MCP, подключение и авторизация: два способа входа, шаги получения ключа, отдельная команда для Claude Code - stitch.withgoogle.com, MCP Setup & Authentication
• Официальное руководство по работе через MCP: практические примеры промптов, скачивание HTML и картинки экрана, официальный Agent Skill для перевода в React - stitch.withgoogle.com, MCP Guide
• Официальная страница про DESIGN.md: аналогия с README.md и AGENTS.md, два слоя файла, три способа его получить - stitch.withgoogle.com, What is DESIGN.md
• Официальные основы работы в Stitch: формула первого промпта, правка темы, сборка прототипа, скачивание кода - stitch.withgoogle.com, Everything you need to know
• Живой прогон инструментов Stitch MCP (список проектов, дизайн-система, попытка генерации экрана) выполнен 01.09.2026 в рамках подготовки этой статьи, в собственном рабочем аккаунте автора

Памятка: что нужно знать про Google Stitch

Семь строк, по которым проходит весь разбор

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