МАТЕРИАЛЫ К УРОКУ

Stitch + Claude Code - сайты за 10 минут

Связываем ИИ-дизайнер от Google с Claude Code через MCP и штампуем красивые сайты текстом

Смотреть видео на YouTube
📋 Что ты научишься делать
🎨

Генерировать идеи и дизайн-стратегии в Stitch с помощью Gemini 3.1 Pro

🖼️

Создавать визуальные концепты через NanoBanana 2 и Redesign

🔗

Подключать Stitch к Claude Code через MCP в AntiGravity

📐

Извлекать design.md и штамповать страницы в едином стиле

🚀

Деплоить готовый сайт на GitHub + Vercel прямо из чата

🛠️ Что понадобится
ИИ-дизайнер от Google
15 редизайнов/день
🚀
IDE с встроенным Claude Code
бесплатно
🐙
Хранение кода + деплой
бесплатно
Хостинг и деплой
бесплатно
🔑
Настройки Stitch
нужен для MCP
🔑
Настройки Vercel
нужен для деплоя
📌 Пошаговая инструкция
01
Генерация идей в Stitch
Открой Stitch и выбери функцию "Ideation". Stitch уходит думать и возвращается с тремя полноценными дизайн-стратегиями - типографика, интерактивные элементы, спецификации.
Нажми "Ideation" (Генерация идеи)
Введи промпт и нажми Generate
💬 Промпт 1 - Генерация идей
Я запускаю свой продукт. Проведи исследование рынка. Найди три крутых компании и предложи мне три дизайна для страницы тарифы.
02
Выбор стратегий и генерация визуалов
Stitch покажет три дизайн-стратегии с архитектурой и спецификацией. Выбери понравившиеся и попроси сгенерировать визуалы. Подожди пару минут - он отрисует три варианта.
Просмотри три стратегии
Напиши "Мне нравятся все три"
Скажи "Давай, делай визуал, все круто"
Дождись генерации (1-2 минуты)
💬 Промпт 2 - Утверждение
Мне нравятся все три. Давай, делай визуал, все круто.
03
Динамическое редактирование
Получив визуалы, редактируй их прямо на холсте - меняй текст, добавляй элементы, давай задачи по отдельным блокам. Можно запускать несколько задач одновременно.
Нажми E на элементе - меняй текст прямо в интерфейсе
Выдели блок через "Аннотацию" - дай задачу текстом
Запускай несколько правок параллельно
💬 Пример - Добавление элемента
Добавь иконку ракетки
💬 Пример - Изменение стиля
Сделай кнопку больше с эффектом фиолетовой тени
Кнопка "Прототип" - запускает живой прототип, который можно листать и проверять как на телефоне
Кнопка "Predictive Heatmap" - показывает, куда будет ложиться глаз пользователя
04
Генерация полного сайта через NanoBanana 2
Выбери понравившийся стиль и попроси Stitch сгенерировать весь сайт. Переключись на Gemini 3.1 Pro. NanoBanana 2 генерирует визуальный концепт-арт (картинку), а не код - по этой картинке потом Claude Code напишет чистый код.
Выбери стиль-фаворит
Переключи модель на Gemini 3.1 Pro
Введи промпт
💬 Промпт 3 - Генерация сайта
Сгенерируй весь основной сайт в таком стиле
⚙️ Модель: Gemini 3.1 Pro (NanoBanana 2 встроена именно в неё)
05
Редизайн по референсу (NanoBanana 2)
Нашёл красивый сайт? Можно взять его стиль и переосмыслить через Stitch. Нажми "Redesign", вставь URL или скриншот сайта-референса.
Найди красивый сайт-референс (Dribbble, Awwwards и т.д.)
Нажми кнопку "Redesign" в Stitch
Вставь URL или скриншот
Введи промпт
Переключи результат на десктоп или мобильную версию
💬 Промпт 4 - Редизайн
Я хочу, чтобы ты сделал полный редизайн моего сайта на основе этого стиля. Сохрани этот красивый хеддер, добавь блог с отзывами, логотип партнеров, секцию FAQ и в самом низу сделай интерфейс чата и призыв к действию
NanoBanana 2 генерирует концепт-арт (картинку), не код. Это визуальный образ, который передает настроение будущего продукта.
06
Подключение Stitch MCP в AntiGravity
Связываем Stitch с Claude Code, чтобы он мог читать наши дизайны и превращать их в код.
Способ 1 (AntiGravity): Меню → MCP сервера → напиши "Stitch" → Install
Перейди на stitch.withgoogle.com/settings → скопируй API ключ
Вставь ключ в AntiGravity
Проверь: Manage MCP Server → обнови → должно появиться 8 функций
Способ 2 (Claude Code напрямую): Extensions → Claude Code → открой меню
⌨️ Команда MCP
claude mcp add --transport http stitch https://mcp.stitch.withgoogle.com/mcp
⚙️ Google даёт 15 бесплатных редизайнов в день
07
Установка навыков (Skills) из GitHub
Подтягиваем расширенные возможности для Stitch MCP из официального репозитория Google.
Скопируй ссылку на репозиторий
Вернись в AntiGravity
💬 Промпт 5 - Установка навыков
Добавь эти навыки в мою конфигурацию: https://github.com/google-labs-code/stitch-skills
08
Подключение GitHub MCP
Нужен для публикации кода и деплоя. Подключается через токен.
В AntiGravity: три точки → GitHub → Install
GitHub → Settings → Developer settings → Personal access tokens → Token classic
Нажми Generate new token (classic)
Поставь все галочки → Generate → скопируй токен
Вставь токен в AntiGravity
Manage MCP Server → обнови → должно появиться 26 функций
09
Проверка связи Stitch + Claude Code
Проверяем, что Claude видит наши дизайны из Stitch.
💬 Промпт 6 - Проверка
Какой последний дизайн я создал в Stitch?
Если Claude правильно назовёт ваш последний проект (название, стиль, цвета) - система полностью синхронизирована.
10
Создание design.md
Design.md - это системный чертёж дизайна. По нему Claude Code будет генерировать все новые страницы в едином фирменном стиле: цвета, шрифты, отступы, компоненты.
Доведи свой лендинг в Stitch до идеала (правки, аннотации, комментарии)
Перейди в Claude Code / AntiGravity
Прикрепи название проекта и скриншот
💬 Промпт 7 - Создание design.md
Создай для меня файл design.md на основе этого проекта в Stitch
Claude через MCP стучится в Stitch, находит экраны и вытягивает всю внутрянку - HTML структуру, параметры дизайна, цвета, отступы.
11
Генерация новых страниц по design.md
Теперь можно штамповать страницы в едином стиле. Claude сам обращается к Stitch через MCP, генерирует визуал и превращает его в код.
Переключись на модель Gemini 3.1 Pro
Введи промпт с описанием новой страницы
💬 Промпт 8 - Новая страница + смена стиля
Перегенерируй все изображения на этом сайте в стиле студии Гибли. Добавь на страницу раздел с тарифными планами и покажи, как все это будет выглядеть. Включай режим планирования и выложи на локальный сервер.
💬 Промпт 9 - Новый проект в том же стиле
Сделай новый проект для SaaS компании, которая продает VPN подписки
Agent Manager в AntiGravity позволяет вести десятки чатов одновременно и управлять несколькими проектами параллельно.
12
Деплой на GitHub + Vercel
Публикуем сайт в интернет прямо из чата. GitHub MCP уже подключён, осталось добавить Vercel.
Добавь Vercel MCP - вставь конфиг ниже в чат AntiGravity
Получи Vercel токен: vercel.com/account/settings/tokens
Замени ВСТАВЬ_СЮДА_СВОЙ_ТОКЕН на свой токен
Дай команду на деплой
⌨️ Конфиг Vercel MCP
"vercel": { "command": "npx", "args": ["-y", "vercel-mcp", "VERCEL_API_KEY=ВСТАВЬ_СЮДА_СВОЙ_ТОКЕН"], "env": {}, "disabled": false }
💬 Промпт 10 - Деплой
Опубликуй это на GitHub и Vercel
Пошаговый план по выходу
на первые 100к в ИИ в 2026
ЗАБРАТЬ