stitch::manage-design-systemавтор Google Labs

Stitch Manage Design System Skill.

Skill для Claude Code и Codex для работы с брендом и дизайн-системами: создаёт, обновляет и применяет дизайн-системы в Stitch через инструменты MCP.

Бренд и дизайн-системы
Дизайн-система

Скачать OpenDesign Инструкция по использованию

google-labs-code/stitch-skills · plugins/stitch-design/skills/manage-design-system/SKILL.mdSKILL.md

--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata

Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 5 630 символов в полной версии

01 Что делает

Что делает Skill stitch::manage-design-system в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Управляет design system, которая выступает единым источником истины проекта в Stitch, используя MCP-инструменты. Она получает метаданные проекта и ассеты экранов (list_projects, list_screens, get_screen, read_url_content), синтезирует токены либо из существующих экранов с помощью skill design-md, либо из обычного описания, записывает .stitch/DESIGN.md, затем загружает markdown и вызывает create_design_system_from_design_md.

Жёсткая контрольная точка требует подтверждения пользователем отображаемого имени, цветов, шрифтов и скругления перед загрузкой чего-либо. После создания apply_design_system применяет токены к существующим экранам, используя только идентификаторы экземпляров экранов, а .stitch/metadata.json фиксирует проект, экраны и сводку по design system.

Что он выдаёт

Файл дизайна DESIGN.md, сгенерированный для проекта.
Файл .stitch/metadata.json, отслеживающий id проекта, название, все известные экраны и сводку по design system.
Токены дизайна уровня проекта, хранящиеся внутри Stitch, которые последующим промптам генерации не нужно повторять.

Смотрите пример запроса ↗

Как это работает

01
Получение ассетов проекта и экранов
list_projects находит целевой projectId, list_screens показывает репрезентативные экраны, такие как Home или Main Dashboard, а get_screen возвращает URL для скачивания скриншота и htmlCode, прежде чем HTML будет загружен.
02
Синтез design system
Существующие экраны интерпретируются с помощью skill design-md; совершенно новый проект или прямое описание обрабатывается путём предварительного отображения расплывчатых слов пользователя на точные значения.
03
Загрузка DESIGN.md и создание design system
Рекомендуемый скрипт-загрузчик кодирует markdown в base64 непосредственно в процессе и отправляет его на эндпоинт batchCreate проекта, минуя ограничения по выходным токенам; затем create_design_system_from_design_md выполняется с projectId и возвращённым экземпляром экрана.
04
Применение системы к существующим экранам
apply_design_system принимает projectId, assetId и список экземпляров экранов, чтобы уже созданные экраны переняли сохранённые токены.

02 Определите своё применение

Когда использовать skill stitch::manage-design-system

Используйте skill stitch::manage-design-system в Claude Code или Codex, когда задача связана с работой над брендом и дизайн-системой такого рода. Применимость и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

Проект, которому нужен единый авторитетный язык дизайна, объединяющий будущие экраны.
Новый проект Stitch без экранов, где пользователь предоставляет только письменное описание стиля.
Обратное восстановление design system из экранов, уже существующих в проекте.

Знайте границы

Любой DESIGN.md размером свыше примерно 5КБ не может пройти через прямой инструмент загрузки MCP и требует вместо этого использования скрипта.
Указания о том, как описывать элементы дизайна, отсутствуют в этом файле; это делегировано другому skill.
Полная схема объекта designSystem здесь не приводится; она находится в отдельном справочном файле.

Что предоставить

Идентификатор проекта StitchОпределяет, к какому проекту относится дизайн-система, и требуется скрипту загрузки и каждому последующему вызову MCP.
Репрезентативные экраныТакие экраны, как Home или Main Dashboard, служат визуальным источником при извлечении токенов из существующего проекта.
Описание стиля на обычном языкеИспользуется, когда экранов не существует, например короткая фраза, называющая палитру, скругление и шрифт.
Аргументы скрипта для загрузкиСкрипту загрузки нужны идентификатор проекта, путь к файлу, API-ключ и значение generated-by, передаваемые в командной строке.

03 Внутри скилла

Правила, которые skill stitch::manage-design-system даёт Claude Code и Codex

6 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Остановиться и получить подтверждение пользователя перед загрузкой
Skill должен приостановиться и запросить подтверждение перед загрузкой чего-либо в Stitch, показав отображаемое имя, ключевые цвета, шрифты и скругление, и ждать явного согласия.
Отправлять только id и sourceScreen при применении
selectedScreenInstances не содержит данных о позиции или размерах — только два идентифицирующих поля.
Исключать экземпляры design-system из списка целей
Экземпляры с типом DESIGN_SYSTEM_INSTANCE отфильтровываются; в apply_design_system передаются только настоящие экраны.
Указывать, кто сгенерировал markdown
Аргумент generated-by называет skill или инструмент, создавший DESIGN.md; если его не указать, используется фиксированная метка по умолчанию.
Создавать систему сразу после загрузки
create_design_system_from_design_md вызывается сразу после шага загрузки, с projectId и selectedScreenInstance.
Считывать идентификатор ассета из имени дизайн-системы
list_design_systems возвращает имя в форме assets/{assetId}; часть после assets/ — это assetId, используемый при применении.

04 Применение

Установите stitch::manage-design-system в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте stitch::manage-design-system в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::manage-design-system

Общая форма CLI skills для plugins/stitch-design/skills/manage-design-system/SKILL.md; репозиторий может документировать собственный путь.

Дайте Skill первую рабочую задачу по бренду и дизайн-системе

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Убедитесь, что загрузка действительно вернула оба идентификатора, прежде чем продолжать.
Проверьте, что и скрипт загрузки, и вызов create завершились, поскольку только тогда токены сохраняются на уровне проекта.
Получайте идентификаторы экземпляров экранов из get_project, а не угадывайте их, чтобы у apply_design_system были корректные цели.
Проверьте сгенерированный DESIGN.md на соответствие структуре, определённой в другом месте, перед его загрузкой.

В OpenDesign импортируйте stitch::manage-design-system по ссылке из его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Ветка main
Файл skill: plugins/stitch-design/skills/manage-design-system/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 0337446
License: Apache-2.0 Из LICENSE.
Звёзды репозитория: 8,304 Снимок GitHub от 2026-09-14 для всего репозитория google-labs-code/stitch-skills, который содержит 12 skills в этом каталоге. Это не рейтинг и не счётчик использования для stitch::manage-design-system.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

📥 Получение данныхЧетыре упорядоченных шага для извлечения проекта, экранов и HTML-артефактов через инструменты Stitch MCP.
🧠 Синтез из описанияКогда повторно использовать skill design-md и как превратить расплывчатые формулировки в конкретные значения.
📝 Структура выводаУказывает, что DESIGN.md следует структуре, заданной в skill design-md.
🚀 Создание или обновление дизайн-системы в StitchДвухшаговый процесс загрузки и создания с обязательной контрольной точкой подтверждения пользователем.
🎨 Применение дизайн-системы к экранамТочная форма JSON плюс три шага для сбора необходимых id.
📋 Обновление метаданных проектаЗапись .stitch/metadata.json с id проекта, заголовком, экранами и сводкой системы.
Справка по схемеОтсылает к reference/tool-schema.md для полной схемы объекта designSystem.
💡 РекомендацииПередаёт советы по описанию элементов дизайна skill design-md.

Собственное описание skill

«- Управляет дизайн-системами в Stitch с помощью инструментов MCP. Включает получение ассетов, создание/обновление дизайн-систем в Stitch и их применение к экранам.»

Описание из front-matter в SKILL.md. Полный файл составляет около 5 630 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill stitch::manage-design-system

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Загружается ли что-то в Stitch без моего согласия?

Нет. Есть явная контрольная точка: skill должен представить сводку создаваемой дизайн-системы, охватывающую отображаемое имя, ключевые цвета, шрифты и скругление, и дождаться одобрения перед загрузкой.

Что если мой DESIGN.md больше нескольких КБ?

Используйте рекомендуемый скрипт-загрузчик вместо прямого инструмента MCP. Он кодирует markdown в base64 непосредственно в процессе и отправляет его на endpoint batchCreate, что позволяет обойти ограничения на количество токенов вывода.

Откуда берутся id для применения дизайн-системы?

get_project возвращает screenInstances с их id и sourceScreen, снова отфильтрованными только для реальных экранов.

Может ли это работать с совершенно новым проектом без единого экрана?

Да. Когда экранов нет или пользователь даёт прямое описание, skill сопоставляет расплывчатые термины с точными значениями, выбирая конкретные hex-коды, семейства шрифтов и скругление, а затем создаёт DESIGN.md.

Stitch Manage Design System

Запустите stitch::manage-design-system на реальной задаче по работе над брендом и дизайн-системой.

Скачайте OpenDesign, импортируйте stitch::manage-design-system по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::manage-design-system