Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Пошаговый гид по созданию лендингов с помощью Google Stitch и MCP. От дизайна в AI до React-кода с точностью 100%.
🎯 О чём этот конспект: Руководство по связке нового дизайн-инструмента Google Stitch с AI-редактором Anti-gravity (или Claude Code) для создания высококонверсионных лендингов. Разбирается процесс «Design-First», где AI сначала проектирует UI-макет, а затем с идеальной точностью переносит его в React-код.
👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам и фаундерам, которые хотят создавать профессиональные интерфейсы без навыков дизайнера, используя мощь MCP-серверов.
✨ Что получите: Пошаговый алгоритм настройки рабочего пространства, промпты для глубокого аудита UI и методику генерации точных React-компонентов на основе визуальных макетов.
Контекст: Традиционный подход «сразу в код» часто приводит к плохим интерфейсам, так как AI-модели (Claude/GPT) не видят финальную картинку целиком. Автор предлагает использовать Google Stitch как промежуточное звено. Сначала AI-агент через MCP-сервер создает визуальный макет в Stitch, вы его утверждаете, и только после этого агент переводит визуал в код. Это гарантирует, что финальный продукт будет выглядеть именно так, как было задумано, с соблюдением всех отступов, шрифтов и цветов.
Выгода: 100% соответствие кода дизайну и возможность увидеть результат до написания первой строчки кода.
Как применить:
Промпт для создания макета в Stitch:
Claude Code
StitchBased 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, который служит «источником истины» для кода.
Контекст: Чтобы Anti-gravity или Claude Code могли «общаться» со Stitch (создавать проекты, читать слои, экспортировать стили), необходимо установить MCP-сервер. Это превращает ваш редактор кода в полноценного дизайн-ассистента, который может вносить правки в макет в реальном времени.
Выгода: Автоматизация передачи дизайн-токенов (цвета, шрифты) напрямую в CSS/Tailwind переменные.
Как применить:
Команда для установки скиллов в терминале:
npx @google/stitch-skills install --allРезультат: Ваш AI-агент получает доступ к инструментам enhanced-prompt, react-component-translator и другим функциям Stitch.
Контекст: Большинство лендингов не конвертируют, потому что в них отсутствуют критические элементы (Trust signals, Social proof, Clear CTA). Автор использует скилл Landing Page Architect для анализа текущего сайта и выявления «дыр» в маркетинговой структуре.
Выгода: Получение экспертного фидбека по маркетингу и структуре страницы за секунды.
Как применить:
Промпт для аудита (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.Результат: Список конкретных разделов, которые нужно добавить или переделать для роста конверсии.
Контекст: Обычные промпты дают посредственный дизайн. Скилл enhanced-prompt берет вашу идею и превращает её в детализированную техническую спецификацию для 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 для создания визуального блока.
Контекст: После того как макет в Stitch готов и утвержден, его нужно превратить в код. Скилл react-component-translator анализирует визуальные слои в Stitch и подбирает соответствующие компоненты из библиотеки Shadcn UI (или аналогичной), сохраняя все стили.
Выгода: Чистый, модульный код, который выглядит один-в-один как макет.
Как применить:
react-component skill установлен локально.Промпт для кодинга:
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 файл с компонентом, интегрированным в ваш проект.
В: Работает ли это с 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