Знание
DESIGN.md — дизайн-система в одном файле для AI-кодинга DESIGN.md — формат от Google Stitch: markdown-файл с правилами дизайн-системы, который AI-агенты читают для генерации консистентного UI. Структура, примеры, коллекция готовых файло…
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 для своего проекта и посмотрите, как изменится качество генерации.
По теме
- Статья: Как мы переделывали главную pimenov.ai: от оценки Comet до нового визуального языка
- Блог: Сделали pimenov.ai agent-ready: что реально внедрили и зачем
- База знаний: DESIGN.md — дизайн-система в одном файле для AI-кодинга
Если вы строите продукт с AI-кодингом и хотите, чтобы агенты наконец перестали «додумывать» ваш дизайн — давайте разберём, как встроить DESIGN.md в ваш рабочий процесс.