Claude пише бриф для Stitch, Stitch — для Claude Code
Автор зв'язав три інструменти: Claude Fable за ~30 секунд склав дизайн-бриф (кольори, сітка, semantic HTML, JS лише як останній засіб), Stitch 2.0 за ним згенерував до 5 екранів одразу на Gemini 3, а файл DESIGN.md передав дизайн-систему в Claude Code для доведення коду. Сайт вийшов майже робочим, але зі зламаним мобільним меню й 246 інлайн-стилями замість класів — це одна сесія рефакторингу в Claude Code.
Що це означає для бізнесу:
Якщо робите лендинги через Claude Code — пишіть бриф для Stitch окремим промптом у Claude, а не прямо в Stitch, і закладайте сесію на чистку стилів і мобільного меню.
Чому бриф пише Claude, а не сам автор
Проблема з prompt-to-UI інструментами в тому, що промпт зазвичай пишуть на ходу: «сучасний лендинг, зробіть круто», отримують щось загальне і потім двадцять генерацій підправляють у різні боки — кожна правка трохи відходить від попередньої, і до п'ятнадцятої ітерації кнопки мають три різні радіуси кутів.
Автор розвернув порядок: перед тим як відкривати Stitch, віддав Claude Fable весь контекст — вигаданий продукт (Kestrel, інструмент моніторингу мережі для home lab), бюджет сторінок (одна головна + до 5 підсторінок) і одне жорстке правило: `семантичний HTML і CSS, JavaScript лише коли інше двоє фізично не впораються`. Fable за приблизно 30 секунд склав майстер-промпт із дизайн-системою наперед: точні hex-коди, стек шрифтів, 12-колонкову сітку, крок відступів `8px`, правила для компонентів аж до форми кнопок — плюс шість промптів по сторінках, що посилаються на ту саму систему.
Fable сам додав те, чого автор не сформулював би: `` замість JS-акордеону для FAQ з тарифами, нативну HTML-валідацію форми замість скрипта, `scroll-behavior: smooth` у CSS замість застарілого скрол-хайджекінгу. Фінальний промпт дозволив рівно один скрипт на сторінці — перемикач мобільного гамбургер-меню.
Що дає Stitch 2.0 у цьому зв'язку
Після оновлення в березні 2026 Stitch перейшов з одноразового «промпт-мокап» на постійний infinite canvas: скрини, промпти, референсні зображення і навіть вставлений код лежать разом як контекст, і дизайн доводиться на місці, а не перегенеровується з нуля. Ключова для мультисторінкового сайту функція — генерація до 5 екранів за раз з єдиною мовою дизайну (палітра, компоненти, типографіка).
Stitch тепер працює на Gemini 3 (Gemini 3.8 Flash для режиму Balanced, Gemini 3.5 Flash-Lite для Speed) — за словами Google на I/O 2026, це має точніше тримати дизайн-систему і давати доступніші інтерфейси. Безкоштовний тариф лишається щедрим: замість місячних лімітів — денні кредити, що обновляються о півночі UTC, без картки. Платні плани, за повідомленнями, готуються.
Експорт іде в HTML/CSS, за повідомленнями є опції під Tailwind, Vue, Angular, Flutter, SwiftUI, плюс плагін у Figma з робочим Auto Layout і MCP-сервер, що передає дизайн прямо в кодових агентів типу Claude Code. Окремо — `DESIGN.md`: markdown-файл з усією дизайн-системою (кольори, типографіка, відступи, паттерни компонентів), який Stitch уміє навіть витягувати з готового URL.
Що зламалось на виході і як це закрити
На десктопі сайт виглядав готовим, але на мобільному навігація зникала: CSS ховає пункти меню нижче `768px` і стилізує кнопку-гамбургер, проте сам скрипт перемикача — той єдиний дозволений скрипт — на жодній сторінці не з'явився. Міжсторінкову навігацію Stitch залишив на футер, а той неповний на всіх сторінках, окрім однієї. Додатково код містив 246 inline `style`-атрибутів замість класів.
Файл `DESIGN.md` виявився точнішим за сам згенерований код: у ньому правильні кольорові коди для контрасту, липка навігація без «замороженого скла», 12-колонкова сітка, що звужується до чотирьох колонок на мобільному, і SVG-ілюстрації лінійною графікою. Автор передав в Claude Code обидва документи одразу — код і `DESIGN.md` — щоб агент звів їх до одного стандарту.
- Перенести inline-стилі в класи
- Додати брейкпоінти й CSS-only мобільне меню замість зламаного скрипта
- Додати глобальний focus ring
- Підмінити кольори на ті, що вказані в `DESIGN.md` для контрасту
За оцінкою автора, це рутинний рефакторинг шести файлів на одну фокусну сесію в Claude Code, а не переробка з нуля. SVG-ілюстрації він планує повернути назад у Stitch — малювання лишається тим, що інструмент робить краще за кодового агента. Текстовий контент на сторінках теж варто сприймати як заглушку: автор промпту про копірайт не давав, тож і Stitch згенерував плейсхолдер, який треба замінити своїм.
Дати запуску й ціни платних планів Stitch у матеріалі немає.