🎯 О чём этот конспект: Пошаговое руководство по созданию веб-сайтов с помощью связки терминального агента Claude Code и дизайн-инструмента Google Stitch через новый CLI-интерфейс. В материале разобран сквозной воркфлоу: от интерактивной генерации брифа и автономной итерации макетов до адаптивной верстки и скроллителлинга с многоступенчатым AI-код-ревью.

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

✨ Что получите: Готовый воспроизводимый процесс создания сайтов с анимациями и скроллителлингом, понимание установки и работы скиллов (Skills) в Claude Code, а также систему автоматического контроля качества верстки и сторителлинга.

1. Преимущества Stitch CLI перед MCP и интеграция с AI-агентами

Контекст: Google Stitch — генеративный дизайн-инструмент на базе моделей Gemini и встроенной генерации изображений от Google, создающий макеты сайтов и мобильных приложений. Ранее для его использования приходилось либо вручную промптить веб-интерфейс и экспортировать код, либо настраивать сложную интеграцию через MCP (Model Context Protocol) с множеством шагов в Google Cloud. Релиз официального CLI-инструмента Stitch устранил необходимость сложной облачной конфигурации и оптимизировал расход токенов. В отличие от MCP, который постоянно удерживает инструменты в контекстном окне модели, CLI загружается агентом Claude Code строго по требованию.

Тайминг: ▶ 00:00, ▶ 01:00, ▶ 01:46

Выгода: Экономия контекстного окна LLM за счёт ленивой загрузки инструментов, исключение рутинного переноса макетов вручную и отказ от сложной настройки GCP.

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

• Шаг 1: Установка Stitch CLI — Терминал — Установите официальный пакет утилиты Stitch через пакетный менеджер вашей системы.
• Шаг 2: Авторизация в аккаунте Google — Терминал / Браузер — Выполните команду логина, которая откроет окно браузера для привязки Google-аккаунта.

# Установка и авторизация в Google Stitch CLI
stitch login

• Шаг 3: Проверка доступности — Терминал — Убедитесь, что CLI успешно отвечает и готов принимать команды от внешних агентов.

Результат: Stitch CLI настроен в системе и готов к вызовам из терминального агента без настройки Google Cloud Console.

2. Настройка окружения и установка специализированных Skills в Claude Code

Контекст: Сам по себе факт установки CLI не дает Claude Code понимания того, как и когда использовать Stitch. Чтобы агент научился работать с инструментом, в проект необходимо добавить специализированные навыки (Skills). Критический нюанс заключается в расположении файлов: Claude Code считывает доступные навыки только из директории .claude внутри проекта. Если установить скилл стандартной командой без явного указания целевой папки, агент не сможет автоматически подгружать инструкции во время промптинга. Для комплексного сайта параллельно устанавливается скилл скроллителлинга (scrollytelling), содержащий правила плавной анимации и повествования при прокрутке.

Тайминг: ▶ 01:46, ▶ 02:24, ▶ 02:53

Выгода: Агент автоматически применяет правила дизайна (шрифты, цвета через design.md) и библиотеки анимаций без необходимости вручную напоминать ему контекст в каждом запросе.

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

• Шаг 1: Добавление навыка Stitch в директорию .claude — Claude Code / Terminal — Установите Stitch Skill с явным указанием целевой папки .claude. Скилл включает гайды по дизайн-терминологии, синхронизацию с design.md и воркфлоу валидации.
• Шаг 2: Добавление навыка Scrollytelling — Claude Code / Terminal — Установите скилл анимаций прокрутки в ту же папку .claude, чтобы Claude закладывал логику интерактивного повествования еще на этапе генерации запросов к Stitch.

# Пример структуры размещения навыков в проекте
mkdir -p .claude/skills
# Убедитесь, что конфигурации скиллов stitch и scrollytelling скопированы в директорию .claude

Результат: В папке проекта .claude развернуты файлы навыков, готовые к автоматическому вызову агентом при генерации и верстке.

3. Интерактивная генерация дизайн-брифа (brief.md) через интервью

Контекст: Генерация макетов в Stitch страдает от проблемы рассинхронизации стиля: от экрана к экрану ИИ-модель может менять общую визуальную концепцию, цвета и типографику. Чтобы все экраны и блоки сайта выглядели целостно, Claude Code должен отправлять запросы в Stitch на базе единого структурированного документа. Для этого агент переводится в режим интервьюера: он задает серию уточняющих вопросов об идее, настроении, целях сайта и последовательности повествования, предлагая готовые варианты ответов. Финальный результат сохраняется в корень проекта в файл brief.md.

Тайминг: ▶ 02:57, ▶ 03:27, ▶ 03:60

Выгода: Исключение стилевого хаоса между итерациями дизайна; четкая структура сценария страницы до написания первой строчки кода.

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

• Шаг 1: Запуск режима интервью в Claude Code — Claude Code — Отправьте агенту вводный промпт с требованием расспрашивать вас до полного понимания концепции.

Я хочу создать новый сайт. Проведи со мной подробное интервью: задавай вопросы по одному (предлагая 2-4 варианта ответа на выбор), пока у тебя не останется белых пятен касательно концепции, целей, эмоционального тона и пошаговой структуры сторителлинга при скролле. По итогам интервью сформируй и сохрани файл brief.md.

• Шаг 2: Прохождение опроса — Claude Code — Ответьте на вопросы агента (целевая аудитория, логика блоков, ключевые метафоры).
• Шаг 3: Валидация файла brief.md — VS Code / Cursor — Проверьте структуру сгенерированного брифа (краткое резюме + пошаговый сценарий каждого блока).

Результат: Готовый файл brief.md, описывающий сквозной сценарий и визуальный язык проекта.

4. Автономный перебор и валидация дизайн-макетов в Stitch через Claude Code

Контекст: После подготовки брифа Claude Code берет на себя управление Stitch через CLI. Агент создает проект в Stitch, передает описание из brief.md, запрашивает генерацию нескольких вариантов и самостоятельно инспектирует полученные результаты на соответствие гайдлайнам. Если Claude обнаруживает дефекты или несоответствия, он автоматически отправляет уточняющие промпты в Stitch для исправления конкретных блоков. В процессе работы может создаваться множество промежуточных версий (в демонстрации автора — 8 итераций), пока макет не достигнет нужного качества.

Тайминг: ▶ 03:76, ▶ 04:03, ▶ 04:32

Выгода: Полная автоматизация рутинного промптинга дизайн-системы; получение набора готовых экранов с графикой, сгенерированной Imagen.

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

• Шаг 1: Запуск генерации дизайна через агент — Claude Code — Передайте агенту команду на вызов Stitch с опорой на созданный бриф.

Используя навык stitch-skill и файл brief.md, создай проект в Stitch и сгенерируй дизайн-концепты страниц. Сделай несколько итераций, оценивая каждый результат и исправляя найденные недочеты, пока макет не будет полностью соответствовать брифу.

• Шаг 2: Инспекция вариантов в интерфейсе Stitch — Google Stitch Web UI — Откройте веб-панель Stitch, просмотрите сгенерированные статичные макеты для десктопа и мобильных устройств, выберите наиболее удачный базовый вариант.

Результат: Сгенерированный и выверенный комплексный UI-макет в Stitch с готовыми иллюстрациями и шрифтовыми парами.

5. Сборка фронтенда и визуальный аудит адаптивности (stitch-review skill)

Контекст: Новый CLI-инструмент Stitch умеет экспортировать готовый макет напрямую в Claude Code в виде структурированной веб-страницы, ассетов (шрифты, сгенерированные изображения) и скриншотов. Claude скачивает данные и собирает кодовую базу проекта. Однако макеты, сгенерированные Stitch, часто оптимизированы только под десктоп и ломаются на мобильных экранах. Для решения этой проблемы создается и применяется навык stitch-review, который запускает браузер, снимает скриншоты сайта в различных разрешениях (десктоп, планшет, смартфон) и сравнивает их с эталоном, формируя приоритизированный отчет об ошибках верстки.

Тайминг: ▶ 05:14, ▶ 05:38, ▶ 05:91, ▶ 06:21

Выгода: Гарантированная адаптивность интерфейса на всех типах устройств и устранение визуальных багов до этапа оживления интерфейса.

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

• Шаг 1: Сборка сайта из макетов Stitch — Claude Code — Попросите агента выгрузить ассеты и скомпилировать фронтенд.

Экспортируй утвержденный дизайн из Stitch через CLI в наш проект, включая все изображения и шрифты, и собери рабочую структуру сайта.

• Шаг 2: Создание и привязка навыка Stitch Review — Claude Code — Настройте команду ревью и укажите ссылку на проект в файле CLAUDE.md.
• Шаг 3: Запуск аудита верстки — Claude Code — Запустите автоматический кросс-девайс чек.

Запусти stitch-review для проверки текущего состояния сайта. Сделай скриншоты для mobile, tablet и desktop, сравни с эталоном Stitch и исправь все найденные баги адаптивности, начиная с самых критичных.

Результат: Полностью адаптивный статичный веб-сайт, точно повторяющий макеты Stitch на мониторах, планшетах и смартфонах.

6. Внедрение скроллителлинга и бескомпромиссная дизайн-критика (story-review skill)

Контекст: После стабилизации верстки запускается процесс добавления сложных интерактивных эффектов с помощью навыка scrollytelling: эффектов погружения (shake-эффекты, параллакс звездного неба, горизонтальный скролл таймлайнов, индикаторы глав). Однако языковые модели часто перегружают интерфейс лишними анимациями, создавая визуальный шум. Для устранения этой проблемы внедряется навык story-review. Он оценивает сайт по стандартам престижных дизайн-наград (Awwwards), проверяя ритм повествования, читаемость текстов и уместность каждого движения относительно сценария в brief.md.

Тайминг: ▶ 06:55, ▶ 07:23, ▶ 07:44, ▶ 07:87

Выгода: Получение премиального интерактивного сайта Awwwards-уровня без визуальной перегрузки и с сохранением плавной производительности на 60 FPS.

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

• Шаг 1: Генерация анимаций скролла — Claude Code — Примените скилл скроллителлинга к проекту.

Используя scrollytelling-skill, внедрить плавные анимации и интерактивные переходы при скролле согласно сценарию brief.md (параллакс фона, индикатор глав, горизонтальная прокрутка таймлайна).

• Шаг 2: Запуск глубокого дизайн-аудита — Claude Code — Вызовите проверку качества сторителлинга с жесткими критериями оценки.

Запусти story-review. Оцени наш сайт максимально строго по критериям лучших проектов Awwwards: проверь темп анимаций, смысловую нагрузку движений и читаемость текста относительно brief.md. Предоставь приоритизированный отчет и автоматически устрани избыточный визуальный шум.

• Шаг 3: Финальная полировка — Claude Code — Claude оптимизирует скорость движения частиц, сглаживает тайминги и стабилизирует анимации.

Результат: Высококлассный интерактивный веб-сайт с глубоким визуальным погружением и плавным скроллителлингом.

FAQ

В: Чем Google Stitch CLI принципиально лучше интеграции через MCP?

О: MCP-серверы требуют комплексной настройки в Google Cloud Console и постоянно висят в контекстном окне агента, расходуя токены на каждом шаге. Stitch CLI настраивается за одну команду stitch login и подгружается Claude Code только в момент непосредственного вызова дизайн-инструментов.

В: Почему навыки (Skills) обязательно нужно помещать в папку .claude?

О: Архитектура Claude Code ищет декларации навыков и системных инструкций по умолчанию именно внутри скрытой директории .claude текущего проекта. Если файлы скилла окажутся в другой папке, агент не увидит доступные команды и контекст дизайн-системы без явного ручного указания путей в промпте.

В: Зачем тратить время на brief.md, если можно сразу промптить Stitch?

О: Модели Stitch генерируют дизайн поэкранно и могут кардинально менять стиль, палитру и типографику от блока к блоку. Единый файл brief.md выступает в роли мастер-контекста, на который Claude Code опирается при каждой итерации, гарантируя стилевое единство всего проекта.

В: Умеет ли Google Stitch сразу генерировать CSS-анимации и скроллителлинг?

О: Нет, Google Stitch создает статичные макеты, векторную графику и растровые иллюстрации. Вся логика динамических трансформаций, горизонтального скролла и параллакса добавляется на следующем этапе самим Claude Code с использованием навыка scrollytelling.

В: Как работает проверка адаптивности в stitch-review?

О: Скилл поднимает локальный сервер сайта, программно снимает скриншоты вьюпортов под мобильные устройства (375px), планшеты (768px) и десктоп (1440px), после чего отправляет изображения мультимодальной модели Claude для поиска сломанной сетки, перекрытия текста и неверных отступов.

В: Что делать, если после добавления скроллителлинга сайт рябит и перегружен эффектами?

О: Для этого используется скилл story-review. В его системный промпт заложена роль строгого дизайн-критика уровня жюри Awwwards, который ранжирует анимации по смысловой полезности и удаляет избыточные эффекты (например, уменьшает плотность летящих частиц или замедляет параллакс).

Ресурсы и ссылки

• Google Stitch — Генеративный инструмент дизайна интерфейсов от Google на базе моделей Gemini и Imagen — упомянут в видео.
• Stitch CLI — Терминальная утилита для прямого взаимодействия AI-агентов с сервисом Stitch — упомянут в видео.
• Claude Code — Терминальный агент разработки от Anthropic с поддержкой расширения через Skills — упомянут в видео.
• Whisper Flow — Голосовой инструмент ввода промптов с автоочисткой слов-паразитов и исправлением названий функций — whisperflow.app (спонсор выпуска).
• AIABS Pro — Сообщество авторов видео с готовыми файлами навыков (stitch, scrollytelling, review) — упомянут в видео.
• Awwwards — Международная платформа оценки веб-дизайна, используемая как бенчмарк для story-review — упомянут в видео.

Конспект создан на основе видео «How to Design and Build Web Sites with Claude Code and Stitch» канала AI Labs. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=au2TI8sdq8E