Google открыла DESIGN.md: дизайн-система для AI-агентов

Google открыла DESIGN.md: единый язык дизайна для AI-агентов

Google выпустила формат DESIGN.md из своего AI-инструмента Stitch как открытый исходный код — файл хранит правила дизайна в машиночитаемом виде и работает сразу на нескольких платформах. Изначально формат разрабатывался как внутренний движок для Google Labs Stitch, а теперь стал доступен всему сообществу разработчиков под лицензией Apache 2.0. По мере того как AI-агенты — Claude Code, Cursor, GitHub Copilot — становятся центральными участниками разработки, потребность в «универсальном контракте» между дизайном и кодом растёт. DESIGN.md закрывает именно этот пробел.

Как устроен формат

Файл DESIGN.md объединяет машиночитаемые design tokens (токены дизайна) в YAML front matter с человекочитаемым обоснованием дизайна в виде markdown-прозы. Токены дают агентам точные значения, а текстовая часть объясняет, почему эти значения именно такие и как их применять.

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

Пример минимального DESIGN.md-файла:

---
name: Heritage
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
  body-md:
    fontFamily: Public Sans
    fontSize: 1rem
rounded:
  sm: 4px
  md: 8px
spacing:
  sm: 8px
  md: 16px
---

## Overview
Architectural Minimalism meets Journalistic Gravitas.

## Colors
- **Primary (#1A1C1E):** Deep ink for headlines.
- **Tertiary (#B8422E):** "Boston Clay" — accent for interactions.

Агент, прочитавший такой файл, создаст интерфейс с тёмными заголовками на шрифте Public Sans, тёплым известковым фоном и кнопками в цвете Boston Clay.

Структура файла

graph TD
    A[DESIGN.md] --> B[YAML front matter]
    A --> C[Markdown body]
    B --> D[Токены: цвета, типографика,\nотступы, скругления, компоненты]
    C --> E[Обоснование: почему именно\nэти значения и как их применять]
    D --> F[AI-агент генерирует UI]
    E --> F

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

components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-tertiary}"
    rounded: "{rounded.sm}"
    padding: 12px
  button-primary-hover:
    backgroundColor: "{colors.tertiary-container}"

CLI-инструменты

Google объявила об открытии исходного кода @google/design.md — agent-first CLI и линтера для формата DESIGN.md. Инструмент закрывает разрыв между дизайн-системами и кодом, предоставляя формальный, машиночитаемый способ валидации и компиляции токенов.

CLI доступен через npm:

npm install @google/design.md
# или напрямую:
npx @google/design.md lint DESIGN.md

Основные команды

Линтер валидирует DESIGN.md по спецификации, проверяет битые ссылки на токены, контрастные соотношения по стандарту WCAG и выдаёт структурированный JSON, с которым агент может немедленно работать.

Аналогия с CLAUDE.md и AGENTS.md

Для тех, кто знаком с паттернами CLAUDE.md или AGENTS.md для передачи инструкций кодирующим агентам, DESIGN.md — ровно то же самое, но для дизайна.

Ваш README уже «разговаривает» с агентами. Пришло время дизайн-системе делать то же самое.

Проект распространяется под лицензией Apache 2.0, принимает внешние вклады.

Значение для индустрии

Google официально перевела формат DESIGN.md в открытый исходный код — стандартизированную спецификацию, которая превращает дизайн-системы в нечто «агентно-нативное» и интероперабельное.

Решение Google открыть DESIGN.md сигнализирует о движении к общеотраслевой стандартизации: разместив спецификацию на GitHub, компания приглашает сообщество предотвратить фрагментацию стандартов дизайна в AI-рабочих процессах.

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