Claude Code пишет логику, но дизайн выдаёт AI-поделку с головой. Google Stitch это меняет 🎨
Что это и кому
Клод отлично гонит функционал, но экраны выходят «сгенерёнными»: случайные отступы, рандомные цвета, ноль единой системы — потому что модель дизайн угадывает, а не следует ему. Google Stitch — экспериментальный инструмент Google Labs на Gemini 2.5: по тексту и референсам (Pinterest/Dribbble/скрин) он собирает целую UI-систему — экраны, палитру, типографику, лейауты, компоненты — и отдаёт её в код и через MCP прямо в твоего агента.
Кому: вайб-кодерам и продактам, у кого логику пишет Клод, а дизайн проседает. Выделяется тем, что это не «текст → мокап», а мост дизайн→агент: Клод строит ПО дизайну, а не наугад.
Ключевые возможности
- Генерация UI по промпту + референсам: экраны, компоненты, единая дизайн-система.
- Два режима генерации: быстрый (Gemini 2.5 Flash) и Pro-режим (Gemini 2.5 Pro) для более качественных вариантов.
- Правки дизайна словами прямо на канвасе, несколько вариантов одного экрана.
- Экспорт в Figma и в чистый HTML/CSS-код.
- Официальный Stitch MCP: мост дизайн ↔ Claude Code / Cursor / Gemini CLI — агент сам тянет дизайн из проекта, без копипаста.
- Есть готовые Agent Skills под MCP (репозиторий google-labs-code/stitch-skills — от команды Google Labs, но с пометкой «не официальный продукт Google»): от генерации дизайна до ревью и конвертации под фреймворк.
Как начать за 5 минут
- Открой stitch.withgoogle.com, войди в Google-аккаунт, опиши экран словами и добавь референс.
- Догони дизайн правками на канвасе; когда нравится — жми экспорт (Figma / HTML-CSS).
- Подключи Stitch MCP к Claude Code по офиц. инструкции (docs/mcp) — пропиши MCP-сервер в конфиг агента и скажи: «собери фронт по дизайну из Stitch-проекта».
Результат: приложение перестаёт выглядеть как AI-поделка.
Когда брать, а когда нет
✅ Бери, если Клод пишет код, но дизайн выглядит как AI-поделка — нужна цельная UI-система по референсам. ✅ Бери, если хочешь один мост дизайн→агент бесплатно, без ручного копипаста HTML/CSS. ❌ Не бери → лучше «v0», если нужен сразу рабочий React-компонент в проекте, а не дизайн-система с экспортом. ❌ Не бери → лучше «Figma Dev-Mode MCP», если макет уже собран в Figma и надо отдать его агенту точь-в-точь. ❌ Не бери → лучше «Framer», если цель — опубликовать готовый сайт-лендинг без кодинга.
Цена по-честному
Бесплатно, пока Stitch живёт в статусе эксперимента Google Labs — карта не нужна. Есть месячный лимит генераций (стандартные + отдельный пул на Pro-режим Gemini 2.5 Pro); при активной работе в него реально упереться. MCP-экспорт тоже бесплатный в рамках той же квоты. Важно: это Labs-продукт — платные планы, скорее всего, появятся позже (обзоры этого ждут, но официального прайса пока нет), а лимиты и условия могут меняться в любой момент. Точные квоты смотри в интерфейсе. Тег: free / mcp.
Подводные камни
- Статус эксперимента Google Labs: фичи, лимиты и сам доступ могут поменяться или отвалиться без предупреждения.
- Месячная квота генераций конечна — на длинных итерациях дизайна кончается быстро.
- Stitch даёт дизайн-систему и HTML/CSS, но это не готовый прод-фронт: адаптив и финальную сборку всё равно доводит Клод.
- MCP-мост требует настройки конфига агента. Официальная MCP-настройка задокументирована Google (docs/mcp/setup), но самый ходовой CLI — сторонний community-инструмент (davideast/stitch-mcp, явно не аффилирован с Google) — сверяй актуальную команду в офиц. docs.
- Данные уходят в облако Google — не кидай туда секретные/приватные макеты, если это критично.
- Красивый экран ≠ рабочая логика: связность, состояния и данные всё равно на тебе и на Клоде.
🤖 Промт-ускоритель
«Я собрал в Google Stitch дизайн-систему для <ТИП ПРИЛОЖЕНИЯ> (экраны: <СПИСОК>, стиль как <РЕФЕРЕНС>). Подключаю Stitch MCP к Claude Code. Возьми дизайн из Stitch-проекта <ID/ССЫЛКА> и построй фронт на <React+Tailwind/…> строго по нему: те же цвета, отступы, типографику и компоненты. Не выдумывай свой стиль — следуй дизайну; где данных не хватает, спроси. Собери <ЭКРАН> первым и покажи, что совпало с макетом.»