# Google Stitch и Claude Code: дизайн сайта без шаблонного вида > Полный ручной путь Google Stitch → Claude Code: экспорт HTML/CSS, DESIGN.md по локальным файлам, сборка и проверка страницы, работа при неразрешённой авторизации MCP. Source: https://ailoot.ai/blog/ru/google-stitch-claude-code-design/ Canonical: https://ailoot.ai/blog/ru/google-stitch-claude-code-design/ Language: ru Publisher: Ailoot (https://ailoot.ai/) Translation: guide-106 Revision: sha256-a4ab3ca5fe75c21f1f4b9557be14d4fce0ccddbe5d5a9681f996cb128c3cde39
Коротко Claude Code хорошо справляется с логикой, но без заданной дизайн-системы часто создаёт узнаваемый шаблон: тёмный фон, фиолетовый градиент, шрифт Inter и несколько похожих блоков. Google Stitch генерирует интерфейсы по описанию и помогает перенести цвета и параметры типографики в DESIGN.md. Затем Claude Code использует этот файл как ориентир при сборке сайта. Ниже — последовательность действий и возможные сложности.
Дополнительные инструкции по работе с Ailoot собраны в [документации](https://ailoot.ai/docs/). ## Почему сайты, созданные Claude Code, выглядят шаблонно?
Коротко Без конкретной дизайн-системы Claude Code может выбрать сочетание тёмного фона, фиолетового акцента, Inter и однотипных карточек с тенями. Модель опирается на часто встречающиеся в обучающих данных решения, среди которых много похожих страниц на Tailwind. Если не задать точные правила, интерфейс получается усреднённым.
В одном описанном примере работу над главной страницей приложения для звонков начали с чистого проекта и просьбы сделать посадочную страницу. В результате появились фон `slate-950`, акцент `indigo-500`, жирный заголовок Inter и три похожих блока с тенями. Макет напоминал результаты первых генераций популярных инструментов и типовую тему для WordPress. Пять вариантов промпта с пожеланиями «премиально», «не как у всех» и «современно» заметно не изменили впечатление. Фиолетовые акценты часто встречаются в интерфейсах. Причина может быть в том, что похожие решения широко представлены в наборах компонентов и примерах, на которых обучаются модели. Без ясных ограничений модель склонна выбирать распространённые решения. Чтобы получить более индивидуальный результат, укажите конкретные цвета, шрифты, отступы и компоненты, на которые следует ориентироваться. Слово «красиво» не задаёт этих параметров: нужны измеримые требования. Похожую задачу решают готовые дизайн-системы из [руководства по Refero](https://ailoot.ai/blog/ru/claude-code-refero-design-md/): можно взять визуальный стиль известного сайта и передать его агенту. Google Stitch предлагает другой подход — создать стиль по описанию продукта. ## Что такое Google Stitch и чем он полезен?
Коротко Google Stitch — инструмент Google Labs для преобразования текстового описания или изображения в макеты интерфейсов. Он формирует экраны, цвета, типографику и компоновку. Для совместной работы с Claude Code полезно то, что параметры дизайна можно передать в структурированном виде. Тогда агент получает точные значения, а не пытается оценить их по картинке.
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](https://ailoot.ai/blog/ru/claude-design-guide/). Stitch отличается тем, что позволяет передать агенту отдельный файл с дизайн-правилами, к которому можно обращаться при каждой сборке. ## Доступность Google Stitch Доступность Stitch зависит от региона. Перед началом работы проверьте, открывается ли сервис в вашей стране. В некоторых регионах может появиться сообщение «Sorry, Stitch is unavailable». Для входа требуется аккаунт Google. ## Если авторизация Stitch MCP останавливает работу в Claude Code
Коротко Описанная попытка удалённого MCP `https://stitch.googleapis.com/mcp` завершилась ошибкой авторизации в Claude Code. Проверенную совместимую конфигурацию статья не предоставляет. Полный путь ниже использует локальный экспорт HTML/CSS.
В сети встречаются инструкции по MCP, которые могут оказаться неверными. В частности, команда `npx -y @google/stitch-mcp@latest` не устанавливает пакет: npm возвращает `404`. Перед использованием проверяйте название пакета и актуальный способ подключения по официальным материалам. В описанной попытке Claude Code получена `Incompatible auth server`. Это наблюдаемая ошибка, а не рабочий рецепт или доказательство отказа всех текущих конфигураций. Не продолжайте неопределённым шагом «подключить MCP». До проверки точной совместимой настройки используйте ручной экспорт HTML/CSS ниже. Связка Stitch и DESIGN.md помогает заранее передать Claude Code точные параметры интерфейса. Агент получает конкретные правила для работы с цветами, шрифтами и компонентами вместо расплывчатого описания желаемого результата. ## Что такое DESIGN.md и почему он полезнее скриншота?
Коротко DESIGN.md — файл Markdown с параметрами дизайн-системы: цветовыми кодами, шкалой типографики, отступами и правилами компонентов. Claude Code может учитывать его при сборке разных элементов и экранов. Скриншот не сообщает точные значения цвета или отступа, поэтому их приходится оценивать. В текстовом файле значения указаны явно.
В Stitch нет отдельной кнопки экспорта DESIGN.md. Google Codelab предполагает работающий MCP для чтения проекта. В ручном пути Claude Code читает экспортированные HTML/CSS и создаёт файл в корне. Недостающие токены он должен перечислить, а не угадывать по картинке. Пример содержимого DESIGN.md: ```markdown # 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 необязателен и не является условием этого пути. ## Как пройти путь от описания до сайта?
Коротко Ручной путь состоит из семи шагов: проверить доступ, описать продукт, добавить референс, уточнить экран, экспортировать HTML/CSS, составить DESIGN.md по файлам, собрать и проверить одну страницу в Claude Code. Он обходит неразрешённый вопрос авторизации 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 создаёт статичные экраны и кликабельный прототип, но не реализует рабочую логику приложения и не публикует его на хостинге. ## Как сделать интерфейс менее шаблонным?
Коротко Чтобы уйти от типового результата, замените общие слова точными требованиями. Выберите конкретный цвет вместо фиолетового акцента по умолчанию, задайте выразительную пару шрифтов и приложите референс сайта. Запишите решения в DESIGN.md: так агенту будет проще придерживаться единого стиля.
Проверьте несколько основных параметров: - **Цвет.** Акцент `indigo-500` может сделать страницу похожей на множество других. Укажите основной и акцентный цвета в hex в DESIGN.md. Формулировка «фирменный синий» допускает разные интерпретации. - **Шрифт.** Inter широко распространён и часто воспринимается как нейтральный выбор. Попробуйте подобрать пару гарнитур: например, нейтральный шрифт для основного текста и более выразительный для заголовков. Задайте их в Stitch и зафиксируйте в DESIGN.md. - **Референс вместо общего пожелания.** Слова «сделай современно» не задают конкретную композицию. Скриншот помогает показать расположение элементов и общий характер страницы. Загрузите его в Stitch как ориентир. - **Отступы и свободное пространство.** Одинаковые плотные блоки создают впечатление готового шаблона. Определите шкалу отступов в DESIGN.md, чтобы агент располагал элементы последовательнее. Конкретные параметры обычно помогают лучше, чем вкусовые прилагательные. Stitch позволяет преобразовать описание и референсы в набор значений, по которым агент сможет собирать интерфейс. ## Google Stitch и другие инструменты: что выбрать?
Коротко Stitch подойдёт для создания дизайна с нуля без затрат. Если макет уже подготовлен в Figma, рассмотрите Figma Dev Mode MCP; если нужен готовый React-код — v0. Refero помогает выбрать стиль реального сайта, а Lovable предлагает создание приложения вместе с базой и публикацией. У Stitch нет встроенного бэкенда и публикации.
Сравнение по функциям, которые могут пригодиться при разработке с помощью ИИ: | Инструмент | Цена | Что даёт | Связка с Claude Code | |----|----|----|----| | **Google Stitch** | Бесплатно | Создание дизайна по описанию: экраны, HTML, Figma | Локальный HTML/CSS; MCP при проверенной совместимой настройке | | **v0 (Vercel)** | Бесплатно + \$20/мес | Готовый код React / Tailwind, публикация в Vercel | Через промпты и код | | **Figma Dev Mode MCP** | Бесплатно в бете | Передаёт в код готовый дизайн из Figma | Официальный Figma MCP | | **Refero Styles** | Бесплатная библиотека | Готовые DESIGN.md реальных сайтов | Официальный Refero MCP | | **Lovable** | Бесплатно + \$25/мес | Интерфейс, база данных и публикация в одном сервисе | Отдельная платформа | Stitch можно использовать для подбора дизайна, а Claude Code — для реализации интерфейса и логики. Для обзора набора инструментов есть материал [о выборе инструментов для разработки в 2026 году](https://ailoot.ai/blog/ru/ai-coding-tools/). ## Ограничения Google Stitch
Коротко Stitch предназначен для интерфейсов и не создаёт бэкенд, базу данных или готовую публикацию. Ручные правки отдельных элементов ограничены: изменение приходится задавать запросом и генерировать заново. Одинаковый промпт может давать разные варианты. У сервиса есть лимит бесплатных генераций, который может меняться, а экспериментальный статус означает отсутствие гарантий неизменности функций. В некоторых регионах доступ ограничен; подключение MCP в Claude Code тоже может потребовать дополнительной настройки.
Перед началом учитывайте следующие ограничения: - **Только интерфейс.** Stitch не создаёт серверную часть, базу данных или публикацию на хостинге. Для этого потребуется Claude Code или другая платформа. - **Ограниченное редактирование.** Нельзя свободно передвигать каждый элемент мышью, как в Figma; изменения задаются запросом и могут потребовать новой генерации. - **Результаты могут отличаться.** Один и тот же промпт не гарантирует одинаковые макеты. Это удобно для поиска идей, но затрудняет повторное получение точного варианта. - **Лимит генераций.** При достижении лимита бесплатного использования может потребоваться дождаться его обновления. Точное значение проверяйте в интерфейсе: оно может меняться. - **Экспериментальный продукт.** Stitch относится к Google Labs, поэтому набор функций может измениться. - **Региональная доступность и настройка MCP.** Эти условия могут повлиять на работу сервиса и подключение к Claude Code. Stitch может не подойти, если требуется строго соблюдать общий бренд-гайд в нескольких проектах, дизайн уже подготовлен в Figma или нужно сразу получить опубликованное приложение с серверной частью. ## Что делать дальше?
Коротко Испытайте один экран: создайте макет, экспортируйте HTML/CSS, составьте DESIGN.md по локальным файлам и соберите страницу. Проверьте результат и нужные состояния перед расширением.
Начните с главной страницы: опишите продукт, создайте экран, экспортируйте HTML/CSS и попросите Claude Code составить DESIGN.md и собрать страницу из этих локальных файлов. Сравните результат с требованиями. Дизайн через Stitch — один из способов заранее передать агенту контекст и правила проекта.
### Источники - [Google Developers Blog — Stitch: a new way to design UIs](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/) - [Google Blog — Stitch и Gemini 3](https://blog.google/technology/google-labs/stitch-gemini-3/) - [Google Codelab — Design-to-Code with Stitch MCP](https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch) - [Figma — настройка MCP для Claude Code](https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server)
Для работы с моделями можно перейти в [Ailoot](https://ailoot.ai/). ## Вопросы и ответы ### Что делать при Incompatible auth server в Stitch MCP? Используйте ручной путь: экспорт выбранного экрана HTML/CSS с материалами, локальная проверка и DESIGN.md по этим файлам. Проверенной конфигурации MCP статья не даёт. Шаг «подключить MCP» не считается выполненным. ### Как избежать выдуманных токенов DESIGN.md? Дайте экспорт HTML/CSS, а не один снимок. Попросите выписать присутствующие значения, недостающие цвета, шрифты, интервалы и правила передать на решение. Затем сравните одну отрисованную страницу с экспортом. ## Ailoot · Компания и портфель её проектов Ailoot опирается на накопленный опыт работы, большую клиентскую базу, стабильный сервис и постоянный контроль KPI. Компания и портфель её проектов: миллионы клиентов; продажи на миллиарды ежемесячно. Этот опыт Ailoot использует для API-доступа к нейросетям в продуктах клиентов, агентах, приложениях и автоматизациях.