DesignMD.supply — как скопировать дизайн любого сайта и скормить его AI

Один из самых частых запросов в вайбкодинге звучит примерно так: «сделай как на этом сайте». И каждый раз это превращается в долгий разговор с AI — объяснить какой шрифт, какой цвет, какие отступы, какие скругления. А потом ещё раз, потому что он что-то понял не так.

DesignMD.supply решает это одним URL. Кидаешь ссылку на любой публичный сайт — получаешь готовый машиночитаемый стайлгайд, который любой AI-агент понимает с первого раза.

Бесплатно. Без регистрации. Без установки)

Что происходит когда вставляешь ссылку

Сервис не просто делает скриншот. Под капотом работает Context.dev — движок, который парсит живую страницу: вытаскивает CSS-переменные, находит реально используемые цвета, определяет шрифты, собирает значения отступов и бордер-радиусов.

На выходе — файл DESIGN.md. Это формат от Google, который сочетает два слоя:

Первый — YAML с токенами. Строгие машиночитаемые значения: цвета, типографика, отступы, компоненты. Именно это читает AI-агент когда генерирует код.

Второй — Markdown с описанием. Философия дизайна, логика цветовой схемы, правила и антипаттерны. Это контекст — агент понимает не только «какой цвет», но и «почему именно такой».

Вот как выглядит кусок такого файла:

colors:
  primary: "#1A1C1E"
  surface: "#F5F5F0"
typography:
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "1rem"
    lineHeight: 1.6
rounded:
  md: "8px"
spacing:
  md: "16px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    padding: "12px 24px"

Дальше markdown-секции: Overview, Colors, Typography, Elevation, Components, Do's and Don'ts. Шесть блоков в строгом порядке — так прописано в спецификации.

Зачем это нужно и кому

Проще всего объяснить через конкретные ситуации.

Разрабатываешь без дизайнера

Нашёл референс — сайт, который выглядит так как ты хочешь. Вместо того чтобы объяснять AI что там за шрифт и какой оттенок серого используется — кидаешь URL в DesignMD.supply, получаешь DESIGN.md, кладёшь в проект. Теперь у Claude Code или Cursor есть точные токены, а не твой пересказ.

Хочешь посмотреть как устроена дизайн-система конкурента

Быстрый ресёрч: дёргаешь DESIGN.md с нескольких сайтов в нише, сравниваешь токены, видишь паттерны. Что они используют за шрифты, какая у них система отступов, насколько агрессивные скругления. Раньше это был ручной труд на полдня.

Просто хочешь чтобы AI не угадывал стиль

У большинства вайбкодеров проблема не в коде — в том что интерфейс выглядит как AI-slop. Потому что AI генерит «приемлемое», а не «конкретное». DESIGN.md даёт конкретное: не «тёмный цвет», а #1A1C1E. Не «крупный шрифт для заголовков», а clamp(2.5rem, 7vw, 4.5rem) с weight 300.

С какими инструментами работает

Формат DESIGN.md поддерживается всеми основными AI-агентами: Claude Code, Codex, Gemini CLI, Cursor, Windsurf, VS Code Copilot, Kiro, OpenCode.

Кладёшь файл в корень проекта или в контекст — и агент его подхватывает.

Кроме того, токены из DESIGN.md можно конвертировать в несколько форматов:

# Tailwind v3 (JSON-конфиг)
npx @google/design.md export --format json-tailwind

# Tailwind v4 (CSS theme)
# на выходе @theme { ... }

# W3C Design Tokens (DTCG tokens.json)
# для передачи между инструментами

# Figma variables
# через токены, если нужна синхронизация с дизайнером

Валидация файла — отдельная команда:

npx @google/design.md validate DESIGN.md

Проверяет битые ссылки на токены, отсутствие primary-цвета, нарушения контрастности по WCAG AA, неиспользуемые токены и порядок секций. Удобно если редактируешь файл вручную.

Связь с Impeccable

DesignMD.supply сделал Paul Bakaus — создатель jQuery UI в 2007 году, бывший Dev Advocate в Google (Chrome DevTools, AMP, Web Stories). У него есть второй инструмент из той же экосистемы — Impeccable.

Impeccable — это AI-скилл, который применяет дизайн в процессе кодинга. 23 команды: polish, audit, critique, animate, bolder, quieter и другие. 27 детерминированных антипаттернов, которые он умеет находить и исправлять. Набрал 31 000 звёзд на GitHub.

Связка простая: DesignMD.supply достаёт DESIGN.md с любого сайта, Impeccable применяет его в AI-кодинге и следит чтобы результат не съезжал от стиля.

Есть и CLI-детектор:

npx impeccable detect src/

Находит AI-slop в коде — места где дизайн выглядит как что-то сгенерированное наспех. Полезно после нескольких итераций с агентом, когда надо проверить не разъехалось ли всё.

Как устроен формат DESIGN.md

Формат открытый, репозиторий спецификации на GitHub набрал 15 000 звёзд. Файл строго структурирован — YAML frontmatter с токенами, потом шесть markdown-секций в фиксированном порядке.

Почему именно такая структура: токены в YAML нормативные — агент берёт их буквально. Проза в markdown — контекст — агент использует её для понимания намерений. Когда написано «эта палитра передаёт доверие и спокойствие», агент учитывает это при генерации нового компонента, который в DESIGN.md явно не описан.

Секция Do's and Don'ts — отдельно важная. Там явные правила: «никогда не используй этот цвет на фоне», «кнопки всегда с тенью», «не смешивай два шрифта в одном блоке». Агент читает это как ограничения, а не пожелания.

Сильные стороны и честные ограничения

Начнём с ограничений — так честнее.

Работает только с публичными сайтами. Если у сайта есть авторизация — ничего не выйдет.

Качество файла зависит от того, насколько аккуратно сделан сайт-донор. Если там хаотичные инлайн-стили и CSS написан как придётся — токены получатся примерно такими же.

Анимации не вытаскивает. Motion-дизайн, easing, переходы — это за рамками текущей версии.

Это снимок, а не живая система. DESIGN.md не обновляется автоматически когда сайт меняется.

Спецификация пока в alpha — формат может поменяться. Не критично для разовых проектов, стоит учитывать если строишь на этом что-то долгосрочное.

Теперь что работает хорошо. Скорость — буквально одна ссылка и тридцать секунд. Никакой установки, никакой регистрации. Совместимость с основными AI-агентами из коробки. Бесплатно. Возможность конвертировать в Tailwind и Figma variables. Валидация через CLI.

Сравнение с ручным подходом

Глоссарий

DESIGN.md — открытый формат Google для описания дизайн-системы. Машиночитаемые YAML-токены плюс человекочитаемый markdown. Читается AI-агентами напрямую.

Context.dev — движок для извлечения дизайн-токенов из живых сайтов. Парсит CSS-переменные, анализирует DOM, определяет реально используемые значения.

Дизайн-токен — конкретное значение визуального параметра: цвет в hex, размер в px или rem, font-family строкой. Основа любой дизайн-системы.

AI-slop — интерфейс или код, который выглядит как сгенерированный AI без конкретных указаний. Обычно: безликие синие кнопки, Inter везде, padding 16px по умолчанию.

Impeccable — AI-скилл от того же автора для применения дизайна в кодинге. 31K+ звёзд на GitHub, 23 команды для работы с визуалом.

WCAG AA — стандарт доступности контента в вебе. Требует контрастность минимум 4.5:1 для обычного текста.

DTCG tokens.json — формат Design Tokens Community Group (W3C). Универсальный обменный формат токенов между инструментами.

hreflang — не про дизайн, но раз уж объясняем термины: атрибут для мультиязычных сайтов, указывает поисковику какая версия страницы для какого языка.

FAQ

Нужно ли что-то устанавливать?
Нет. Сервис работает в браузере. CLI-инструменты (@google/design.md, impeccable) устанавливаются через npx — только если нужна валидация или конвертация.

Можно ли использовать с российскими сайтами?
Да, любой публичный сайт. Главное — он должен быть доступен без авторизации.

DESIGN.md и промпт — это одно и то же?
Нет. Промпт — это инструкция в свободной форме. DESIGN.md — структурированный документ с конкретными значениями. Агент обращается к нему как к спецификации, а не как к пожеланию.

А если я хочу смешать стили двух сайтов?
Технически — скачай два файла, отредактируй вручную. Формат текстовый, это несложно.

Это легально — копировать дизайн чужого сайта?
Использовать токены как референс — это как смотреть на референс и делать похожее. Буквальное копирование бренда конкурента — уже другой вопрос, но это про намерение, а не про инструмент.

Работает ли с тёмными сайтами?
Да. Вытаскивает токены из того что реально рендерится — если сайт тёмный, токены будут тёмными.

Попробовать: designmd.supply

Спецификация: github.com/google-labs-code/design.md — 15K+ звёзд

Impeccable: github.com/pbakaus/impeccable — 31K+ звёзд

Другие инструменты для вайбкодинга — в нашем каталоге AI-инструментов: Claude Code, Cursor, Windsurf.

Хочешь разобраться как применять такие инструменты в реальном проекте — пиши Максиму.

Обновлено: июнь 2026 | vibecoderz.ru