🎯 О чём этот конспект: Руководство по связке нового дизайн-инструмента Google Stitch с AI-редактором Anti-gravity (или Claude Code) для создания высококонверсионных лендингов. Разбирается процесс «Design-First», где AI сначала проектирует UI-макет, а затем с идеальной точностью переносит его в React-код.

👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам и фаундерам, которые хотят создавать профессиональные интерфейсы без навыков дизайнера, используя мощь MCP-серверов.

✨ Что получите: Пошаговый алгоритм настройки рабочего пространства, промпты для глубокого аудита UI и методику генерации точных React-компонентов на основе визуальных макетов.

1. Концепция Spec-Driven Development в дизайне

Контекст: Традиционный подход «сразу в код» часто приводит к плохим интерфейсам, так как AI-модели (Claude/GPT) не видят финальную картинку целиком. Автор предлагает использовать Google Stitch как промежуточное звено. Сначала AI-агент через MCP-сервер создает визуальный макет в Stitch, вы его утверждаете, и только после этого агент переводит визуал в код. Это гарантирует, что финальный продукт будет выглядеть именно так, как было задумано, с соблюдением всех отступов, шрифтов и цветов.

Выгода: 100% соответствие кода дизайну и возможность увидеть результат до написания первой строчки кода.

Как применить:

• Шаг 1: Подготовка референсов — Найдите вдохновение на Dribbble или Land-book.
• Шаг 2: Инициализация в Stitch — Вставьте URL существующего сайта или загрузите скриншот в Google Stitch.
• Шаг 3: Генерация вайрфрейма — Используйте Gemini 1.5 Flash внутри Stitch для создания структуры.

Промпт для создания макета в Stitch:

Based on this website/image, create a UI mockup for the entire landing page. 
Create one version for Desktop (horizontal) and one for Mobile (vertical). 
Layout all sections: Hero, Features, Testimonials, Pricing, and Footer.

Результат: Готовый визуальный макет в Canvas Google Stitch, который служит «источником истины» для кода.

2. Настройка связки через Stitch MCP Server

Контекст: Чтобы Anti-gravity или Claude Code могли «общаться» со Stitch (создавать проекты, читать слои, экспортировать стили), необходимо установить MCP-сервер. Это превращает ваш редактор кода в полноценного дизайн-ассистента, который может вносить правки в макет в реальном времени.

Выгода: Автоматизация передачи дизайн-токенов (цвета, шрифты) напрямую в CSS/Tailwind переменные.

Как применить:

• Шаг 1: Установка MCP в Anti-gravity — Откройте настройки MCP в редакторе, найдите "Stitch" и нажмите Install.
• Шаг 2: Получение API Key — Перейдите в настройки Google Stitch, создайте новый API Key и вставьте его в настройки MCP сервера в редакторе.
• Шаг 3: Установка Stitch Skills — Это набор специализированных инструкций для AI-агента.

Команда для установки скиллов в терминале:

npx @google/stitch-skills install --all

Результат: Ваш AI-агент получает доступ к инструментам enhanced-prompt, react-component-translator и другим функциям Stitch.

3. Глубокий аудит и улучшение конверсии (UI Evaluation)

Контекст: Большинство лендингов не конвертируют, потому что в них отсутствуют критические элементы (Trust signals, Social proof, Clear CTA). Автор использует скилл Landing Page Architect для анализа текущего сайта и выявления «дыр» в маркетинговой структуре.

Выгода: Получение экспертного фидбека по маркетингу и структуре страницы за секунды.

Как применить:

• Шаг 1: Запуск аудита — Используйте модель Gemini 1.5 Pro в Anti-gravity для анализа.
• Шаг 2: Уточнение терминов — Если AI использует непонятные термины (например, "Eyebrow copy"), используйте функцию комментариев для уточнения.

Промпт для аудита (Landing Page Architect):

Use the Landing Page Architecture skill. Analyze my current landing page at [URL] 
and identify gaps based on high-converting standards. 
Check: Hero section clarity, Trust signals, Social proof, and Transformation sections. 
Provide a detailed list of what's missing.

Результат: Список конкретных разделов, которые нужно добавить или переделать для роста конверсии.

4. Использование Enhanced Prompt для идеальной генерации

Контекст: Обычные промпты дают посредственный дизайн. Скилл enhanced-prompt берет вашу идею и превращает её в детализированную техническую спецификацию для Stitch, включая структуру слоев, дизайн-систему и правила композиции.

Выгода: Дизайн профессионального уровня без участия человека-дизайнера.

Как применить:

• Шаг 1: Выбор секции — Не делайте всё сразу. Сфокусируйтесь на одной секции (например, "Problem/Agitate").
• Шаг 2: Генерация промпта — Попросите агента создать расширенный промпт для Stitch.

Промпт для генерации спецификации:

Focusing on the 'Problem/Agitate' section from our evaluation. 
Use the enhanced-prompt skill to create a highly descriptive prompt for Google Stitch. 
Include design system requirements, card structures, and typography.

Результат: Сверхдетальный промпт, который автоматически отправляется в Stitch через MCP для создания визуального блока.

5. Перевод дизайна в React-компоненты (Shadcn UI)

Контекст: После того как макет в Stitch готов и утвержден, его нужно превратить в код. Скилл react-component-translator анализирует визуальные слои в Stitch и подбирает соответствующие компоненты из библиотеки Shadcn UI (или аналогичной), сохраняя все стили.

Выгода: Чистый, модульный код, который выглядит один-в-один как макет.

Как применить:

• Шаг 1: Установка скилла — Убедитесь, что react-component skill установлен локально.
• Шаг 2: Команда на имплементацию — Попросите агента прочитать проект в Stitch и создать файл.

Промпт для кодинга:

I approve the design in Stitch project [Project ID/Name]. 
Use the react-component skill to translate this design into a React component 
using Tailwind CSS and Shadcn UI. Ensure pixel-perfect accuracy 
and maintain the design tokens from Stitch.

Результат: Готовый .tsx файл с компонентом, интегрированным в ваш проект.

FAQ

В: Работает ли это с Cursor или Windsurf? О: Да, Google Stitch MCP сервер совместим с любым редактором, поддерживающим протокол MCP (Cursor, Windsurf, Claude Code, Anti-gravity).

В: Можно ли использовать свои шрифты и логотипы? О: Да. Благодаря MCP серверу, AI-агент может передавать ваши бренд-активы (лого, цвета) напрямую в Stitch, чтобы он использовал их при генерации макета.

В: Сколько стоит Google Stitch? О: На текущий момент инструмент находится в стадии активного развития и доступен бесплатно (может потребоваться доступ к Google Cloud/Gemini API).

В: Что делать, если AI выдает неточный код? О: Используйте скилл stitch-loop для итеративного улучшения. Вы даете фидбек («сделай отступы больше»), AI правит макет в Stitch, а затем обновляет код.

В: Можно ли создавать анимации? О: Да, в видео упоминается использование Remotion в связке со Stitch для создания программных видео-анимаций и сложных переходов прямо внутри лендинга.

Конспект создан на основе видео «Google Stitch + Anti-gravity: The Future of UI Design» канала Eric Hu. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=SK_sSNyJ758