Stitch Design Skills — набор агентских навыков для Google Stitch

Google Stitch — это AI-инструмент от Google Labs для генерации UI-макетов и дизайн-систем по текстовому описанию или картинкам. Работать с ним из командной строки неудобно: Stitch живёт в браузере, а агент без MCP-сервера туда не достучится. Репозиторий google-labs-code/stitch-skills решает ровно эту проблему — это библиотека агентских навыков, которые превращают Stitch в управляемый из кодинг-агента слой: от генерации экранов до конвертации готового дизайна в React-компоненты.

Коллекция собрана по открытому стандарту Agent Skills и распространяется по лицензии Apache 2.0. Основной язык репозитория — TypeScript. На момент публикации у проекта около 8,4 тысячи звёзд и 1,1 тысячи форков, репозиторий создан в январе 2026 года.

Что внутри

Навыки разложены по трём плагинам: дизайн, сборка и утилиты.

Плагин stitch-design

Плагин stitch-build

Плагин stitch-utilities

Каждый навык оформлен одинаково: SKILL.md — это «Mission Control» для агента, scripts/ содержит исполняемые проверки и сетевые вызовы, resources/ — базу знаний с чеклистами и style guide, examples/ — синтаксически валидные эталоны.

Установка

Codex

Через CLI (флаги --sparse необязательны, они лишь ускоряют клонирование):

codex plugin marketplace add google-labs-code/stitch-skills --ref main \
  --sparse .agents/plugins \
  --sparse plugins/stitch-design \
  --sparse plugins/stitch-build \
  --sparse plugins/stitch-utilities

Тот же marketplace добавляется в интерфейсе: Settings → Plugin Marketplaces → Add, где указываются Source https://github.com/google-labs-code/stitch-skills, Git ref main и опционально список sparse-путей. После этого ставятся нужные плагины: stitch-design, stitch-build, stitch-utilities — в любом сочетании.

Claude Code и Cursor

# Claude Code — установка в текущий проект
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

# Cursor — установка в текущее рабочее пространство
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

Выборочная установка

Если нужны не все навыки сразу:

npx skills add google-labs-code/stitch-skills

Справочник по ключам доступен через npx plugins --help и npx skills --help.

Важный момент: у навыков Stitch часто есть взаимные зависимости, поэтому при выборочной установке нужно забирать и всё, что требуется выбранным навыкам.

OpenCode

OpenCode не использует ни npx plugins, ни npx skills, ни раскладку marketplace Codex/Claude — навыки и MCP-сервер Stitch ставятся вручную. Сначала копируются нужные папки навыков в обнаруживаемый путь:

mkdir -p .opencode/skills
cp -R plugins/stitch-design/skills/generate-design .opencode/skills/generate-design

OpenCode также подхватывает .claude/skills/ и .agents/skills/ (см. документацию по навыкам OpenCode). Требование к именованию: поле name во frontmatter должно быть в нижнем регистре через дефисы и совпадать с именем папки — навыки вида stitch::… придётся переименовать и в frontmatter, и в каталоге, иначе OpenCode их не загрузит. Дополнительные поля вроде allowed-tools просто игнорируются.

Затем в opencode.json проекта или в ~/.config/opencode/opencode.json добавляется удалённая запись MCP:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "stitch": {
      "type": "remote",
      "url": "YOUR_STITCH_MCP_URL",
      "enabled": true
    }
  }
}

Значение YOUR_STITCH_MCP_URL берётся из инструкции по настройке Stitch MCP; переменные окружения и учётные данные из того же гайда остаются в силе. Отдельно оговаривается, что имена инструментов внутри инструкций навыков могут отличаться от встроенных инструментов OpenCode (webfetch и bash вместо web_fetch и run_command) — при адаптации навыка под OpenCode стоит использовать именно местные имена.

Обязательное условие

Ни один из навыков не работает сам по себе: требуется настроенный и запущенный MCP-сервер Stitch в окружении агента. Сначала нужно пройти инструкцию по настройке Stitch MCP — зарегистрировать сервер, задать переменные окружения и учётные данные. Если ссылка в документации на stitch.withgoogle.com/docs уводит не туда, тот же путь надо открыть напрямую на этом же хосте, например https://stitch.withgoogle.com/docs/learn/device-types/.

Как это выглядит на практике

Навыки формулируют задачу обычным языком, без параметров и синтаксиса:

• «Загрузи фронтенд-код из /path/to/dashboard в проект Stitch с именем 'Dashboard-Migration-2026'»
• «Сделай вкладку для мобильного приложения про свидания и идеи для вечера»
• «Отредактируй экран логина: добавь чекбокс 'Запомнить меня' и поменяй цвет кнопки на синий»
• «Сгенерируй 3 варианта дизайна главного экрана с тёмной темой и плотной сеткой»
• «Проанализируй проект Stitch projects/123 и сгенерируй DESIGN.md»
• «Собери 5-страничный сайт-портфолио с помощью Stitch»

Ценность подхода — в замкнутом цикле «дизайн → код»: Stitch рисует экраны, навыки code-to-design и extract-design-md читают дизайн обратно, stitch-loop разворачивает это в многостраничный сайт, а react-components и react-native превращают результат в компоненты с сохранением дизайн-токенов и тем.

Как добавить свой навык

Новые навыки должны следовать той же структуре каталогов и открытому стандарту Agent Skills. Авторы репозитория выделяют три перспективных направления:

• Валидация — конвертация HTML из Stitch в другие UI-фреймворки с проверкой синтаксиса.
• Разделение данных — превращение статичного дизайн-контента во внешние файлы с моками.
• Генерация дизайнов — создание новых экранов в Stitch по заданному набору данных.

Статус

Проект не является официальным продуктом Google и не участвует в программе Google Open Source Software Vulnerability Rewards Program.