83.3K+Скачать
Перейти к руководству
design-mdавтор Google Labs

Design MD Skill.

Скилл для Claude Code и Codex для работы с брендом и дизайн-системами: анализирует проекты Stitch и составляет семантический DESIGN.md.

  • Бренд и дизайн-системы
  • DESIGN.md
Скачать OpenDesignИнструкция по использованию
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
Преамбула и заголовки разделов, прочитанные из исходного файла 2026-09-14 · 7 644 символа полностью

01 Что делает

Что делает skill design-md в Claude Code и Codex

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

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

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

Этот skill превращает существующий проект Stitch в DESIGN.md, который служит источником истины для промптинга Stitch при генерации новых экранов в том же дизайн-языке. Он предназначен для дизайнеров и разработчиков с доступом к Stitch MCP и хотя бы одним спроектированным экраном: skill определяет пространство имён MCP, разрешает ID проекта и экрана, получает объект экрана вместе с его HTML и скриншотом и читает designTheme проекта.

Затем он документирует визуальную тему и атмосферу, цвета как описательные названия с hex-кодами и функциональными ролями, типографику, стилизацию компонентов и принципы макета — на образном дизайн-языке, а не в виде необработанных технических значений.

Что он выдаёт

  • Дизайн-система из пяти частей, охватывающая визуальную тему и атмосферу, цветовую палитру с ролями, правила типографики, стилизацию компонентов для кнопок, карточек и полей ввода, а также принципы макета.
Смотрите пример запроса ↗

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

  1. 01
    Определение пространства имён MCP

    Запустите list_tools, чтобы найти префикс Stitch MCP, затем используйте этот префикс для каждого последующего вызова к серверу.

  2. 02
    Разрешение проекта и экрана

    Выведите список принадлежащих проектов, если Project ID не указан, затем выведите список экранов для числового ID проекта и найдите соответствие заголовку экрана, например Home или Landing Page.

  3. 03
    Получение объекта экрана и ассетов

    get_screen возвращает URL для скачивания скриншота и HTML, размеры экрана, тип устройства и designTheme; затем HTML скачивается и разбирается на классы Tailwind и паттерны компонентов.

  4. 04
    Считывание Design Theme уровня проекта

    Вызов get_project с полным путём projects/{id} возвращает объект designTheme с цветовым режимом, шрифтами, скруглением и пользовательскими цветами.

  5. 05
    Синтез семантической системы

    Извлеките design-токены из экрана, передайте общее настроение через выразительные прилагательные и переведите технические значения на описательный язык.

  6. 06
    Написать DESIGN.md

    Создайте DESIGN.md в директории проекта, точно следуя предписанному формату из пяти разделов.

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

Когда использовать скилл design-md

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

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

  • У вас уже есть проект Stitch, содержащий хотя бы один спроектированный экран, и вы хотите получить письменную дизайн-систему, извлечённую из него.
  • Вы хотите получить источник истины для промптинга Stitch при генерации новых экранов, соответствующих существующему языку дизайна.
  • Вы знаете проект только по названию или URL и хотите, чтобы skill нашёл Project ID среди ваших проектов.
  • Вы хотите, чтобы настроение было названо через выразительные прилагательные, а не через пересказ CSS.

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

  • Он не может работать без Stitch MCP Server и проекта Stitch, в котором уже есть спроектированный экран.
  • Он создаёт дизайн-систему в формате Markdown, а не новые экраны; DESIGN.md служит входными данными для последующего промптинга Stitch.
  • Непереведённый технический жаргон, например rounded-xl, прямо указан как ошибка, которую следует избегать.
  • Отказ от hex-кодов в пользу только описательных названий цветов назван недостатком.

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

  • Project ID (опционально)Если он не указан, skill выводит список принадлежащих вам проектов и сопоставляет целевой проект по названию или шаблону URL.
  • Screen ID (опционально)Если он не указан, skill просматривает названия экранов, чтобы определить нужный экран.
  • Stitch Effective Prompting GuideСправочник по языку и паттернам, которые должны использоваться в описании дизайна.

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

Правила, которые skill design-md задаёт Claude Code и Codex

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

  1. Только числовые ID

    Передавайте projectId и screenId как числовые ID, а не полный путь projects/{id}, за исключением вызова get_project, который принимает полное имя.

  2. Никогда не просто цвет

    Каждый цвет получает описательное название на естественном языке, точный hex-код в скобках и свою функциональную роль, например Deep Muted Teal-Navy (#294056) для основных действий.

  3. Переводите геометрию, а не цитируйте её

    Преобразуйте значения border-radius и разметки в физические описания: rounded-full становится «Пилюлевидная форма», rounded-lg — «Слегка скруглённые углы», rounded-none — «Острые, чёткие края».

  4. Запретите общие формулировки

    Избегайте терминов вроде «синий» или «скруглённый»; предпочитайте «глубокий океанический лазурный (#0077B6)» или «мягко скруглённые края».

  5. Соблюдайте заданную структуру

    Файл начинается с названия проекта и Project ID, затем идут пять пронумерованных разделов: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles.

  6. Объясняйте почему, а не только что

    Указывайте точные значения в скобках после описательной формулировки и всегда указывайте, для чего используется каждый элемент дизайна.

  7. Сохраняйте единство терминологии

    Используйте одну и ту же терминологию по всему документу, чтобы дизайн-система читалась как единая система.

04 Применение

Установите design-md в Claude Code или Codex

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

Добавьте design-md в Claude Code, Codex или ваш агент

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

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

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

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

Адаптируйте этот промт с вашим содержимым и ограничениями, затем запустите его в Claude Code или Codex.

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

Источник: пример SKILL.md (буквально).

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

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

  • Убедитесь, что формат точно соответствует заданной структуре DESIGN.md, а не является произвольной раскладкой.
  • Проверьте, что каждый код цвета указан верно и у каждого цвета есть как описательное название, так и hex-значение.
  • Убедитесь, что для каждого элемента указана его функциональная роль, а не только внешний вид.
  • Проверьте, что раздел об атмосфере конкретен, а не расплывчат, и что тени и отступы не были упущены.

В OpenDesign design-md входит в комплект: Plugins → Skills, выберите его в верхней панели.

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

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

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

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

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

Внутри SKILL.md

  1. ОбзорОпределяет DESIGN.md как источник истины для промптинга новых экранов Stitch.
  2. Предварительные требованияНужен доступ к Stitch MCP, спроектированный экран и руководство по промптингу.
  3. ЦельПовторяет, что Stitch читает визуальные описания, подтверждённые конкретными значениями цвета.
  4. Получение данных и работа с сетьюШесть шагов: namespace, project, screen, metadata, скачивание ассетов, project designTheme.
  5. Инструкции по анализу и синтезуИзвлечение идентичности, атмосферы, цветовой палитры, геометрии и уровней возвышения.
  6. Рекомендации по оформлению выводаТолько описательный язык, чистый Markdown, точные hex-коды, объяснение причин.
  7. Формат вывода (структура DESIGN.md)Шаблонный каркас Markdown из пяти разделов для буквального заполнения.
  8. Пример использованияРазбор на примере проекта Furniture Collection и его страницы Home.
  9. Лучшие практикиБудьте описательны, функциональны, последовательны, наглядны и точны.
  10. Советы для успехаСначала общая картина, затем поиск паттернов, семантические имена, документирование иерархии.
  11. Типичные ошибки, которых нужно избегатьНикакого непереведённого жаргона, никаких пропущенных кодов, никаких расплывчатых или неполных описаний.
Собственное описание skill
«Анализируйте проекты Stitch и создавайте семантическую дизайн-систему в файлах DESIGN.md»

Описание из заголовка SKILL.md. Полный файл около 7 644 символов. Читайте полный файл на GitHub.

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

Вопросы о skill design-md

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

Какие инструменты использует skill для обращения к Stitch?

Он объявляет инструменты stitch, а также Read, Write и web_fetch. На практике сначала выполняется list_tools, чтобы найти префикс MCP, затем вызываются list_projects, list_screens, get_screen и get_project с этим префиксом.

Что именно я получу в итоге?

Файл DESIGN.md, созданный в директории проекта, структурированный как название и ID проекта, за которыми следуют разделы о визуальной теме и атмосфере, цветовой палитре и ролях, правилах типографики, стилях компонентов и принципах компоновки. Он предназначен для повторного использования как источник истины при формулировании запросов к Stitch для новых экранов.

Заменяет ли это работу вручную?

Он делает извлечение и составление черновика за вас, но с конкретным требованием к словарю: цвета получают образные названия плюс точные hex-коды и функциональные роли, а значения радиуса становятся фразами типа «Скругление в виде таблетки» или «Резкие, прямоугольные края» вместо необработанных имён классов. Он также просит вас объяснить причину каждого решения.

Design MD

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

Skill design-md встроен в OpenDesign. Скачайте приложение, выберите skill в Plugins → Skills, вставьте промпт выше и прочтите план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md