# Google Stitch + Claude Code – профессиональный дизайн без дизайнера ## Проблема: AI-приложения выглядят одинаково Вы написали приложение с помощью AI. Логика работает, фичи на месте. Но UI выглядит как у всех остальных – дефолтный Tailwind, стандартные отступы, никакой индивидуальности. Раньше решение было одно – нанять дизайнера. 3000–10000 долларов, несколько недель на Figma-макеты, потом ещё время на вёрстку. К моменту когда дизайн оживает в коде, вы уже потеряли темп и сожгли бюджет. Теперь есть другой путь. Google Stitch 2.0 генерирует полную дизайн-систему, а Claude Code применяет её ко всему проекту через MCP-подключение. Один человек, один час, профессиональный результат. ## Что такое Stitch 2.0 и почему он работает Stitch – AI-canvas от Google для создания UI. Но в отличие от большинства AI-инструментов для дизайна, он решает главную проблему – консистентность. Типичный AI-генератор рисует красивый первый экран. Второй экран уже немного другой. Третий – совсем другой. Ваше приложение выглядит так, будто его делали десять разных людей. Stitch работает иначе. Вы скармливаете ему скриншоты вашего приложения или референсы с Dribbble – он генерирует несколько вариантов дизайна. Но главное происходит в фоне: Stitch строит полную дизайн-систему. Что он создаёт автоматически: - Шкала типографики – display, headline, label, title, body шрифты - Цветовая палитра – primary, secondary, tertiary с автоматическим подбором комплементарных оттенков - Цветовые шкалы для каждого оттенка - Правила компонентов и паттерны - Спецификации elevation и depth - Dos and don'ts для вашего дизайн-языка Всё это документируется автоматически в файл `design.md`. Обычный markdown, который можно открыть в любом редакторе. Этот файл – мост между Stitch и Claude Code. :::warning Stitch сначала генерирует изображения, а потом код. Он не ограничен возможностями HTML/CSS – может придумать что угодно визуально. Вы работаете от картинки к коду, а не наоборот. Поэтому результат выглядит профессиональнее, чем прямая генерация кода через промпт. ::: ## Пошаговый workflow ### Шаг 1: подготовка материалов Сделайте скриншоты главных экранов вашего приложения. Если переделываете существующий проект – хватит 3–5 скриншотов ключевых страниц. Если начинаете с нуля – найдите 2–3 референса на Dribbble или 21st.dev. Не ищите что-то для копирования. Ищите направление – dark mode, минимализм, editorial-стиль, whatever подходит вашему продукту. ### Шаг 2: генерация дизайна в Stitch Загрузите скриншоты на canvas Stitch. Напишите один промпт: :::prompt title: Промпт для Stitch label: Prompt copy: true 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. ::: Stitch выдаст несколько вариантов. Не берите первый попавшийся – просмотрите все и соберите лучшее: типографику из одного, layout из другого, цветовую энергию из третьего. Вы курируете, а не просто принимаете. Stitch поддерживает голосовой ввод – можете надиктовать промпт вместо набора. Мелочь, но ускоряет процесс. ### Шаг 3: экспорт design.md Откройте правую панель в Stitch → Design Systems. Stitch уже создал систему на основе всего, что вы нарисовали. Нажмите на неё – увидите типографику, цвета, компоненты, правила. Всё задокументировано и организовано. Нажмите `design.md`. Скопируйте весь файл. Создайте `design.md` в корне вашего проекта. Вставьте, сохраните. Этот файл – единый источник правды для всего дизайна вашего проекта. :::warning Без 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-фреймов: :::prompt title: Промпт для Claude Code с MCP label: Prompt copy: true 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-проект, загрузит нужный фрейм, перестроит UI. Процесс занимает минуты. :::warning Stitch иногда добавляет фичи, которых нет в вашем приложении – панель уведомлений, блок активности. Прямо скажите Claude Code, какие фичи уже реализованы в проекте, а какие – нет. Иначе потратите время на удаление лишнего. ::: ## Полный стек: от дизайна до деплоя После дизайна Claude Code закрывает весь остаток – в той же сессии. **Аутентификация – Supabase.** Claude Code проведёт через весь процесс: генерация токена, настройка аккаунтов, login-flow, row-level security. Сессии сохраняются при обновлении страницы. **Платежи – Stripe.** Создайте продукт в Stripe Dashboard. Дайте Claude Code public и secret ключи. Он найдёт product ID, построит checkout, свяжет с системой пользователей. :::warning Всегда тестируйте в sandbox Stripe. Тестовая карта: `4242 4242 4242 4242`. Только после проверки переключайте на live. ::: **Email – Resend.** Password reset, welcome-письма, уведомления. Claude Code строит edge functions и подключает к auth flow. **Деплой – Vercel.** Push в GitHub, деплой в один клик. Каждое следующее изменение через Claude Code автоматически отражается на live-сайте. Claude Code действует как коуч – не нужно разбираться в webhook-системе Stripe или security model Supabase. Вы говорите что хотите, он спрашивает конкретные credentials. ## Честные ограничения Шрифты иногда требуют ручной подгонки после того, как 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 https://edgelab.su :::