Stitch Design Skills — плагин
Три плагина со скиллами для Google Stitch: генерация экранов, перенос кода в дизайн и сборка React из макетов
- 8 632 ★ репозитория
- Последний коммит
- Apache-2.0
Расширенный доступ
Почему такой уровень
- Скиллы запускают скрипты загрузки и пишут файлы в проект
- Отправляют код и ассеты в облачный сервис Stitch
Установка
- Работает в
Ручная установка
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeДоступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скиллы запускают скрипты загрузки и пишут файлы в проект
- Отправляют код и ассеты в облачный сервис Stitch
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Набор от Google Labs работает поверх MCP-сервера Stitch. Плагин stitch-design генерирует и правит экраны по тексту или картинке, переносит существующий фронтенд в проект Stitch, извлекает DESIGN.md из кода и управляет дизайн-системой. Плагин stitch-build превращает экраны Stitch в компоненты React, React Native или дашборд на Vite, помогает с shadcn/ui и собирает видеообзор проекта через Remotion. Плагин stitch-utilities улучшает промпты, пишет DESIGN.md по проекту и собирает многостраничный сайт из одного запроса.
Для кого. Для дизайнеров и фронтендеров, которые проектируют экраны в Google Stitch и переносят их в код.
Подходит, если
- Нужно сгенерировать экраны или варианты дизайна в Stitch прямо из агента
- Нужно превратить макеты Stitch в компоненты React или React Native
- Нужно вытащить дизайн-систему из существующего кода в DESIGN.md
Не подходит, если
- Вы не пользуетесь Google Stitch: большинство скиллов без его MCP бесполезны
- Дизайн живет в Figma и переносить его не планируется
Пример запроса к агенту
Сгенерируй в Stitch три варианта главного экрана с темной темой и плотной сеткойОграничения
Нужен настроенный MCP-сервер Stitch и аккаунт Google. Сервисы Google Stitch из России без VPN, скорее всего, недоступны. Скиллы зависят друг от друга, при выборочной установке нужно ставить и зависимости. В OpenCode имена скиллов вида stitch::... придется переименовать. Это не официально поддерживаемый продукт Google.
Как отключить. Удалите плагины stitch-design, stitch-build и stitch-utilities через менеджер плагинов агента или сотрите папки скиллов из проекта.
Частые вопросы
Можно ли поставить только нужные скиллы?
Да, через npx skills add google-labs-code/stitch-skills, но нужно следить за зависимостями между скиллами.
Какие агенты поддерживаются?
Codex, Antigravity, Gemini CLI, Claude Code и Cursor, в OpenCode установка ручная.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныРасширение Gemini CLI для Google Stitch: команда /stitch показывает проекты и экраны, скачивает картинки и HTML и генерирует экраны по тексту
Плагин и npx CLI, которые создают DESIGN.md по спецификации google-labs-code/design.md из официальных шаблонов
Скилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скилл рисует макеты интерфейсов и лендингов и переносит их в HTML, в проект на React или в мини-приложение WeChat
Набор скиллов, который фиксирует дизайн-решения проекта в правилах и проверяет интерфейс по баллам и скриншотам
Коротко о README
README объясняет установку маркетплейса в Codex, команды npx plugins для Claude Code и Cursor и ручную настройку для OpenCode с фрагментом конфигурации удаленного MCP. Для каждого из трех плагинов приведена таблица скиллов с примерами запросов. Описана структура скилла: SKILL.md, скрипты, ресурсы и примеры. Лицензия Apache-2.0.