Google Stitch и Claude Code: дизайн сайта без шаблонного вида

Дополнительные инструкции по работе с Ailoot собраны в документации.

Почему сайты, созданные Claude Code, выглядят шаблонно?#

В одном описанном примере работу над главной страницей приложения для звонков начали с чистого проекта и просьбы сделать посадочную страницу. В результате появились фон slate-950, акцент indigo-500, жирный заголовок Inter и три похожих блока с тенями. Макет напоминал результаты первых генераций популярных инструментов и типовую тему для WordPress. Пять вариантов промпта с пожеланиями «премиально», «не как у всех» и «современно» заметно не изменили впечатление.

Фиолетовые акценты часто встречаются в интерфейсах. Причина может быть в том, что похожие решения широко представлены в наборах компонентов и примерах, на которых обучаются модели.

Без ясных ограничений модель склонна выбирать распространённые решения. Чтобы получить более индивидуальный результат, укажите конкретные цвета, шрифты, отступы и компоненты, на которые следует ориентироваться. Слово «красиво» не задаёт этих параметров: нужны измеримые требования.

Похожую задачу решают готовые дизайн-системы из руководства по Refero: можно взять визуальный стиль известного сайта и передать его агенту. Google Stitch предлагает другой подход — создать стиль по описанию продукта.

Что такое Google Stitch и чем он полезен?#

Stitch — эксперимент Google Labs, представленный на Google I/O в мае 2025 года. В запросе можно описать приложение или загрузить изображение: например, скриншот, эскиз или страницу для ориентира. Сервис создаёт варианты интерфейса на рабочем полотне. В описании продукта указаны модели Gemini 2.5 Pro и Flash; с декабря 2025 года также доступна Gemini 3 для создания макетов.

Основные возможности:

• Vibe Design — опишите желаемое настроение, например минималистичный и сдержанный стиль, и выберите одно из предложенных визуальных направлений.
• Изображения для ориентира — добавьте референс, чтобы Stitch учёл его композицию и ваши требования.
• Экспорт — доступен перенос в Figma с редактируемыми слоями, выгрузка HTML/CSS и передача через MCP агенту.

Stitch и библиотеки готовых стилей решают разные задачи. Refero содержит дизайн-системы реальных сайтов, из которых можно выбрать готовый стиль. Stitch создаёт систему для вашего продукта. Если нужен собственный визуальный облик, подойдёт Stitch; если требуется быстро взять за основу стиль существующего продукта — Refero. Эти инструменты можно использовать последовательно.

У Claude также есть встроенный режим дизайна; о нём рассказано в руководстве по Claude Design. Stitch отличается тем, что позволяет передать агенту отдельный файл с дизайн-правилами, к которому можно обращаться при каждой сборке.

Доступность Google Stitch#

Доступность Stitch зависит от региона. Перед началом работы проверьте, открывается ли сервис в вашей стране. В некоторых регионах может появиться сообщение «Sorry, Stitch is unavailable».

Для входа требуется аккаунт Google.

Если авторизация Stitch MCP останавливает работу в Claude Code#

В сети встречаются инструкции по MCP, которые могут оказаться неверными. В частности, команда npx -y @google/stitch-mcp@latest не устанавливает пакет: npm возвращает 404. Перед использованием проверяйте название пакета и актуальный способ подключения по официальным материалам.

В описанной попытке Claude Code получена Incompatible auth server. Это наблюдаемая ошибка, а не рабочий рецепт или доказательство отказа всех текущих конфигураций. Не продолжайте неопределённым шагом «подключить MCP». До проверки точной совместимой настройки используйте ручной экспорт HTML/CSS ниже.

Связка Stitch и DESIGN.md помогает заранее передать Claude Code точные параметры интерфейса. Агент получает конкретные правила для работы с цветами, шрифтами и компонентами вместо расплывчатого описания желаемого результата.

Что такое DESIGN.md и почему он полезнее скриншота?#

В Stitch нет отдельной кнопки экспорта DESIGN.md. Google Codelab предполагает работающий MCP для чтения проекта. В ручном пути Claude Code читает экспортированные HTML/CSS и создаёт файл в корне. Недостающие токены он должен перечислить, а не угадывать по картинке.

Пример содержимого DESIGN.md:

# DESIGN.md
## Цвета
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Фон / поверхности: ...
## Типографика
- Шрифт (основной): "Instrument Sans"; (заголовки): "Instrument Serif"
- Шкала: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Веса: 400 / 500 / 700
## Spacing (база 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Макет
- Контейнер max-width: 1200px; брейкпоинты: 640 / 768 / 1024 / 1280
## Компоненты
- Кнопка: радиус 10px; варианты primary / secondary / ghost; состояния hover / active / disabled
- Карточка: радиус 16px; тень 0 4px 24px rgba(0,0,0,.08)

Чтобы Claude Code учитывал этот файл, добавьте в CLAUDE.md ссылку на него и правило вроде «параметры всех компонентов бери из DESIGN.md». Тогда при новых запросах агент будет опираться на единый набор токенов, а не собирать стиль заново.

Работают два локальных источника. DESIGN.md задаёт цвета, типографику, интервалы и компоненты, а экспорт HTML/CSS и материалы Stitch — компоновку экрана. MCP необязателен и не является условием этого пути.

Как пройти путь от описания до сайта?#

Действуйте последовательно:

1. Откройте Stitch. Проверьте доступность и войдите на stitch.withgoogle.com своим Google-аккаунтом.
2. Опишите продукт. Укажите экраны и путь пользователя, проверьте предложенный список.
3. Добавьте референс. Загрузите нужный снимок и уточните сохраняемые цвета, типографику и компоновку.
4. Уточните один экран до расширения набора.
5. Экспортируйте HTML/CSS выбранного экрана вместе с материалами в папку референсов проекта. Откройте HTML локально и проверьте выбор: снимок не содержит точных CSS-значений.
6. Составьте DESIGN.md по экспорту. Попросите прочитать HTML/CSS, выписать настоящие цвета, шрифты, интервалы и компоненты, а пробелы указать для решения. Здесь не нужны API-ключ Stitch или авторизация MCP.
7. Соберите одну страницу и проверьте. Замените путь ниже настоящей папкой экспорта:

Прочитай экспорт HTML/CSS Stitch в refs/stitch-export/. Создай DESIGN.md
в корне по значениям этих файлов. Отметь недостающее вместо выдумывания.

Собери одну страницу по DESIGN.md и локальному экспорту Stitch.
Сохрани модульные компоненты. Сравни отрисованный результат с экспортом
на настольной и мобильной ширине. Отдельно проверь переходы и состояния.

После этого Claude Code может настроить переходы между экранами, адаптивность по брейкпоинтам из DESIGN.md, анимации и интерактивные элементы. Stitch создаёт статичные экраны и кликабельный прототип, но не реализует рабочую логику приложения и не публикует его на хостинге.

Как сделать интерфейс менее шаблонным?#

Проверьте несколько основных параметров:

• Цвет. Акцент indigo-500 может сделать страницу похожей на множество других. Укажите основной и акцентный цвета в hex в DESIGN.md. Формулировка «фирменный синий» допускает разные интерпретации.
• Шрифт. Inter широко распространён и часто воспринимается как нейтральный выбор. Попробуйте подобрать пару гарнитур: например, нейтральный шрифт для основного текста и более выразительный для заголовков. Задайте их в Stitch и зафиксируйте в DESIGN.md.
• Референс вместо общего пожелания. Слова «сделай современно» не задают конкретную композицию. Скриншот помогает показать расположение элементов и общий характер страницы. Загрузите его в Stitch как ориентир.
• Отступы и свободное пространство. Одинаковые плотные блоки создают впечатление готового шаблона. Определите шкалу отступов в DESIGN.md, чтобы агент располагал элементы последовательнее.

Конкретные параметры обычно помогают лучше, чем вкусовые прилагательные. Stitch позволяет преобразовать описание и референсы в набор значений, по которым агент сможет собирать интерфейс.

Google Stitch и другие инструменты: что выбрать?#

Сравнение по функциям, которые могут пригодиться при разработке с помощью ИИ:

Stitch можно использовать для подбора дизайна, а Claude Code — для реализации интерфейса и логики. Для обзора набора инструментов есть материал о выборе инструментов для разработки в 2026 году.

Ограничения Google Stitch#

Перед началом учитывайте следующие ограничения:

• Только интерфейс. Stitch не создаёт серверную часть, базу данных или публикацию на хостинге. Для этого потребуется Claude Code или другая платформа.
• Ограниченное редактирование. Нельзя свободно передвигать каждый элемент мышью, как в Figma; изменения задаются запросом и могут потребовать новой генерации.
• Результаты могут отличаться. Один и тот же промпт не гарантирует одинаковые макеты. Это удобно для поиска идей, но затрудняет повторное получение точного варианта.
• Лимит генераций. При достижении лимита бесплатного использования может потребоваться дождаться его обновления. Точное значение проверяйте в интерфейсе: оно может меняться.
• Экспериментальный продукт. Stitch относится к Google Labs, поэтому набор функций может измениться.
• Региональная доступность и настройка MCP. Эти условия могут повлиять на работу сервиса и подключение к Claude Code.

Stitch может не подойти, если требуется строго соблюдать общий бренд-гайд в нескольких проектах, дизайн уже подготовлен в Figma или нужно сразу получить опубликованное приложение с серверной частью.

Что делать дальше?#

Начните с главной страницы: опишите продукт, создайте экран, экспортируйте HTML/CSS и попросите Claude Code составить DESIGN.md и собрать страницу из этих локальных файлов. Сравните результат с требованиями.

Дизайн через Stitch — один из способов заранее передать агенту контекст и правила проекта.

Для работы с моделями можно перейти в Ailoot.