Stitch Skills от Google Labs: навыки агента несут макет в код

Макет утвердили, и началась вторая работа

Заказчик принял экран, верстальщик открывает его и вручную выписывает цвета, размеры шрифтов, отступы, потом собирает компоненты. Stitch Skills пытаются отдать её агенту: он сам идёт в сервис, берёт экран и собирает по нему компоненты по правилам из навыка.

Мой угол узкий: где в цепочке «макет, токены, код» агент экономит ручной перенос и где человек обязателен. Что такое MCP, я разбирал в отдельной статье, здесь только то, что относится к Stitch.

Что это за проект и что я проверил

Проверял 19.10.2026 по API GitHub и файлам репозитория. Репозиторий google-labs-code/stitch-skills лежит в организации Google Labs Code, рядом с ним официальный stitch-sdk и спецификация design.md. Поле homepage ведёт на stitch.withgoogle.com, в CONTRIBUTING требуется Google CLA. В README есть оговорка: это не официально поддерживаемый продукт Google, и на него не распространяется программа наград за уязвимости.

Файл LICENSE содержит Apache License 2.0. Репозиторий создан 16 января 2026 года, то есть ему девять месяцев. Звёзд около 8,5 тысячи, форков около 1,1 тысячи, не архивирован. Последний коммит 17 августа 2026 года (слияние pull request 91), с тех пор два месяца тишины. Контрибьюторов 17, у лидера 57 коммитов. Открытых issue и pull request 17.

Что такое Stitch и как к нему подключается агент

По официальному блогу Google, Stitch это холст для проектирования интерфейсов с ИИ: экраны создаются из текста, картинки или кода как контекста, есть дизайн-агент, прототипы, экспорт в AI Studio и Antigravity, формат DESIGN.md для обмена правилами дизайна. Пост про регионы и тарифы ничего не сообщает. Вторичный пересказ издания The Decoder от 18.03.2026 пишет про пользователей от 18 лет в регионах, где доступен Gemini. Для России это не ответ: доступ, регистрацию и оплату уточняйте.

README требует сначала настроить Stitch MCP по документации. По описанию в issue 94 это адрес stitch.googleapis.com/mcp и ключ из настроек Stitch в заголовке X-Goog-Api-Key. Официальный SDK читает ключ из переменной STITCH_API_KEY. Страница документации по настройке у меня в браузере не отрисовалась, поэтому шаги по ней я не проверял.

Какие навыки внутри

Навыки разложены по трём плагинам. В stitch-design шесть: code-to-design, generate-design, manage-design-system, extract-design-md, extract-static-html, upload-to-stitch. В stitch-build пять: react-components, react-native, react-vite-dashboard, remotion, shadcn-ui. В stitch-utilities четыре по README: design-md, enhance-prompt, stitch-loop, taste-design. В дереве репозитория есть ещё site-md, в таблицу README он пока не попал.

Поддерживаемые агенты по README: Codex, Antigravity, Gemini CLI, Claude Code, Cursor, а OpenCode только с ручной установкой, причём навыки с именем вида stitch::… там нужно переименовать. Установка для Claude Code: npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. Выборочно: npx skills add google-labs-code/stitch-skills, но навыки зависят друг от друга, и README просит ставить зависимости.

Что на выходе и как с токенами

Читал текст навыка react-components. Он получает от Stitch данные экрана, скачивает HTML и скриншот и ищет в шапке HTML блок tailwind.config. Цвета, шрифты, отступы и радиусы оттуда переносятся в файл style-guide.json. На выходе проект на Vite и React с TypeScript, компоненты на классах Tailwind, привязанных к теме, без hex-значений в разметке. Правила навыка: каждый повторяющийся блок отдельным компонентом, логика в хуках, тексты и картинки в mockData, интерфейс Props у каждого компонента, варианты dark: на всех цветах, заглушки href="#" заменены ссылками React Router. Проверки npm run validate и tsc --noEmit навык предлагает после разрешения пользователя.

Для React Native есть отдельный навык. В коммите от 29 июля 2026 в stitch-design добавлена поддержка Angular. Навыка для Vue в репозитории нет: запрос и pull request висят открытыми.

Токены держатся на DESIGN.md. Навыки extract-design-md и design-md собирают его из кода или из проекта Stitch, manage-design-system загружает его в Stitch и применяет к экранам, перед загрузкой остановившись на подтверждение. Как выглядит работа, когда токены покрывают лишь малую часть стилей, я показывал в разборе редизайна фронтенда: DESIGN.md не исправит такой код, но поможет увидеть разрыв.

Что важно учесть

Всё держится на закрытом сервисе. Без Stitch и ключа навыки бесполезны, а условия, тарифы и регионы определяет Google. Для российских заказчиков доступность и оплата под вопросом.

Известные поломки. Issue 94 от 8 октября 2026, открыта: ссылки на скачивание HTML и скриншотов в ответах MCP для клиентов с API-ключом перенаправляют на вход в Google, и ломается шаг скачивания, на котором стоят react-components, stitch-loop и другие навыки. Issue 68 от 8 июня: редактирование экрана через edit_screens возвращает успех, но изменение не сохраняется, причина описана в stitch-sdk. Статус мог измениться, откройте их перед работой.

Макеты и описания продукта уходят в сервис Google. Если в договоре с заказчиком запрещены внешние сервисы, это нужно решить до подключения. Альтернативу на своём сервере я описывал в статье про Penpot.

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

Что можно сделать уже сейчас

Проверьте доступ. Откройте Stitch со своего аккаунта и региона, заведите тестовый проект на экране без секретов клиента.

Прогоните один экран на песочнице. Подключите Stitch MCP в тестовом репозитории, поставьте stitch-build, соберите одну страницу навыком react-components, затем сами запустите validate и tsc и посмотрите результат глазами.

Соберите DESIGN.md из существующего сайта через extract-design-md и сравните с реальными токенами.

Если нужно встроить такую связку в процесс студии или команды, я подключу навыки к рабочему процессу и пропишу чек-лист приёмки: решение и проверка остаются за человеком. Это входит в веб-разработку под ключ. Согласование самих макетов с клиентом я разбирал здесь.

Частые вопросы

Платные ли сами навыки?

Репозиторий бесплатный, лицензия Apache-2.0. Тарифы и лимиты Stitch я не подтвердил: страницы цен в проверке не было, уточняйте.

Работает ли это с Claude Code?

README называет его среди поддерживаемых агентов и даёт команду установки. Сам я связку не запускал, поэтому подтвердить не могу.

Заменит ли это верстальщика?

Нет. Агент переносит экран в код по правилам навыка, а проверка доступности, состояний, данных и интеграции остаётся человеку.

Коротко о главном

Stitch Skills под Apache-2.0 дают агенту готовые инструкции для цепочки «макет Stitch, токены, React». Они зависят от закрытого сервиса Google, у них есть открытые проблемы со скачиванием экранов, а код после генерации надо проверять руками.

Если хотите проверить, подойдёт ли такая связка вашей студии или команде, напишите мне в Telegram кодовое слово «МАКЕТ».