Что такое Stitch Skills и зачем это нужно
Лаборатории Google выпустили Stitch Skills — набор из более чем 14 плагинов и навыков, следующих стандарту Agent Skills. Главная цель проекта — автоматизировать переход от дизайн-макетов к рабочему коду. Библиотека совместима с популярными AI-кодерами: Codex, Antigravity, Gemini CLI, Claude Code, Cursor и OpenCode.
Для работы требуется настроенный сервер Stitch MCP (Model Context Protocol), который выступает мостом между локальным агентом и облачной средой Stitch. Без него навыки не смогут загружать ассеты или синхронизировать проекты.
Три ключевых направления: Дизайн, Сборка, Утилиты
Библиотека разделена на три логических блока, каждый из которых решает конкретную задачу в воркфлоу разработчика:
- stitch-design: Работа с визуалом. Включает навыки для конвертации фронтенд-кода (React, Vue) в дизайн Stitch, генерации экранов по текстовому описанию или изображениям, а также извлечения дизайн-систем (DESIGN.md) из исходного кода.
- stitch-build: Генерация кода. Превращает дизайн-макеты в компоненты React, React Native (с учетом платформенных особенностей), дашборды на Vite + TanStack Query. Также поддерживает генерацию видео-проходов через Remotion и интеграцию с shadcn/ui.
- stitch-utilities: Помощники. Генерация спецификаций дизайна, улучшение промптов для UI/UX, создание многостраничных сайтов из одного запроса и enforcement «премиальных» стандартов дизайна.
Технические детали и совместимость
Установка зависит от используемого агента. Для Codex рекомендуется использовать маркетплейс с флагами --sparse для ускорения клонирования. Claude Code и Cursor поддерживают установку через npx plugins add в scope проекта или воркспейса. OpenCode требует ручной настройки: навыки копируются в папку .opencode/skills, а имена навыков должны быть в формате kebab-case.
Ключевые навыки в цифрах и примерах
Вот как выглядят основные возможности библиотеки на практике:
| Плагин | Навык (Skill) | Что делает | Пример промпта |
|---|---|---|---|
| stitch-design | code-to-design | Конвертация React/Vue кода в дизайн Stitch | «Загрузи код из /path/to/dashboard в проект 'Dashboard-Migration'» |
| generate-design | Генерация экранов по тексту/картинкам | «Сделай вкладку браузера для приложения знакомств» | |
| manage-design-system | Управление DESIGN.md и темами | «Примени дизайн-систему из .stitch/DESIGN.md ко всем экранам» | |
| extract-design-md | Извлечение системы из кода | «Сканируй /src и создай DESIGN.md» | |
| extract-static-html | Снимок веб-приложения в HTML | «Сделай статичный снимок localhost:3000/profile» | |
| upload-to-stitch | Загрузка ассетов в проект | «Загрузи landing_page.html в проект projects/987654321» | |
| stitch-build | react-components | Конвертация в React с валидацией токенов | «Конвертируй все экраны проекта 123 в React-компоненты» |
| react-native | Генерация RN-компонентов | «Конвертируй дизайн в React Native с учетом тем» | |
| remotion | Генерация видео-проходов | «Сделай видео-демо проекта projects/456» | |
| shadcn-ui | Интеграция shadcn/ui | «Настрой shadcn/ui и создай таблицу с сортировкой» | |
| react-vite-dashboard | Дашборды на Vite + TanStack | «Собери DeFi-дашборд из экрана Stitch» | |
| stitch-utilities | design-md | Генерация семантического описания дизайна | «Проанализируй проект 123 и создай DESIGN.md» |
| enhance-prompt | Улучшение UI/UX промптов | «Улучши промпт: 'сделай страницу настроек'» | |
| stitch-loop | Создание многостраничных сайтов | «Построй 5-страничный портфолио-сайт» | |
| taste-design | Enforcement премиум-стандартов | «Создай DESIGN.md с строгой типографикой» |
Почему это важно
Раньше дизайнеры и разработчики работали в разных средах. Stitch Skills позволяют AI-агенту «видеть» дизайн-систему, загружать макеты и сразу генерировать валидный код с соблюдением токенов дизайна. Это сокращает время на рутинную верстку и синхронизацию изменений между Figma/Stitch и кодовой базой.
Источник: Github ↗