pimenov.ai

Google открыл DESIGN.md для всех — теперь AI-агенты перестанут угадывать ваши цвета

Google Labs выложил в открытый доступ спецификацию DESIGN.md — формат, который объясняет AI-агентам дизайн-систему проекта. Разбираюсь, что внутри и почему это важно.

Опубликовано Обновлено
ИнструментыИИ-агенты

Если вы хоть раз просили AI-агента сверстать что-то «по макету», вы знаете этот момент: результат вроде похож, но цвет не тот, шрифт другой, а отступы взяты с потолка. Агент не виноват — ему просто негде прочитать ваши дизайн-правила. Google Labs решил это исправить и выложил в открытый доступ спецификацию DESIGN.md.

Один файл вместо тысячи объяснений

DESIGN.md — это формат описания визуальной идентичности проекта, понятный и человеку, и машине. Внутри — два слоя. В YAML-шапке лежат конкретные значения: цвета в hex, шрифтовые шкалы, отступы, радиусы скруглений. Ниже — обычный Markdown с объяснениями: почему именно этот оттенок, что передаёт типографская иерархия, как элементы должны сочетаться.

Токены дают агенту точные цифры. Проза объясняет контекст. Вместе — полноценная дизайн-система в одном файле, который можно положить в корень репозитория и забыть про бесконечные правки «не тот синий».

Что нового в открытой спецификации

DESIGN.md появился внутри Stitch — AI-дизайн-инструмента от Google Labs. Но теперь формат стал кроссплатформенным. Ключевые обновления:

  • Tokens Section — секция, где дизайн-токены и их описания на естественном языке живут в одном файле. Агент видит и значение #3A7CA5, и пояснение «основной акцентный цвет для интерактивных элементов».
  • Components Section (в разработке) — экспериментальный раздел для описания компонентов. Google собирает обратную связь, прежде чем закрепить формат.
  • CLI-валидатор — консольный инструмент (npx @google/design.md lint DESIGN.md), который проверяет ссылки между токенами, ловит пропущенные основные цвета и валидирует контрастность по WCAG. Плюс команды diff (сравнение двух файлов) и export (конвертация в Tailwind-конфиг или формат W3C DTCG).

Почему это не «ещё один стандарт»

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

Формат открыт, спецификация на GitHub под Apache-2.0. Любой инструмент — Cursor, Windsurf, ваш собственный агент — может его поддержать. По сути, это попытка создать общий язык между дизайнерами и AI-агентами, и первая, которая выглядит достаточно простой, чтобы реально прижиться.

Спецификация пока в альфе, но уже рабочая. Если вы кодите с AI — стоит попробовать: создайте DESIGN.md для своего проекта и посмотрите, как изменится качество генерации.

По теме

Если вы строите продукт с AI-кодингом и хотите, чтобы агенты наконец перестали «додумывать» ваш дизайн — давайте разберём, как встроить DESIGN.md в ваш рабочий процесс.

Если хотите разобрать свою задачу — напишите мне

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

Напишите мне в Телеграм Мой Телеграм канал

Обычно хватает 2–3 сообщений, чтобы понять, могу ли я здесь реально помочь и в каком формате лучше двигаться дальше.

Связанные материалы