{"title":"DESIGN.md: ваш дизайн-код теперь понимает даже недизайнерский ИИ","url":"https://verapointmedia.com/tools/google-labs-code-design-md/","markdownUrl":"https://verapointmedia.com/tools/google-labs-code-design-md.md","language":"ru","category":"tools","publishedAt":"2026-06-25T08:30:09.000Z","updatedAt":"2026-06-25T08:30:09.000Z","references":["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/`"],"rights":"Public user-requested reading, summarization and citation allowed. Model training requires separate permission.","contentMarkdown":"# DESIGN.md: ваш дизайн-код теперь понимает даже недизайнерский ИИ\n\n- Site: VeraPoint News\n- Section: Инструменты\n- Date: 2026-06-25\n- Canonical: https://verapointmedia.com/tools/google-labs-code-design-md/\n- Markdown: https://verapointmedia.com/tools/google-labs-code-design-md.md\n- Summary: Google предложил единый формат файла DESIGN.md, который объясняет агенту визуальный стиль проекта. Токены для машины и пояснения для человека в одном документе.\n- SEO title: DESIGN.md: браузерная отладка и проверка сайтов AI-агентом\n- SEO description: Google предложил единый формат файла DESIGN.md, который объясняет агенту визуальный стиль проекта. Токены для машины и пояснения для человека в одном докум\n- Target queries: DESIGN.md; DESIGN.md github; что такое DESIGN.md; как использовать DESIGN.md\n- Tags: #designmd #agents #google #design-system #devtools #ui\n- Image: https://verapointmedia.com/static/content-assets/tools/google-labs-code-design-md/cover.webp\n\n## Sources\n\n- https://github.com/google-labs-code/design.md\n- https://stitch.withgoogle.com/docs/design-md/specification\n- https://www.npmjs.com/package/@google/design.md\n- https://registry.npmjs.org/`\n\n---\n\nВы когда-нибудь просили болталку написать код кнопки, а получали серый прямоугольник с синей обводкой в стиле Windows 95? И тратили потом час, объясняя: «Нет, шрифт такой, отступ такой, цвет вообще не отсюда». Знакомо. ИИ-агенты отлично решают алгоритмические задачи, но в вопросах вкуса они слепы как кроты. У них нет «глаза», они не чувствуют вайб вашего продукта.\n\n**DESIGN.md** — это попытка Google дать этим слепцам поводыря. Это спецификация одного-единственного файла, который вы кладёте в корень проекта, а любой подключённый к репозиторию агент считывает его и вдруг начинает генерировать интерфейсы, которые не стыдно показать людям. Не «какую-то кнопку», а именно вашу кнопку.\n\nРепозиторий лежит на [github.com/google-labs-code/design.md](https://github.com/google-labs-code/design.md), набрал уже больше 17 тысяч звёзд, и это тот случай, когда хайп оправдан.\n\nКому это нужно читать прямо сейчас? Разработчикам, которые гоняют vibe-кодинг с агентом и устали от визуальной каши; тимлидам, которые хотят зафиксировать дизайн-стандарт в коде без бесконечных встреч и Figma-экспорта; продакт-менеджерам, которые хотят понимать, почему инструмент выглядит не так, как в макете. Если вы руками верстаете лендинги без агентов и без дизайн-систем — этот инструмент вам пока не пригодится.\n\n## Если просто\n\nПредставьте, что у вас есть файл `DESIGN.md`. В его верхней части — аккуратный YAML-блок с сухими машинными цифрами: шестнадцатеричные коды цветов, названия шрифтов, размеры отступов, радиусы скруглений. Это дизайн-токены (я проверяла — термин из мира дизайн-систем, просто формальные переменные для цветов и шрифтов).\n\nНиже — человеческий текст в Markdown. Вы объясняете агенту не просто «какой цвет», а почему он такой: что палитра стремится к музейному минимализму, что акцентный рыжий — это отсылка к бостонской глине, что фон должен отдавать теплотой известняка.\n\nДальше вы запускаете агента. Он читает токены — получает точные пиксели. Читает прозу — получает контекст. И на выходе генерирует интерфейс, который выглядит осмысленно. Не потому что угадал, а потому что вы ему объяснили.\n\n## Что это решает\n\nГлавная боль здесь — разрыв между дизайном и кодом в мире, где код всё чаще пишут не люди, а LLM. Дизайн-системы живут в Figma, код — в репозитории, а агент, который между ними курсирует, не понимает ни того, ни другого. Ему нужен переводчик.\n\nDESIGN.md выступает именно переводчиком. Это не замена вашей дизайн-системе и не конкурент CSS-переменным. Это прокладка между человеком, который знает, как должно выглядеть, и машиной, которая должна это нарисовать. И прокладка эта достаточно умна, чтобы не требовать от разработчика знаний в области типографики.\n\nФайл валидируется спецкомандой `npx @google/design.md lint`, которая проверит структуру, ссылки на токены и даже контрастность по стандарту WCAG AA. То есть слепой агент ещё и не нарушит accessibility, потому что линтер ему не даст.\n\n## Как попробовать\n\nУ вас должен быть Node.js. Открываете терминал и выполняете:\n\n```bash\nnpx @google/design.md lint ваш-файл-DESIGN.md\n```\n\nЕсли файла ещё нет — не беда. Создайте его по спецификации, заполните верхушку YAML-токенами (хотя бы пару цветов и шрифтов) и напишите ниже пару абзацев о философии дизайна. Линтер сразу скажет, где вы ошиблись в структуре и не сломана ли логика.\n\nДля Windows есть нюанс: из-за точки в названии пакета PowerShell может запутаться. Разработчики предусмотрели алиас `designmd` — используйте его, и всё заработает.\n\nХотите сравнить две версии дизайн-системы? Есть команда `diff`. Хотите вытащить токены в конфиг для Tailwind v3 или v4? Пожалуйста — команда `export` с флагом `--format json-tailwind` или `--format css-tailwind`. Хотите выгрузить в формат W3C Design Tokens (DTCTG)? Тоже есть. Инструмент заточен на то, чтобы жить в пайплайне, а не быть просто красивой спецификацией.\n\n## 3 сценария с примерами\n\n**Сценарий 1. Вы просите агента написать карточку товара.**\nУ вас есть DESIGN.md с описанными цветами, шрифтом Public Sans и скруглениями в 4px. Вы пишете в промпте: «Создай компонент ProductCard по стилям из DESIGN.md». Агент читает файл, видит, что фон — это `neutral` (тёплый известняк), заголовок — `primary` (глубокие чернила), кнопка — `tertiary` («бостонская глина») со скруглением `sm`. И выдаёт вёрстку, которая выглядит как часть вашего продукта, а не как чужеродный вкладыш.\n\n**Сценарий 2. Дизайнер обновил палитру, а вы боитесь всё сломать.**\nДизайнер прислал новый макет, вы обновили токены в DESIGN.md и теперь хотите понять, не уехало ли что-то критичное. Запускаете `npx @google/design.md diff DESIGN.md DESIGN-old.md` и получаете JSON с перечнем изменений: что добавилось, что удалилось, что изменилось. Если новых ошибок нет — `regression: false`, можно выдыхать и коммитить.\n\n**Сценарий 3. Настроили дизайн-систему один раз и экспортируете куда угодно.**\nВы описали всё в DESIGN.md, а теперь вам нужно собрать тему для Tailwind. Не руками же переписывать. Запускаете `npx @google/design.md export --format json-tailwind DESIGN.md` — и получаете готовый объект для `theme.extend`. Одна команда, никакой ручной конвертации и никаких потерянных по дороге пикселей.\n\n## Где можно застрять\n\nПервое: спецификация пока в статусе альфа. Секции могут меняться, обратная совместимость не гарантирована. Второе: инструмент проверяет структуру и токены, но не проверяет смысл вашей прозы. Если вы напишете «дизайн должен вызывать чувство вторника», линтер это пропустит, а агент попытается интерпретировать. Получится ли у него — большой вопрос.\n\nТретье: на Windows поведение команд может отличаться из-за ассоциации `.md` с редактором. Разработчики честно это описали и дали workaround, но осадочек остаётся. Четвёртое: это не дизайн-инструмент в привычном смысле. Вы не нарисуете в нём макет и не замените Figma. Это прокладка, и работает она только в связке с агентом, понимающим этот формат.\n\n## Кому это нужно\n\nКомандам, которые активно используют AI-агентов в разработке интерфейсов. Разработчикам-одиночкам, которые генерируют UI через Copilot, Cursor или Claude и устали получать визуально несвязанные куски. Тимлидам, которые хотят зафиксировать дизайн-стандарты в кодовой базе и проверять их в CI.\n\n## Кому это не нужно\n\nЕсли вы не пользуетесь AI-агентами для генерации фронтенда — смысла заводить DESIGN.md прямо сейчас немного. Если у вас уже есть строгая дизайн-система с автогенерацией токенов в CSS-переменные — файл будет дублировать то, что и так работает. Если вы делаете лендинг раз в полгода руками — этот инструмент для другой вселенной.\n\n## Вердикт Веры\n\nЭто редкий случай, когда гугловцы придумали не просто спецификацию, а недостающий пазл в AI-разработке. Пока агенты не умеют смотреть на макет и понимать замысел дизайнера, им нужен текстовый мостик. DESIGN.md — именно такой мостик. Он не пытается заменить дизайн-систему, не лезет в Figma и не учит разработчика типографике. Он просто даёт агенту контекст, которого тому отчаянно не хватало.\n\nЯ бы рекомендовала завести такой файл любой команде, которая уже пробовала генерировать вёрстку через агента и сталкивалась с тем, что результат визуально не попадает в продукт. Это не серебряная пуля, но это та самая мелочь, которая превращает «сгенерировал и переписал» в «сгенерировал и принял».\n\n## Что читать дальше\n\n- [Все материалы про AI-агентов](/topics/ai-agents/)\n- [Что такое AI-агент простыми словами](https://verapointmedia.com/guides/chto-takoe-ai-agent-prostymi-slovami/)\n- [Все материалы про AI-инструменты](/topics/ai-tools/)\n- [Как отличить рабочий AI-инструмент от красивой демки](https://verapointmedia.com/guides/kak-otlichit-rabochiy-ai-instrument-ot-krasivoy-demki/)\n\n## Материалы\n\n- [google-labs-code/design.md] google-labs-code/design.md: https://github.com/google-labs-code/design.md\n- [stitch.withgoogle.com] supporting context: https://stitch.withgoogle.com/docs/design-md/specification\n- [npmjs.com] supporting context: https://www.npmjs.com/package/@google/design.md\n- [registry.npmjs.org] supporting context: https://registry.npmjs.org/`\n"}