Stitch Design Skills: от текстового запроса до экрана и компонента
Google Stitch рисует интерфейсы, но связать его с кодом проекта вручную долго. Эти скиллы работают через MCP-сервер Stitch и разложены по трём плагинам: stitch-design для макетов, stitch-build для кода и stitch-utilities для промптов и дизайн-систем. Агент генерирует экраны, выгружает существующий фронтенд в Stitch и превращает макеты обратно в компоненты.
Claude Code, Codex, Cursor, Gemini CLI, Antigravity, OpenCode
Что умеет
generate-design создаёт экраны по тексту или картинке, правит готовые и делает варианты, например тёмную тему или плотную раскладку.
code-to-design и extract-static-html переносят фронтенд на React или Vue в проект Stitch через статический HTML со встроенными стилями.
extract-design-md и design-md собирают дизайн-систему в файл DESIGN.md, а manage-design-system применяет её ко всем экранам.
react-components, react-native и react-vite-dashboard переводят экраны Stitch в компоненты с едиными токенами и проверкой.
enhance-prompt уточняет расплывчатую идею интерфейса, а stitch-loop собирает многостраничный сайт из одного запроса.
Когда пригодится
Есть работающее приложение без макетов, и нужно перенести его экраны в Stitch, чтобы дизайнер мог их дорабатывать.
Дизайн уже готов в Stitch, и вы хотите получить React-компоненты, не перерисовывая вёрстку вручную.
Нужно быстро показать заказчику несколько вариантов главного экрана в разных стилях.
Попросите агента
Сделай в Stitch экран входа для мобильного приложения доставки и три варианта в тёмной теме
Просканируй папку src и собери дизайн-систему в .stitch/DESIGN.md
Переведи все экраны Stitch-проекта projects/123 в React-компоненты
Вопросы
Как установить Stitch Design Skills в Claude Code?
Командой npx plugins add google-labs-code/stitch-skills --scope project --target claude-code, она ставит плагины в текущий проект. Отдельные скиллы можно взять через npx skills add.
Работают ли скиллы Stitch в Codex и OpenCode?
В Codex добавляют маркетплейс репозитория и ставят плагины stitch-design, stitch-build и stitch-utilities. В OpenCode папки скиллов копируют вручную и прописывают MCP Stitch в opencode.json.
Это официальный продукт Google?
Нет, в README прямо сказано, что проект официально не поддерживается Google и не входит в программу вознаграждений за уязвимости.
