🏠 Главная › user guide › creative design md

{/ Эта страница автоматически создается на основе файла SKILL.md навыка с помощью сайта site/scripts/generate-skill-docs.py. Редактируйте исходный код SKILL.md, а не эту страницу. /}

Дизайн Мд

Создание/проверка/экспорт файлов характеристик дизайн-токенов Google DESIGN.md.

Метаданные навыки
Источник Встроенный (установлен по умолчанию)
Путь skills/creative/design-md
Версия 1.0.0
Автор Агент Гермес
Лицензия Массачусетский технологический институт
Платформы Linux, MacOS, Windows
Теги design, design-system, tokens, ui, accessibility, wcag, tailwind, dtcg, google
Связанные навыки popular-web-designs, claude-design, excalidraw, архитектурная диаграмма

Справочник: полный SKILL.md:::информация

Ниже приведено полное описание навыков, которые Hermes загружает при его активации. Агент увидит эту инструкцию, когда навыки активны.

Навык DESIGN.md

DESIGN.md — это открытая спецификация Google (Apache-2.0, google-labs-code/design.md) для опишите визуальную идентичность для кодирующих агентов. Один файл решения:

Токены дают технические значения. Проза моим агентам почему значения этих существ и как их применять. CLI (npx @google/design.md) вроде модели + контрастность WCAG, сравнивает версию регрессии и экспортирует в Tailwind или W3C DTCG JSON.

Когда использовать этот навык

Для чисто визуального вдохновения или примеров макетов используйте вместо этого «популярные веб-дизайны». Для процесса и вкуса при разработке единого HTML-артефакта с нуля (прототип, презентация, кредитование, лабораторные компоненты) викор claude-design. Этот навык предназначен для формального файла характеристики.

Анатомия файл

---
version: alpha
name: Heritage
description: Архитектурный минимализм встречает журналистскую весомость.
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: Public Sans
    fontSize: 1rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#FFFFFF"
    rounded: "{rounded.sm}"
    padding: 12px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
---

## Обзор

Архитектурный минимализм встречает журналистскую весомость...

## Цвета

- **Primary (#1A1C1E):** Глубокий чернильный для заголовков и основного текста.
- **Tertiary (#B8422E):** "Бостонская глина" — единственный драйвер взаимодействия.

## Типографика

Public Sans для всего, кроме маленьких заглавных меток...

## Компоненты

`button-primary` — единственное действие с высокой степенью акцента на странице...

Типы токенов

Тип Формат Пример
Цвет # + шестнадцатеричный (sRGB) "#1A1C1E"
Размер число + единица (px, em, rem) 48px, -0.02em
Ссылка на токен {path.to.token} {colors.primary}
Типографика объект с fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, fontFeature, fontVariation см. выше

Компонент «Белый список свойств»: «backgroundColor», «textColor», «typography», «округлено», «отступ», «размер», «высота», «ширина». Варианты (наведение, активный, нажата) — это отдельные записи компонентов с регистри именами ключей (button-primary-hover), не вложенные.

Канонический порядок разделов

Разделы необязательны, но присутствие ДОЛЖНЫ быть в указанном порядке. Повторяющиеся заголовки привести к отклонению файла.

  1. Обзор (псевдоним: Бренд и стиль)
  2. Цвета
  3. Типографика
  4. Сетка (псевдоним: Сетка и отступы)
  5. Высота и глубина (псевдоним: Высота)
  6. Фигуры
  7. Компоненты
  8. Что делать и чего не делать

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

Рабочий процесс: создание нового DESIGN.md

  1. Спросите пользователя (или вы укажите) о бренде, акцентном цвете и направлении. типографики. Если он включил сайт, изображение или настроение, переведите это в сформируйте токен, как показано выше.
  2. Напишите DESIGN.md в корень своего проекта с помощью write_file. Всегда включите name: и colors:; остальные разделы необязательны, но приветствуются.
  3. Используйте ссылки на токены ({colors.primary}) в разделе comComponents: вместо повторного ввода шестнадцатеричных значений. Это сохраняет палитру как единый источник.
  4. Проверьте его (см. ниже). Исправить все сломанные ссылки или нарушения WCAG перед возвратом.
  5. Если у пользователя есть существующий проект, также запишите экспорт в Tailwind или DTCG. рядом с файлом (tailwind.theme.json, tokens.json).

Рабочий процесс: проверка/сравнение/экспорт

CLI — @google/design.md (узел). Используйте npx — глобальная установка не требуется.

# Проверка структуры + ссылок на токены + WCAG контраста
npx -y @google/design.md lint DESIGN.md

# Сравнение двух версий, ошибка при регрессии (exit 1 = регрессия)
npx -y @google/design.md diff DESIGN.md DESIGN-v2.md

# Экспорт в Tailwind theme JSON
npx -y @google/design.md export --format tailwind DESIGN.md > tailwind.theme.json

# Экспорт в W3C DTCG (Design Tokens Format Module) JSON
npx -y @google/design.md export --format dtcg DESIGN.md > tokens.json

# Вывод самой спецификации — полезно при вставке в промпт агента
npx -y @google/design.md spec --rules-only --format json

Все команды принимают - для стандартного ввода. lint возвращает выход 1 при ошибках. Используйте поставьте флаг --format json и парсите вывод, если нужно структурированно сообщить результаты.

Справочник правил проверки (что ловят 7 правил)

Когда пользователь заботится о доступности, это явно указано в ее резюме — результаты WCAG являются основной причиной использования CLI.

Подводные камни

Источник характеристик