Stitch skillsдизайн из Google Stitch в код Claude

Stitch skills — это библиотека Agent Skills от команды google-labs-code, работающая через Stitch MCP-сервер. Её задача — соединить дизайн-платформу Google Stitch с кодовым агентом: взять экран, собранный в Stitch, и превратить его в рабочий код прямо в Claude Code, а не оставить картинкой. Скилы генерируют React и React Native компоненты, управляют дизайн-системой и умеют собирать документацию по дизайну.

Ищете «stitch skills» и хотите понять, что это и как подключить — вы по адресу. Скилы следуют открытому стандарту Agent Skills, поэтому совместимы не только с Claude Code, но и с Cursor, Gemini CLI и другими агентами. Карточка со свежими данными — Stitch skills на маркетплейсе.

Часть 1 · Суть

Что такое Stitch skills

Обычно дизайн и код живут в разных мирах: сначала макет, потом ручной перенос в компоненты. Stitch skills закрывают этот разрыв. Они дают агенту прямой доступ к дизайнам из Google Stitch и набор навыков, чтобы превратить их в код без промежуточного «перерисовывания на глаз». Направление работает в обе стороны: из дизайна в код и из кода обратно в дизайн.

Часть 2 · Платформа

Что такое Google Stitch

Google Stitch — дизайн-платформа Google (stitch.withgoogle.com), где интерфейс собирается из текстовых описаний и картинок. Сам по себе Stitch отвечает за экраны и дизайн-систему, но результат остаётся внутри платформы. Stitch skills нужны как мост: они выносят этот дизайн в кодовую среду агента, где из него уже собирается рабочее приложение.

Часть 3 · Начинка

Какие скилы входят в набор

Библиотека разбита на три бандла — берёте те, что нужны под задачу:

• stitch-design. Работа с самим дизайном: generate-design (создать или отредактировать экраны из текста и картинок), code-to-design (собрать дизайн из существующего кода), manage-design-system (дизайн-системы и темы).
• stitch-build. Генерация кода: react-components и react-native — превращают дизайн в компоненты под веб и мобильные.
• stitch-utilities. Вспомогательное: design-md (документация по дизайну) и stitch-loop (многостраничные сайты из промпта).

Часть 4 · Связь

Зачем нужен Stitch MCP-сервер

Скилы описывают, что агент умеет делать с дизайном, но доступ к самим дизайнам даёт Stitch MCP-сервер. MCP (Model Context Protocol) — это стандарт, по которому агент подключается к внешним данным и инструментам. Без запущенного и настроенного Stitch MCP скилы не дотянутся до ваших экранов, поэтому его настройка — обязательный шаг. Что такое MCP и как он устроен, разобрано в гайде MCP-серверы для Claude.

Часть 5 · Установка

Как установить Stitch skills

Сначала настройте Stitch MCP-сервер по документации Google Stitch. Затем добавьте библиотеку скилов через CLI:

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

После этого ставите нужные бандлы — stitch-design, stitch-build или stitch-utilities. Общий разбор способов установки навыков — в гайде как установить skill в Claude Code.

Вопросы

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

Хотите увидеть, какие ещё дизайн-в-код навыки берут другие? В категории дизайн на маркетплейсе собраны скилы под интерфейсы и вёрстку.

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

Соседние гайды