Google Stitch + Claude Code: дизайн в код по шагам

Claude Code отлично пишет код, но дизайн с нуля даётся ему хуже — без референса получаются стандартные шаблонные макеты. Решение — связать его с Google Stitch: Stitch генерит UI, а Claude Code превращает его в рабочий код напрямую, без копипаста скриншотов.

В коротких роликах этот флоу показывают как «нажми export и готово». На деле есть шаг, который там проглатывают — подключение Stitch к Claude Code через MCP. Разберём всё по порядку, с точными командами, чтобы ты мог повторить.

Что в итоге получится

Честная рамка, чтобы не было завышенных ожиданий:

• Stitch отдаёт статичный дизайн — цвета, типографику, разметку экранов.
• Claude Code превращает это в рабочий код в твоём стеке (React, Astro, обычный HTML/CSS) и добавляет анимации.
• Полировка — адаптив, доступность, pixel-perfect — всё равно требует ручных правок.

Связка убирает ручной перенос дизайна в код, но не заменяет разработчика. «Последние 20%» остаются за тобой.

Что понадобится

• Аккаунт Google Stitch (бесплатно, Google Labs)
• Claude Code (план Pro или выше)
• API-ключ Stitch (получим в шаге 2)

Шаг 1. Сгенерировать дизайн в Stitch

Заходишь в Stitch и описываешь идею приложения простым языком — что за продукт, какие экраны нужны. Чтобы задать визуальное направление, прикрепи 1–2 референса из Pinterest или Dribbble.

Stitch сгенерит чистый UI со всеми экранами и дизайн-системой (палитра, шрифты, spacing). Поправь промптом, если что-то не нравится — это дешевле, чем чинить потом в коде.

Шаг 2. Получить API-ключ Stitch

• Кликни на аватар в Stitch → Stitch settings
• Найди раздел API key → Create key
• Скопируй ключ и сохрани

Шаг 3. Подключить Stitch к Claude Code

Подключение — одной командой. Stitch отдаёт официальный HTTP-endpoint для MCP, так что сторонние пакеты не нужны. Выполни в терминале:

claude mcp add --scope user --transport http \
  --header "X-Goog-Api-Key: ВАШ_КЛЮЧ" \
  stitch https://stitch.googleapis.com/mcp

Разбор флагов:

• --scope user — сервер будет доступен во всех твоих проектах (а не только в текущем).
• --transport http — тип подключения (удалённый HTTP-сервер).
• --header — передаёт твой API-ключ для авторизации.
• stitch — имя сервера, https://... — его адрес (идёт последним, без флага).

Ключ в команде попадёт в конфиг открытым текстом. Надёжнее — подставить его через переменную окружения: задай export GOOGLE_STITCH_API_KEY="ключ" и используй в заголовке "X-Goog-Api-Key: ${GOOGLE_STITCH_API_KEY}". И не коммить конфиг с ключом в git.

Шаг 4. Проверить подключение

Проверь, что сервер на месте:

claude mcp list

В списке должен быть stitch со статусом Connected. Внутри сессии Claude Code то же самое покажет команда /mcp. Если статус Failed — проверь ключ.

Шаг 5. Главный промпт: дизайн → рабочий код

Теперь Claude Code видит твои дизайны. Вместо «сделай красиво» дай ему структурированный промпт — он импортирует дизайн, проведёт аудит, починит по шагам, добавит анимации и запустит сервер. Копируй целиком (промпт на английском — так Claude Code точнее его исполняет):

You have the Stitch MCP connected. Work in phases, in order. Stop for my confirmation between phases.

CONNECT & IMPORT
- Verify the Stitch connection by listing my projects (name, id, last modified). Show them numbered and wait for me to pick one.
- Import the selected design via MCP: component code, assets, layout, styles. Save the raw import into /imported untouched — this is the source of truth. Never recreate the design from memory, only from what the MCP returns. Show the file tree and wait.

AUDIT (before writing any new code)
Scan the imported codebase and output a numbered checklist marking OK / minor / critical for each item: fonts (inconsistent families/weights, missing web-font tags), heading scale, colors (hardcoded vs tokens), animations (CSS mixed with JS, missing entrances), interactive states (hover/focus/active), spacing consistency, z-index, responsive breakpoints, component structure (missing keys/default props, oversized inline blocks), state management, performance (unoptimized assets, missing lazy-load/memoization), accessibility (aria-label/alt/button type, focus traps), dead code, hardcoded URLs/secrets, console errors on first load. Show total critical/minor counts. Wait for confirmation.

FIXES (build on /imported, never rewrite from scratch; commit after each step)
1. Tokens — extract every color, font, size, weight, spacing, radius, shadow, z-index into one token file. Replace all hardcoded values with token references.
2. Typography — one type scale. Fix heading levels, weights, web-font loading (no flash of unstyled text).
3. Color — replace remaining raw colors with tokens, set up dark/light if used, check WCAG AA contrast.
4. Spacing & layout — normalize to the token scale, fix grid/flex at all breakpoints.
5. Components — extract inline blocks over 40 lines, remove dead code, fix missing keys and default props.
6. Animations (Framer Motion, one approach project-wide):
   - Entrances on viewport entry: initial { opacity: 0, filter: 'blur(12px)', y: 28 } -> animate { opacity: 1, filter: 'blur(0px)', y: 0 }, 0.7s, ease [0.25,0.46,0.45,0.94]. Always include the blur — an opacity-only fade looks cheap.
   - Headline word-by-word: split by spaces, each word a motion.span (inline-block, marginRight 0.28em); initial { filter: 'blur(10px)', opacity: 0, y: 40 } -> { blur(0), opacity: 1, y: 0 }, 0.7s, stagger delay (i*100)/1000s.
   - Staggered lists/grids: parent stagger container on viewport entry, each child +0.09s, same blur-slide-up. Never animate all children at once.
   - Card hover: whileHover { y: -7, scale: 1.018 }, spring stiffness 300 damping 22. Inner icon/image gets a secondary hover y: -3, delay 0.15s.
   - Button hover: whileHover { scale: 1.05 }, whileTap { scale: 0.97 }, spring 400/20. Animate inner icon separately (arrow x: 3).
   - Link hover: whileHover { x: 3 } for directional links; nav links draw an underline via scaleX 0->1 on ::after, transformOrigin left, 0.25s. No scale.
   - Conditional elements (tooltips, dropdowns, modals, drawers, toasts, tabs, accordions): AnimatePresence mode="wait". Enter { opacity: 0, scale: 0.9, filter: 'blur(8px)', y: 10 } -> { 1, 1, blur(0), 0 }, 0.3s. Exit { opacity: 0, scale: 0.95, blur(4px), y: -6 }, 0.2s.
   - Number counters: on viewport entry animate 0 -> final over 1.4s easeOut via useMotionValue + useTransform. Never snap the number in.
   - Line reveals (dividers): scaleX 0->1, transformOrigin left, 0.9s, ease [0.76,0,0.24,1].
   - Image entrance: { scale: 0.92, opacity: 0, filter: 'blur(10px)' } -> { 1, 1, blur(0) }, 0.65s, ease [0.34,1.56,0.64,1] (slight overshoot).
   - Shared layout: use layoutId for tab indicators, toggle pills, active markers.
   - Scroll-linked (if it is a scroll page): useScroll + useTransform. Background 0.4x, foreground 0.85x, hero scales 1 -> 1.08 on scroll-out. No position: fixed hacks.
   - Reduced motion: wrap all variants in useReducedMotion(). If preferred, replace blur-slide-up with a plain opacity 0->1 fade at the same duration and remove scale transforms. Keep timing.
7. Responsive — check 375 / 768 / 1280px. Fix breaks, overflow, image sizing. Tap targets at least 44x44px.
8. Accessibility — add aria-labels, button type, alt text; ensure keyboard order and focus trap on modals.
9. Environment — move hardcoded URLs/keys into .env.example with placeholder values.
10. Console — run dev mode, fix every error, do not silently suppress warnings.

VERIFICATION
Diff /imported vs current. Summarize every changed file and why. Re-run the audit checklist — every item must be OK. Explain any remaining critical and what I must do manually.

SERVER
Start the dev server on port 3000 (Vite / Next / CRA / etc). Print the local URL. Confirm it loads without errors. If 3000 is busy, try 3001 then 3002 and report which port was used.

Промпт работает по фазам с остановками — ты контролируешь каждый шаг, а не получаешь «чёрный ящик». Подгони под свой стек: укажи React/Astro/Vue, нужный CSS-фреймворк, какие экраны куда.

Сколько это реально занимает

В роликах обещают «сайт за 23 минуты». Честно: это лучший случай для одного простого экрана. Реальный landing с анимациями и адаптивом — 1–3 часа с 2–4 итерациями. Каркас Claude собирает за минуты, но полировка, мобильная версия и доступность требуют ручных раундов.

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

Ограничения (знать заранее)

• Только статика. Stitch не генерит анимации, hover-состояния, валидацию форм, логику — это добавляет Claude по промпту.
• Не pixel-perfect. Возможны отклонения в отступах — код недетерминирован.
• Stitch в Labs. Лимит ~400 кредитов/день, поведение может меняться.

Источники

1. Google Labs — анонс Stitch
2. Claude Code — подключение MCP-серверов (синтаксис claude mcp add)
3. Anthropic Cookbook — Frontend Aesthetics

Читать дальше

• Настройка Claude Code: глобальный и проектный уровень
• Все гайды по Claude Code
• Квест: сайт за неделю на Claude Code

Если застрял на каком-то шаге — пиши, разберёмся.