# DESIGN.md: ваш дизайн-код теперь понимает даже недизайнерский ИИ

- Site: VeraPoint News
- Section: Инструменты
- Date: 2026-06-25
- Canonical: https://verapointmedia.com/tools/google-labs-code-design-md/
- Markdown: https://verapointmedia.com/tools/google-labs-code-design-md.md
- Summary: Google предложил единый формат файла DESIGN.md, который объясняет агенту визуальный стиль проекта. Токены для машины и пояснения для человека в одном документе.
- SEO title: DESIGN.md: браузерная отладка и проверка сайтов AI-агентом
- SEO description: Google предложил единый формат файла DESIGN.md, который объясняет агенту визуальный стиль проекта. Токены для машины и пояснения для человека в одном докум
- Target queries: DESIGN.md; DESIGN.md github; что такое DESIGN.md; как использовать DESIGN.md
- Tags: #designmd #agents #google #design-system #devtools #ui
- Image: https://verapointmedia.com/static/content-assets/tools/google-labs-code-design-md/cover.webp

## Sources

- https://github.com/google-labs-code/design.md
- https://stitch.withgoogle.com/docs/design-md/specification
- https://www.npmjs.com/package/@google/design.md
- https://registry.npmjs.org/`

---

Вы когда-нибудь просили болталку написать код кнопки, а получали серый прямоугольник с синей обводкой в стиле Windows 95? И тратили потом час, объясняя: «Нет, шрифт такой, отступ такой, цвет вообще не отсюда». Знакомо. ИИ-агенты отлично решают алгоритмические задачи, но в вопросах вкуса они слепы как кроты. У них нет «глаза», они не чувствуют вайб вашего продукта.

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

Репозиторий лежит на [github.com/google-labs-code/design.md](https://github.com/google-labs-code/design.md), набрал уже больше 17 тысяч звёзд, и это тот случай, когда хайп оправдан.

Кому это нужно читать прямо сейчас? Разработчикам, которые гоняют vibe-кодинг с агентом и устали от визуальной каши; тимлидам, которые хотят зафиксировать дизайн-стандарт в коде без бесконечных встреч и Figma-экспорта; продакт-менеджерам, которые хотят понимать, почему инструмент выглядит не так, как в макете. Если вы руками верстаете лендинги без агентов и без дизайн-систем — этот инструмент вам пока не пригодится.

## Если просто

Представьте, что у вас есть файл `DESIGN.md`. В его верхней части — аккуратный YAML-блок с сухими машинными цифрами: шестнадцатеричные коды цветов, названия шрифтов, размеры отступов, радиусы скруглений. Это дизайн-токены (я проверяла — термин из мира дизайн-систем, просто формальные переменные для цветов и шрифтов).

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

Дальше вы запускаете агента. Он читает токены — получает точные пиксели. Читает прозу — получает контекст. И на выходе генерирует интерфейс, который выглядит осмысленно. Не потому что угадал, а потому что вы ему объяснили.

## Что это решает

Главная боль здесь — разрыв между дизайном и кодом в мире, где код всё чаще пишут не люди, а LLM. Дизайн-системы живут в Figma, код — в репозитории, а агент, который между ними курсирует, не понимает ни того, ни другого. Ему нужен переводчик.

DESIGN.md выступает именно переводчиком. Это не замена вашей дизайн-системе и не конкурент CSS-переменным. Это прокладка между человеком, который знает, как должно выглядеть, и машиной, которая должна это нарисовать. И прокладка эта достаточно умна, чтобы не требовать от разработчика знаний в области типографики.

Файл валидируется спецкомандой `npx @google/design.md lint`, которая проверит структуру, ссылки на токены и даже контрастность по стандарту WCAG AA. То есть слепой агент ещё и не нарушит accessibility, потому что линтер ему не даст.

## Как попробовать

У вас должен быть Node.js. Открываете терминал и выполняете:

```bash
npx @google/design.md lint ваш-файл-DESIGN.md
```

Если файла ещё нет — не беда. Создайте его по спецификации, заполните верхушку YAML-токенами (хотя бы пару цветов и шрифтов) и напишите ниже пару абзацев о философии дизайна. Линтер сразу скажет, где вы ошиблись в структуре и не сломана ли логика.

Для Windows есть нюанс: из-за точки в названии пакета PowerShell может запутаться. Разработчики предусмотрели алиас `designmd` — используйте его, и всё заработает.

Хотите сравнить две версии дизайн-системы? Есть команда `diff`. Хотите вытащить токены в конфиг для Tailwind v3 или v4? Пожалуйста — команда `export` с флагом `--format json-tailwind` или `--format css-tailwind`. Хотите выгрузить в формат W3C Design Tokens (DTCTG)? Тоже есть. Инструмент заточен на то, чтобы жить в пайплайне, а не быть просто красивой спецификацией.

## 3 сценария с примерами

**Сценарий 1. Вы просите агента написать карточку товара.**
У вас есть DESIGN.md с описанными цветами, шрифтом Public Sans и скруглениями в 4px. Вы пишете в промпте: «Создай компонент ProductCard по стилям из DESIGN.md». Агент читает файл, видит, что фон — это `neutral` (тёплый известняк), заголовок — `primary` (глубокие чернила), кнопка — `tertiary` («бостонская глина») со скруглением `sm`. И выдаёт вёрстку, которая выглядит как часть вашего продукта, а не как чужеродный вкладыш.

**Сценарий 2. Дизайнер обновил палитру, а вы боитесь всё сломать.**
Дизайнер прислал новый макет, вы обновили токены в DESIGN.md и теперь хотите понять, не уехало ли что-то критичное. Запускаете `npx @google/design.md diff DESIGN.md DESIGN-old.md` и получаете JSON с перечнем изменений: что добавилось, что удалилось, что изменилось. Если новых ошибок нет — `regression: false`, можно выдыхать и коммитить.

**Сценарий 3. Настроили дизайн-систему один раз и экспортируете куда угодно.**
Вы описали всё в DESIGN.md, а теперь вам нужно собрать тему для Tailwind. Не руками же переписывать. Запускаете `npx @google/design.md export --format json-tailwind DESIGN.md` — и получаете готовый объект для `theme.extend`. Одна команда, никакой ручной конвертации и никаких потерянных по дороге пикселей.

## Где можно застрять

Первое: спецификация пока в статусе альфа. Секции могут меняться, обратная совместимость не гарантирована. Второе: инструмент проверяет структуру и токены, но не проверяет смысл вашей прозы. Если вы напишете «дизайн должен вызывать чувство вторника», линтер это пропустит, а агент попытается интерпретировать. Получится ли у него — большой вопрос.

Третье: на Windows поведение команд может отличаться из-за ассоциации `.md` с редактором. Разработчики честно это описали и дали workaround, но осадочек остаётся. Четвёртое: это не дизайн-инструмент в привычном смысле. Вы не нарисуете в нём макет и не замените Figma. Это прокладка, и работает она только в связке с агентом, понимающим этот формат.

## Кому это нужно

Командам, которые активно используют AI-агентов в разработке интерфейсов. Разработчикам-одиночкам, которые генерируют UI через Copilot, Cursor или Claude и устали получать визуально несвязанные куски. Тимлидам, которые хотят зафиксировать дизайн-стандарты в кодовой базе и проверять их в CI.

## Кому это не нужно

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

## Вердикт Веры

Это редкий случай, когда гугловцы придумали не просто спецификацию, а недостающий пазл в AI-разработке. Пока агенты не умеют смотреть на макет и понимать замысел дизайнера, им нужен текстовый мостик. DESIGN.md — именно такой мостик. Он не пытается заменить дизайн-систему, не лезет в Figma и не учит разработчика типографике. Он просто даёт агенту контекст, которого тому отчаянно не хватало.

Я бы рекомендовала завести такой файл любой команде, которая уже пробовала генерировать вёрстку через агента и сталкивалась с тем, что результат визуально не попадает в продукт. Это не серебряная пуля, но это та самая мелочь, которая превращает «сгенерировал и переписал» в «сгенерировал и принял».

## Что читать дальше

- [Все материалы про AI-агентов](/topics/ai-agents/)
- [Что такое AI-агент простыми словами](https://verapointmedia.com/guides/chto-takoe-ai-agent-prostymi-slovami/)
- [Все материалы про AI-инструменты](/topics/ai-tools/)
- [Как отличить рабочий AI-инструмент от красивой демки](https://verapointmedia.com/guides/kak-otlichit-rabochiy-ai-instrument-ot-krasivoy-demki/)

## Материалы

- [google-labs-code/design.md] google-labs-code/design.md: https://github.com/google-labs-code/design.md
- [stitch.withgoogle.com] supporting context: https://stitch.withgoogle.com/docs/design-md/specification
- [npmjs.com] supporting context: https://www.npmjs.com/package/@google/design.md
- [registry.npmjs.org] supporting context: https://registry.npmjs.org/`