DESIGN.md: новый стандарт от Google, который меняет правила вайб-кодинга
Один markdown-файл, который заставляет AI-агентов рисовать UI в едином стиле бренда
Проблема, о которой все молчат
Вайб-кодинг работает отлично ровно до тех пор, пока речь идёт о логике. Просите Claude Code собрать API — собирает. Просите n8n-флоу — собирает. Просите интеграцию с Bitrix24 — собирает.
А потом начинается интерфейс. И каждый ваш промпт становится раздражением: «нет, тёплый терракотовый, не оранжевый», «отступы сделай поменьше», «шрифт Inter, я же говорил». На третьем экране агент уже снова угадывает ваши цвета. На пятом — у вас два разных оттенка primary в коде и три варианта скругления у кнопок.
Это не баг агента. Это отсутствие контракта.
Пока в проекте есть README.md для людей и AGENTS.md / CLAUDE.md для агентов — но нет файла, описывающего, как продукт должен выглядеть — каждая UI-задача начинается с того, что вы заново пересказываете бренд. Эту дыру 21 апреля 2026 года закрыл Google, открыв спецификацию DESIGN.md под Apache 2.0.
Что это такое
DESIGN.md — это plain-text markdown-файл, который кладётся в корень проекта рядом с README.md. Внутри — два слоя:
YAML front matter — машинно-читаемые design tokens: цвета в hex, типографика, скругления, отступы, компоненты. Точные значения, по которым агент рендерит UI.
Markdown-проза — человеко-читаемое обоснование «почему»: настроение бренда, философия, do's & don'ts, контекст применения каждого токена.
Без второго слоя получается ещё один JSON с цветами. Без первого — ещё один brand-гайд, который никто не парсит. Сила DESIGN.md именно в том, что LLM получает и точные значения, и семантику. Он знает, что #1A1C1E — это не просто тёмный, а «глубокая чернильная типографика для заголовков».
Формат родился внутри Google Stitch — AI-инструмента для генерации UI. В обновлении Stitch 2.0 (март 2026) появился экспорт/импорт правил между проектами через DESIGN.md. Уже через месяц Google вынесла спецификацию в открытый репозиторий google-labs-code/design.md. На момент написания у репозитория ~8 500 звёзд, статус — alpha, версия 0.1.0.
К спецификации идёт CLI-пакет @google/design.md с четырьмя командами:
npx @google/design.md lint DESIGN.md валидирует структуру, ловит broken-references и проверяет WCAG AA контраст (4.5:1) автоматически.
npx @google/design.md diff before.md after.md ловит регрессии на уровне токенов между версиями.
npx @google/design.md export --format tailwind генерирует готовый tailwind.config.js. Альтернатива — экспорт в W3C DTCG tokens.json, чтобы не привязываться к одному фреймворку.
npx @google/design.md spec выводит саму спецификацию — её можно инжектить в системные промпты агентов.
Зачем это автоматизатору
Если вы строите для клиентов кастомные интерфейсы поверх Bitrix24, генерируете лендинги через n8n-пайплайны, прототипируете чат-боты или Telegram-веб-эпки, DESIGN.md решает три конкретные боли.
Первая — повторение. Один раз описанный бренд перестаёт быть устной договорённостью. Агент в Claude Code, в Stitch, в Cursor читает один файл и не задаёт вопросов «какой у вас primary».
Вторая — дрейф. На пятом сгенерированном экране бренд начинает течь: оттенки разъезжаются, отступы у разных компонентов разные. С токенами и линтером отклонения ловятся автоматически, ещё до коммита.
Третья — фрагментация инструментов. До DESIGN.md каждый AI-инструмент имел свой проприетарный формат правил: Stitch-настройки, Cursor rules, Copilot instructions, Claude Skills. DESIGN.md — нейтральный текстовый формат, который читают все.
И отдельно: для тех, кто продаёт интеграции и автоматизацию, появляется новая продаваемая услуга. «Извлекаем DESIGN.md из текущего сайта клиента → согласованные кастомные интерфейсы в Битриксе» — это уже строчка в чеке, потому что у большинства клиентов с CRM-кастомизациями интерфейсы выглядят как набор разнородных модулей.
Skills для генерации DESIGN.md
За две недели после открытия спецификации в экосистему высыпалась куча инструментов. Делю по логике применения.
Для собственного бренда с нуля
JobYu/design-md-generator — Cursor Agent Skill, прямо позиционированный как «противоположность awesome-design-md». Поддерживает два режима: автономный (агент анализирует README, код, упоминания бренда — и собирает черновик сам) и guided interview (задаёт серию вопросов о продукте, аудитории, настроении — и собирает DESIGN.md из ответов). На выходе — четыре файла в папке design-system/: сам DESIGN.md, README.md для команды, preview.html и preview-dark.html. MIT-лицензия.
Skill VoltAgent для Claude Code (Issue #90 в awesome-design-md) — упаковывает весь репозиторий из 31 эталонного DESIGN.md в SKILL.md. Ставится в ~/.claude/skills/, активируется фразой «build me a page like Stripe» или «create a DESIGN.md for my app». Содержит blank 9-section template + 7 эталонных систем локально и 47+ подгружаемых по запросу.
Сам Google Stitch умеет сгенерировать стартовый DESIGN.md из текстового описания: «наш бренд минималистичный, синий и белый, Inter, чистые карточки». Не отдельный skill, а встроенная функция, но файл потом вытаскивается и коммитится в Git.
Для извлечения из существующего сайта
arvindrk/extract-design-system — простейший Claude Code skill, ставится одной командой claude skill add arvindrk/extract-design-system. 40 600 установок на момент проверки — самый популярный из расширительных. Под капотом Playwright.
jasonhnd/design-md-generator — Claude Code skill с двухфазной архитектурой: сначала Playwright детерминированно вытаскивает computed styles, CSS-переменные, шрифты, тени и состояния (zero-hallucination), затем Claude читает tokens.json и скриншоты и пишет семантическую часть.
SkillUI (npm CLI, v1.3.2) — генерирует пачку CLAUDE.md + SKILL.md + DESIGN.md + VISUAL_GUIDE.md упакованной в .skill-архив. Есть Ultra-режим с Playwright для захвата hover/focus/анимаций.
Официальный skill design-md от Google (в репозитории google-labs-code/stitch-skills) — следует Agent Skills open standard, работает в Claude Code, Cursor, Gemini CLI, Antigravity. Внутри пайплайн Retrieval → Extraction → Translation → Synthesis.
Для дизайнеров без терминала
DESIGN.md Generator Chrome extension и DESIGN.md Style Extractor от TypeUI — клик на иконку расширения на любом сайте, на выходе готовый DESIGN.md или SKILL.md в буфер обмена. Локально, без аккаунтов.
DESIGN.md Generator Figma plugin — извлекает из локальных Figma-стилей, не из CSS веб-страницы.
Когда встраивать DESIGN.md в процесс
Здесь у меня твёрдое мнение: между фиксацией бренд-направления и первой сгенерированной агентом UI-страницей. Раньше нечего описывать, позже придётся переписывать уже сделанное.
В стандартном вайб-кодинг-воркфлоу — research → PRD → technical spec → agent config → build — DESIGN.md встаёт между третьим и четвёртым шагом, в одном слое с AGENTS.md/CLAUDE.md. PRD отвечает на «что строим», technical spec — «на чём строим», AGENTS.md — «как агент работает», DESIGN.md — «как это выглядит».
Для нового продукта (greenfield) идеальная точка — когда есть PRD и mood/настроение бренда (минимализм vs тепло vs дерзко), но ещё ни одной кнопки в коде. Это превращает «vibe» в контракт до того, как агент начнёт делать выбор за вас.
Для уже существующего продукта триггер — первое серьёзное вовлечение AI-агентов в кодовую базу. До этого DESIGN.md — лишний документ. Как только подключаете Cursor или Claude Code — без DESIGN.md агент будет дрейфовать от существующего стиля. Здесь имеет смысл прогнать arvindrk/extract-design-system или SkillUI по своему текущему сайту, получить черновик и подровнять руками.
Сигналы, что пора: в последних пяти промптах вы повторяете одни и те же фразы про цвета и шрифты. Появился второй разработчик или агент, делающий UI параллельно. Подключаете Stitch, v0, Lovable, Bolt. Готовите MVP к показу.
Когда ещё рано: на стадии чистой идеи или discovery — нечего фиксировать. Прототипируете в Figma без AI и не планируете подключать кодовых агентов в ближайший месяц.
Когда уже поздно (и что делать): если у вас 200 компонентов в проде, дизайн-система в Figma и Storybook — DESIGN.md не «создаётся», а извлекается инструментами вроде SkillUI или dembrandt. На этом этапе он становится зеркалом существующей системы для агентов, а не источником истины.
И важный момент: DESIGN.md — живой документ. По аналогии с практикой ведения AGENTS.md, его пересматривают регулярно — после каждого нового компонента, после редизайна. Хороший паттерн — просить агента обновлять файл сразу после внедрения новой концепции в той же сессии.
Claude Design — конечная точка цепочки
17 апреля 2026 года Anthropic запустили Claude Design — отдельный продукт на claude.ai/design, где DESIGN.md является каноничным форматом входа. VoltAgent специально под него выпустила второй репозиторий, awesome-claude-design, с 68 готовыми DESIGN.md.
Через Organization Settings (для всей организации): claude.ai/design/#org → клик на имя организации в нижнем левом углу → Create new design system → загружаете DESIGN.md в разделе Add assets → переключаете тоггл Published. Дальше каждый новый проект автоматически наследует ваши токены без повторной загрузки.
Через отдельный проект: новый прототип → прикрепляете DESIGN.md в чат → «Create a design system from this DESIGN.md». Сработает разово.
На основе одного DESIGN.md Claude Design за пять минут собирает полный пакет: README.md с brand-контекстом, colors_and_type.css с CSS-переменными и type scale, Google Fonts замены если шрифт проприетарный, превью-карточки для цветов, типографики и компонентов, рабочий UI-kit на маркетинговой странице, и — ключевое — SKILL.md, портативный skill-файл. Сохраняете его в свою папку скиллов, и любой следующий проект Claude Code или Claude.ai вызывает ваш бренд по slash-команде, без повторной загрузки и без расхода токенов на повторное чтение.
Системный промпт Claude Design (его утечка лежит в публичном gist) содержит фразу: «You MUST spend time trying to acquire design context, including components». То есть инструмент активно ищет structured design context — DESIGN.md идеально попадает в этот шаблон.
Идеальный стек на тарифе Claude Max
Для тех, кто уже сидит в экосистеме Anthropic на $100-тарифе, не нужно ничего покупать дополнительно. Стек складывается из четырёх слоёв.
Слой 1 — источник. Claude Project под каждый бренд. В каждый загружаете brand-материалы: скриншоты сайта, логотипы, голосовые гайды, существующие тексты. Memory ловит контекст бренда между сессиями. Дальше — кастомный skill design-md-ru в ~/.claude/skills/, собранный через skill-creator в Claude Code за час. Skill активируется фразой «создай DESIGN.md» и запускает интервью на русском: настрой бренда, ЦА, do's & don'ts. На выходе — DESIGN.md с YAML-токенами на английском (это стандарт) и markdown-прозой на русском (это семантика для русскоязычных агентов и людей).
Слой 2 — применение. Claude Design (claude.ai/design) для маркетинговых задач: лендинги, питч-деки, мокапы личного кабинета. Загружаете DESIGN.md как organization design system один раз — каждый новый прототип идёт в едином стиле. Claude Code для всего, что превращается в код. Artifacts в обычном чате claude.ai — для быстрых одноразовых превью без открытия тяжёлой Claude Design-тулы.
Слой 3 — хранение. GitHub-репозиторий с DESIGN.md в корне рядом с CLAUDE.md и AGENTS.md. Можно завести моно-репо design-systems/ с папками под каждый бренд. SKILL.md, который выдаст Claude Design после первой загрузки, сохраняйте в локальную папку скиллов — это делает бренд переиспользуемым во всей экосистеме Claude без расхода токенов.
Слой 4 — валидация. Через Claude Code запускаете npx @google/design.md lint DESIGN.md — линтер проверяет структуру, broken-references, WCAG AA контраст. Дальше npx @google/design.md export --format tailwind — готовый tailwind.config.js, который кидаете в любой проект.
Цикл выглядит так. Понедельник: Project в claude.ai, грузите brand-материалы. Понедельник вечером: активируете skill design-md-ru, проходите интервью, получаете черновик. Вторник: в Claude Code прогоняете lint, чините контраст, коммитите в GitHub. Вторник вечером: грузите в Claude Design как organization design system, публикуете. Среда: генерируете десяток прототипов в Claude Design — все в едином стиле. Четверг: handoff в Claude Code, код выходит на Tailwind с правильными токенами. Цикл повторяется один раз — дальше просто пользуетесь системой.
Что НЕ нужно покупать дополнительно
Cursor подписка избыточна — у вас Claude Code на Max покрывает те же задачи. Figma Professional не обязателен — для greenfield хватает DESIGN.md + Claude Design + Claude Code. SkillUI/dembrandt CLI добавляют ценность только если есть существующий сайт для извлечения. Платные Chrome-расширения дублируют web capture tool в Claude Design.
Подводные камни Claude Design
Только в браузере, не в десктопном приложении. Admin-активация для Team/Enterprise (для Pro/Max — сразу). Жрёт токены: одна загрузка DESIGN.md плюс пара итераций может съесть 50% недельной нормы Pro за раз. Совет: для простых правок переключайтесь на менее мощную модель. Не смешивайте бренды в одном проекте — Claude Design анкорит дизайн-систему к проекту.
Что делать сегодня
Если делать одно действие — создайте кастомный skill design-md-ru через skill-creator в Claude Code. Это инвестиция часа времени, которая окупится на каждом новом продукте, на каждом клиентском проекте по интеграциям, на каждом лендинге. Skill — это actually persistent leverage в экосистеме Claude, в отличие от одноразовых промптов или внешних инструментов.
Если делать ноль действий — добавьте в закладки google-labs-code/design.md и VoltAgent/awesome-design-md. Через месяц, когда экосистема устаканится и подтянутся Figma, v0, Bolt — вы вернётесь подготовленными.
Сейчас формат в alpha-статусе, спецификация ещё движется. Но история CLAUDE.md и AGENTS.md показала, что в эпоху coding-агентов простые markdown-конвенции в корне репозитория становятся стандартами быстрее любых JSON-схем. Тот, кто внедряет такие конвенции до их финализации, получает чистые рабочие процессы, пока конкуренты ещё переписывают промпты.