Design Md

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

Метаданные навыка


Источник	Встроенный (установлен по умолчанию)
Путь	`skills/creative/design-md`
Версия	`1.0.0`
Автор	VibeOS
Лицензия	MIT
Платформы	linux, macos, windows
Теги	`design`, `design-system`, `tokens`, `ui`, `accessibility`, `wcag`, `tailwind`, `dtcg`, `google`
Связанные навыки	`popular-web-designs`, `claude-design`, `excalidraw`, `architecture-diagram`

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

к сведению

Ниже приведено полное описание навыка, которое VibeOS загружает при его активации. Это те инструкции, которые видит агент, когда навык активен.

Навык DESIGN.md

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

YAML front matter — машиночитаемые токены дизайна (нормативные значения)
Markdown-тело — человекочитаемое обоснование, организованное в канонические разделы

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

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

Пользователь запрашивает файл DESIGN.md, токены дизайна или спецификацию дизайн-системы
Пользователь хочет обеспечить единообразие UI/бренда в нескольких проектах или инструментах
Пользователь вставляет существующий DESIGN.md и просит проверить, сравнить, экспортировать или расширить его
Пользователь хочет перенести гайдлайн в формат, понятный агентам
Пользователь хочет проверки контраста / доступности WCAG для своей цветовой палитры

Для чисто визуального вдохновения или примеров макетов используйте popular-web-designs. Для процесса и вкуса при создании разового 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` — единственное действие с высокой степенью акцента на странице...

Типы токенов

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

Белый список свойств компонента: backgroundColor, textColor, typography, rounded, padding, size, height, width. Варианты (hover, active, pressed) — это отдельные записи компонентов со связанными именами ключей (button-primary-hover), а не вложенные.

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

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

Обзор (псевдоним: Бренд и стиль)
Цвета
Типографика
Макет (псевдоним: Макет и отступы)
Высота и глубина (псевдоним: Высота)
Формы
Компоненты
Что делать и чего не делать

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

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

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

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

CLI — это @google/design.md (Node). Используйте 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

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

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

broken-ref (ошибка) — {colors.missing} указывает на несуществующий токен
duplicate-section (ошибка) — один и тот же ## Заголовок встречается дважды
invalid-color, invalid-dimension, invalid-typography (ошибка)
wcag-contrast (предупреждение/информация) — соотношение textColor и backgroundColor компонента относительно WCAG AA (4.5:1) и AAA (7:1)
unknown-component-property (предупреждение) — вне белого списка выше

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

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

Не вкладывайте варианты компонентов. button-primary.hover — неправильно; button-primary-hover как отдельный ключ — правильно.
Шестнадцатеричные цвета должны быть строками в кавычках. Иначе YAML «подавится» на # или странно обрежет значения типа #1A1C1E.
Отрицательные размеры тоже требуют кавычек. letterSpacing: -0.02em парсится как поток YAML — пишите letterSpacing: "-0.02em".
Порядок разделов обязателен. Если пользователь предоставил текст в произвольном порядке, переупорядочьте его в соответствии с каноническим списком перед сохранением.
version: alpha — текущая версия спецификации (по состоянию на апрель 2026 г.). Спецификация помечена как альфа — следите за критическими изменениями.
Ссылки на токены разрешаются по точечному пути. {colors.primary} работает; {primary} — нет.

Источник истины спецификации

Репозиторий: https://github.com/google-labs-code/design.md (Apache-2.0)
CLI: @google/design.md на npm
Лицензия сгенерированных файлов DESIGN.md: зависит от проекта пользователя; сама спецификация имеет лицензию Apache-2.0.

Метаданные навыка​

Справочник: полный SKILL.md​

Навык DESIGN.md

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

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

Типы токенов​

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

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

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

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

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

Источник истины спецификации​