Специфікація DESIGN.md для передачі дизайн-систем ШІ-агентам
Нова специфікація формату DESIGN.md (опублікована як @google/design.md) поєднує машиночитні дизайн-токени в YAML з описом у форматі markdown. Вона надає кодуючим ШІ-агентам структуроване розуміння дизайн-системи, допомагаючи їм узгоджено застосовувати палітри кольорів, типографіку та стандарти контрасту.
Вплив: Середній
Чому це важливо
ШІ-агенти часто пишуть код і створюють інтерфейси, але без структурованих візуальних обмежень вони можуть легко порушувати стандарти бренду та контрастності.
TL;DR
- 01DESIGN.md усуває розрив між машиночитними дизайн-токенами та зрозумілими людині інструкціями для ШІ-агентів.
- 02Формат використовує YAML front matter для базових змінних дизайну та стандартний Markdown для контекстних пояснень.
- 03Особливості Windows потребують використання аліасу `designmd` без крапки через конфлікт асоціацій файлів `.md`.
- 04Підтримує кілька форматів експорту, включаючи Tailwind v3 (через json-tailwind/tailwind) та Tailwind v4 (через css-tailwind).
Ключові факти
- Версія
- alpha
- Підтримувані формати експорту
- json-tailwind, css-tailwind, tailwind, dtcg
Структура файлу DESIGN.md
Угорі файлу метадані YAML визначають змінні дизайну в ключах colors, typography та spacing:
---
colors:
primary: "#1A1C1E"
secondary: "#6C7278"
tertiary: "#B8422E"
neutral: "#F7F5F2"
---Нижче у форматі стандартного markdown йдуть розділи (наприклад, ## Palette та ## Typography), які пояснюють логіку використання цих змінних.
Особливості роботи на Windows
Через конфлікти розширення .md у Windows, де файли асоціюються з текстовими редакторами, розробникам рекомендується запускати лінтер через спеціальний аліас designmd:
npx -p @google/design.md designmd lint DESIGN.mdКомпіляція для Tailwind CSS
Консольний інструмент дозволяє трансформувати ваші токени в робочий код. Для експорту змінних під Tailwind v4 виконайте:
npx @google/design.md export --format css-tailwind DESIGN.md > theme.cssЦе створює автоматизований конвеєр від високорівневих вимог ШІ-агенту до реальних стилів збірки.
Спробуй за 2 хвилини
version: "alpha"
colors:
primary: "#1A1C1E"
secondary: "#6C7278"
tertiary: "#B8422E"
neutral: "#F7F5F2"yaml
✓ Коли використовувати
- При підключенні ШІ-агентів до розробки або підтримки проєкту зі строгими вимогами до дизайну бренду
- Коли необхідно експортувати токени дизайну безпосередньо у формати Tailwind CSS або DTCG
✕ Коли НЕ варто
- Для проєктів без візуальних компонентів або вимог до дизайну інтерфейсу
- Якщо ви не плануєте використовувати кодуючих ШІ-агентів або автоматичну компіляцію токенів дизайну
Що зробити сьогодні
- Встановіть CLI DESIGN.md через npm-пакет `@google/design.md`
- Створіть файл DESIGN.md із метаданими YAML, що вказують вашу палітру кольорів та типографіку
- Перевірте специфікацію дизайну за допомогою `npx @google/design.md lint DESIGN.md` (або `designmd` у Windows)
Джерела