Google Stitch + Claude Code – профессиональный дизайн без дизайнера
Как за час превратить типичное AI-приложение в продукт с профессиональным дизайном. Stitch генерирует design system, Claude Code применяет его через MCP.
Проблема: AI-приложения выглядят одинаково
Вы написали приложение с помощью AI. Логика работает, фичи на месте. Но UI выглядит как у всех остальных – дефолтный Tailwind, стандартные отступы, никакой индивидуальности.
Раньше решение было одно – нанять дизайнера. 3000–10000 долларов, несколько недель на Figma-макеты, потом ещё время на вёрстку. К моменту когда дизайн оживает в коде, вы уже потеряли темп и сожгли бюджет.
Теперь есть другой путь. Google Stitch 2.0 генерирует полную дизайн-систему, а Claude Code применяет её ко всему проекту через MCP-подключение. Один человек, один час, профессиональный результат.
Пошаговый workflow
Шаг 1: подготовка материалов
Сделайте скриншоты главных экранов вашего приложения. Если переделываете существующий проект – хватит 3–5 скриншотов ключевых страниц. Если начинаете с нуля – найдите 2–3 референса на Dribbble или 21st.dev.
Не ищите что-то для копирования. Ищите направление – dark mode, минимализм, editorial-стиль, whatever подходит вашему продукту.
Шаг 2: генерация дизайна в Stitch
Загрузите скриншоты на canvas Stitch. Напишите один промпт:
Stitch выдаст несколько вариантов. Не берите первый попавшийся – просмотрите все и соберите лучшее: типографику из одного, layout из другого, цветовую энергию из третьего. Вы курируете, а не просто принимаете.
Stitch поддерживает голосовой ввод – можете надиктовать промпт вместо набора. Мелочь, но ускоряет процесс.
Redesign this SaaS dashboard app. Dark mode, minimal, editorial feel. Use serif font for headings (like Playfair Display), clean sans-serif for body (Inter or similar). Focus on readability and visual hierarchy. Generate desktop and mobile variants.
Шаг 3: экспорт design.md
Откройте правую панель в Stitch → Design Systems. Stitch уже создал систему на основе всего, что вы нарисовали.
Нажмите на неё – увидите типографику, цвета, компоненты, правила. Всё задокументировано и организовано.
Нажмите `design.md`. Скопируйте весь файл. Создайте `design.md` в корне вашего проекта. Вставьте, сохраните.
Этот файл – единый источник правды для всего дизайна вашего проекта.
Без design.md каждый промпт в Claude Code – это новый контекст. Цвета уплывают, шрифты меняются, отступы становятся непредсказуемыми. С design.md – Claude Code ссылается на этот файл при каждом изменении. Консистентность решена одним markdown-файлом.
Шаг 4: подключение Stitch MCP к Claude Code
MCP-подключение даёт Claude Code прямой доступ к HTML и CSS из ваших Stitch-фреймов. Не описание дизайна, а реальный исходный код.
Настройка:
1. Откройте документацию Google Stitch → раздел MCP setup
2. Скопируйте команду установки для вашей платформы
3. В Stitch Settings → API → создайте API-ключ
4. Вставьте команду + API-ключ в терминал Claude Code
5. Начните новую сессию – Stitch отобразится как подключённый MCP
После подключения Claude Code может напрямую читать layout и стили из ваших Stitch-фреймов:
Claude Code найдёт ваш Stitch-проект, загрузит нужный фрейм, перестроит UI. Процесс занимает минуты.
Stitch иногда добавляет фичи, которых нет в вашем приложении – панель уведомлений, блок активности. Прямо скажите Claude Code, какие фичи уже реализованы в проекте, а какие – нет. Иначе потратите время на удаление лишнего.
Update the dashboard screen to match the layout of the desktop frame in Google Stitch using the Stitch MCP. Reference design.md for typography and color tokens. Keep all existing functionality intact.
Честные ограничения
Шрифты иногда требуют ручной подгонки после того, как Claude Code применит дизайн из Stitch. Цвета не всегда переносятся в точном оттенке. MCP читает HTML/CSS – если Stitch сгенерирует что-то особенно сложное, Claude может интерпретировать немного иначе.
Длинные сессии съедают больше токенов. Держите промпты фокусированными – один экран за раз, конкретные инструкции.
Но принципиальный сдвиг это не меняет. То, что стоило тысячи долларов и недели ожидания, теперь делает один человек за вечер. Workflow не идеален. Он просто радикально лучше всего, что было раньше.
Итого: ваш чеклист
1. Соберите скриншоты или референсы (3–5 штук)
2. Загрузите в Stitch, напишите промпт с направлением дизайна
3. Просмотрите варианты, скомбинируйте лучшее
4. Экспортируйте `design.md` в корень проекта
5. Подключите Stitch MCP к Claude Code
6. Применяйте дизайн поэкранно через Claude Code
7. Подключите auth, платежи, email – всё в одной сессии
8. Деплой через Vercel
:::cta
Вступить в Edge Lab
:::