Как сделать дизайн сайта в Claude Code через Google Stitch в 2026

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

Почему сайты из Claude Code выглядят как «ИИ-поделка»?

Когда я в первый раз собирал главную страницу для звонилки Piratix, я открыл пустой проект и попросил Claude Code собрать посадочную страницу. Получил классику: slate-950 на фоне, indigo-500 в акценте, жирный Inter в заголовке, под ним три одинаковых блока с тенями. Тот же макет, что у первого v0, у первого Lovable, у первой генерации ChatGPT. Переписал промпт пять раз, добавил «премиально», «не как у всех», «современно» - страница всё равно выглядела как тема для WordPress из 2015-го.

Фиолетовый градиент тут не случайность. Создатель Tailwind Adam Wathan в августе 2025 публично извинился за то, что пять лет назад сделал все кнопки в Tailwind UI фиолетовыми:

Логика простая: без ограничений модель берёт статистическое среднее того, что видела. А видела она миллион одинаковых посадочных страниц на Bootstrap и Tailwind. Чтобы получить не-усреднённый результат, агенту нужно дать конкретику: какие цвета, какие шрифты, какие отступы, какие компоненты считать каноничными. Слово «красиво» для модели значит «медиана 2020 года». Прилагательными её не сдвинешь, нужны точные параметры.

Этот же разрыв я разбирал в гайде про готовые дизайн-системы через Refero - там ты берёшь чужой стиль (Apple, Linear, Stripe) и отдаёшь его агенту. Google Stitch заходит с обратной стороны: не одолжить чужой стиль, а сгенерировать свой - из твоего описания.

Что такое Google Stitch и чем он помогает?

Stitch - это эксперимент Google Labs, который показали на Google I/O в мае 2025. Ты пишешь в промпт-строке, каким хочешь видеть приложение (или загружаешь скриншот, набросок на доске, страницу конкурента), а Stitch генерирует экраны интерфейса на бесконечном полотне. Под капотом - Gemini 2.5 Pro и Flash, а с декабря 2025 подключили Gemini 3 для более аккуратных макетов.

Из полезного для нас:

• Vibe Design - описываешь ощущение словами («минималистично и премиально, как Stripe») и получаешь сразу несколько визуальных направлений на выбор.
• Референсы - грузишь картинку с Dribbble или Pinterest, Stitch сохраняет её раскладку и накладывает твои требования.
• Экспорт в трёх форматах: в Figma (с редактируемыми слоями), в чистый HTML/CSS, и через MCP - прямо в агента.

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

У самого Claude есть и встроенный дизайн-режим, я разбирал его в гайде про Claude Design. Stitch отличается тем, что отдаёт готовую систему во внешний файл, который агент читает при каждой сборке.

Работает ли Google Stitch из России?

Скажу честно, потому что это первый барьер, о который ты споткнёшься. Stitch раздаётся не на все страны: представитель Google на официальном форуме писал, что сервис доступен пользователям 18+ в 212 странах и список расширяют. В закрытых регионах при заходе видишь ровно одну надпись - «Sorry, Stitch is unavailable».

Три вещи, которые стоит держать в голове:

1. Нужен VPN на поддерживаемую страну (проще всего США), и держать его включённым всю сессию - не только при входе, но и пока агент через MCP ходит в Google. Простое переключение VPN туда-обратно иногда не помогает, нужен чистый выход.
2. Нужен Google-аккаунт - вход только через него.
3. Россия в первоисточнике (форум Google) прямо не названа, но по практике Google Labs гео-ограничение из России крайне вероятно. Проверь со своего адреса - если видишь «unavailable», включай VPN.

Если возиться с VPN не хочется, дизайн можно взять другим путём. Готовые DESIGN.md через Refero открываются из России нормально, а v0 от Vercel обычно доступен. Дальше шаги с Claude Code одинаковые - меняется только источник дизайна.

Как связать Google Stitch с Claude Code через MCP?

С подключением MCP в сети много мусора, и половина инструкций просто не работает. Например, куча гайдов (в том числе популярные англоязычные) советует поставить пакет @google/stitch-mcp командой npx -y @google/stitch-mcp@latest. Такого пакета не существует - npm отдаёт 404. Не копируй эту команду, потеряешь время.

Второй тупик - «официальный» удалённый MCP по адресу https://stitch.googleapis.com/mcp. Он работает в Antigravity и Cursor, но в Claude Code ломается: агент вместо того, чтобы просто показать ключ, лезет логиниться через Google по-сложному, а сервер этот способ не принимает. Ты получаешь ошибку Incompatible auth server и упираешься в стену. Это зарегистрированный баг Claude Code, закрытый со статусом «чинить не планируем».

Рабочий путь для Claude Code - локальный прокси от David East (он из команды Google DevRel). Прокси поднимается на твоей машине и обходит проблему с авторизацией.

Сначала создай ключ. В Stitch: клик по аватару → Stitch settings → раздел API key → Create key → скопируй.

Дальше добавь прокси в Claude Code одной командой:

claude mcp add stitch -- npx @_davideast/stitch-mcp proxy

Положи ключ в переменную окружения (самый простой способ - без возни с гугловской консолью и токенами, которые протухают):

export STITCH_API_KEY="твой-ключ-из-настроек-stitch"

Если предпочитаешь конфиг вручную, он выглядит так (в ~/.claude.json или .mcp.json в корне проекта):

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}

Перезапусти Claude Code и проверь, что связка встала:

claude mcp list

В списке должен появиться stitch. Если что-то не так, у прокси есть встроенная диагностика - npx @_davideast/stitch-mcp doctor --verbose покажет, где затык. Если ключ почему-то не подхватывается, авторизуйся через gcloud auth application-default login - прокси возьмёт вход через Google. Ещё одна частая грабля: файл .env в корне проекта иногда ломает прокси ошибкой про «invalid character» - на время настройки убери или переименуй его.

Связка Stitch и DESIGN.md - это контекст-инжиниринг в чистом виде: ты заранее кладёшь Claude в контекст точные токены, и он строит строго по ним, без «угадай, что я имел в виду». На практикуме за 3 эфира собираешь все три кита - ИИ-клон, Второй мозг и Контекст-инжиниринг. Именно эта связка превращает Claude из «помощника, который угадывает» в инструмент, который делает предсказуемо.

Практикум по вайб-кодингу

+Твой второй мозг

3 вечера - стек, метод, первый проект

Старт 14–16 июля  ·  2 000 ₽

Записаться →

Что такое DESIGN.md и почему это лучше скриншота?

Ключевая деталь, которую путают в большинстве инструкций: кнопки «Экспорт DESIGN.md» в Stitch нет. Файл собирает сам агент. По официальному кодлабу Google промпт звучит примерно так: «сходи через Stitch MCP в проект, вытащи палитру и типографику, собери из этого DESIGN.md». Агент лезет в твой проект Stitch, читает дизайн и раскладывает его в структурированный файл в корне проекта.

Внутри DESIGN.md - конкретика вместо прилагательных:

# DESIGN.md
## Цвета
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Фон / поверхности: ...
## Типографика
- Шрифт (основной): "Instrument Sans"; (заголовки): "Instrument Serif"
- Шкала: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Веса: 400 / 500 / 700
## Spacing (база 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Макет
- Контейнер max-width: 1200px; брейкпоинты: 640 / 768 / 1024 / 1280
## Компоненты
- Кнопка: радиус 10px; варианты primary / secondary / ghost; состояния hover / active / disabled
- Карточка: радиус 16px; тень 0 4px 24px rgba(0,0,0,.08)

Чтобы Claude Code его использовал, сошлись на файл из CLAUDE.md (например, строкой «дизайн всех компонентов бери из DESIGN.md») - и агент тянет одни токены в каждой сессии. Кнопка из понедельника и карточка из пятницы выходят в одном стиле, потому что источник правды один.

В связке работают два канала контекста. DESIGN.md держит системные правила - цвет, типографику, отступы, компоненты. Stitch MCP отдаёт конкретные экраны - агент подтягивает раскладку экрана и повторяет её в коде.

Как собрать сайт: полный путь от текста до дизайна?

Собираю всё в один сквозной порядок:

1. Открой Stitch. VPN на США, зайди на stitch.withgoogle.com под Google-аккаунтом.
2. Опиши продукт. В промпт-строке напиши, что за приложение и какие экраны нужны. Если описать сразу весь путь пользователя, Stitch сначала покажет список экранов, которые собирается сгенерировать, - подтверди или поправь.
3. Добавь референс. Кликни иконку загрузки картинки, залей скриншот с Dribbble или страницу, которая тебе нравится. Через Vibe Design задай ощущение («премиально, спокойно, как Linear»).
4. Сгенерируй и причеши. Stitch выдаст экраны на полотне. Выбери близкий, кликни для уточнения. Чтобы применить одно изменение цвета или шрифта сразу на всех экранах - выдели их с Shift и правь разом.
5. Создай API-ключ. Аватар → Stitch settings → API key → Create key.
6. Подключи MCP в Claude Code - команда claude mcp add stitch -- npx @_davideast/stitch-mcp proxy и API-ключ из настроек Stitch (полный разбор в разделе про MCP).
7. Собери сайт. В Claude Code дай два промпта по очереди:

Через Stitch MCP открой проект «LaunchPad». Вытащи палитру и типографику, собери файл DESIGN.md в корне проекта.

Теперь построй сайт по DESIGN.md. Используй React и Tailwind CSS, компоненты сделай модульными, дизайн бери строго из DESIGN.md и с экранов Stitch.

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

Как убрать «ИИ-шный вид»: что конкретно менять?

Конкретные точки, где сайт перестаёт выдавать себя:

• Цвет. Фиолетовый indigo-500 - первый маркер. Задай основной и акцентный цвет точным hex прямо в DESIGN.md. «Фирменный синий» словами каждый агент поймёт по-своему.
• Шрифт. Inter - самый безопасный и потому самый узнаваемый «ИИ-шрифт». Возьми выразительную пару: например, гротеск для текста и что-то с характером для заголовков. В Stitch это задаётся в дизайне, в DESIGN.md фиксируется.
• Референс вместо прилагательного. «Сделай современно» модель понимает как «медиана 2020 года». «Сделай раскладку как на этой странице» с реальным скриншотом - понимает буквально. Грузи в Stitch картинку-референс, словами вкус не передашь.
• Отступы и воздух. Шаблонный макет узнаётся по тесным одинаковым блокам. Задай в DESIGN.md щедрую шкалу отступов - агент разложит элементы свободнее.

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

Google Stitch или альтернативы: что выбрать?

Сравнил инструменты по осям, которые реально решают, когда вайб-кодишь без бюджета:

Связка, которую я держу сам: Stitch для поиска дизайна → Claude Code для сборки и логики. Для вайб-кодера без бюджета Stitch выигрывает бесплатностью и тем, что рисует свой облик с нуля под твой продукт. Если хочешь понять весь набор инструментов на рынке, я разбирал его в пилларе чем кодить в 2026.

Где Google Stitch ломается: ограничения?

Честный список, чтобы ты не разочаровался на третьем экране:

• Только интерфейс. Ни бэкенда, ни базы, ни публикации на хостинг. Для этого нужен Claude Code (или Lovable, если хочешь всё в одном).
• Слабое редактирование внутри. Отдельный элемент не подвинешь мышкой - только промптом и перегенерацией. Это не Figma.
• Недетерминизм. Тот же промпт даёт разные результаты. Хорошо для поиска идей, неудобно, когда нужен повторяемый вывод.
• Квота. Упрёшься в лимит бесплатных генераций (сейчас он дневной) - докупить нельзя, ждёшь обновления. Точная цифра плавает, смотри прямо в интерфейсе.
• Экспериментальный статус. Google Labs без обязательств поддерживать долго. Могут поменять или закрыть.
• Гео-ограничение и нюанс с авторизацией MCP в Claude Code, о которых сказал в разделах про доступ и подключение.

Когда лучше не Stitch: если у тебя строгий бренд-гайд на много проектов, если дизайн уже в Figma, или если нужно сразу опубликованное приложение с бэкендом.

Что дальше?

Собери минимальную связку на одном экране: опиши продукт в Stitch, сгенерируй главную, попроси Claude Code собрать DESIGN.md и построить по нему страницу. Когда увидишь, что фиолетовый градиент ушёл сам собой, дальше пойдёт легче.

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

Собрать продукт, который выглядит и работает как настоящий, - это практикум: 3 эфира, ИИ-клон, Второй мозг и контекст-инжиниринг. Дизайн через Stitch - только первый кирпич.

Практикум по вайб-кодингу

+Твой второй мозг

3 вечера - стек, метод, первый проект

Старт 14–16 июля  ·  2 000 ₽

Записаться →

Новые материалы - дайджестом, без спама

Гайды выходят регулярно. Подпишись, чтобы не пропускать: пришлю подборку в Telegram или на email. Раз в неделю или каждый день - выбираешь сам.

Подписаться в Telegramили на email