SkillFoxx

Начните вводить название, задачу или сервис

Stitch Design Skills

Три плагина со скиллами для Google Stitch: генерация экранов, перенос кода в дизайн и сборка React из макетов

ПлагинВыбор редакцииСредний риск

google-labs-code/stitch-skillsАвтор: Google Labs

Установка

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

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Набор от 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 через менеджер плагинов агента или сотрите папки скиллов из проекта.

Проверка безопасности

  • Скиллы запускают скрипты загрузки и пишут файлы в проект
  • Отправляют код и ассеты в облачный сервис Stitch

Коротко о README

README объясняет установку маркетплейса в Codex, команды npx plugins для Claude Code и Cursor и ручную настройку для OpenCode с фрагментом конфигурации удаленного MCP. Для каждого из трех плагинов приведена таблица скиллов с примерами запросов. Описана структура скилла: SKILL.md, скрипты, ресурсы и примеры. Лицензия Apache-2.0.

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

Можно ли поставить только нужные скиллы?

Да, через npx skills add google-labs-code/stitch-skills, но нужно следить за зависимостями между скиллами.

Какие агенты поддерживаются?

Codex, Antigravity, Gemini CLI, Claude Code и Cursor, в OpenCode установка ручная.

Скиллы Next.js

Next.js skills

Выбор редакции

Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере

ПлагинСредний риск142,4 тыс.
Выбор редакции

Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки

СкиллСредний риск123,8 тыс.
Выбор редакции

Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов

СкиллВысокий риск68,1 тыс.
Выбор редакции

Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой

СкиллСредний риск31,2 тыс.