Утилиты Генератор DESIGN.md
Обработка прямо на вашем устройстве

Генератор DESIGN.md: создайте дизайн-систему из любого сайта

DESIGN.md — это файл, который описывает визуальный стиль сайта для AI-агентов вроде Claude Code, Cursor и Codex. Введите адрес сайта, и инструмент проанализирует CSS: основные цвета, шрифты, скругления и отступы — и соберёт готовый DESIGN.md. Файл можно положить в корень проекта, чтобы нейросети генерировали UI в вашем стиле, а не в унылом дефолтном.

AI-ready дизайн

Готовый DESIGN.md сразу работает с Claude Code, Cursor, Codex и другими AI-инструментами.

Автоматический анализ

Инструмент сам извлекает цвета, шрифты и скругления из CSS — не нужно копаться в коде вручную.

Бесплатно и без регистрации

Неограниченное число генераций, никаких платных тарифов для базового использования.

Открытый формат

DESIGN.md — открытая спецификация Google. Файл можно хранить в Git и редактировать в любом редакторе.

Тарифы для «Генератор DESIGN.md: создайте дизайн-систему из любого сайта»: что доступно по ролям

Генератор «Генератор DESIGN.md: создайте дизайн-систему из любого сайта» бесплатен на любом тарифе — код формируется прямо в браузере.

  • Гость (без регистрации): полный доступ к генерации и копированию.
  • Аккаунт (бесплатно): + сохранение и история генераций.
  • Pro: + экспорт всех сохранённых одним файлом.

Полное сравнение тарифов — на странице Тарифы.

Что такое DESIGN.md и зачем он нужен

DESIGN.md — формат описания дизайн-системы, предложенный Google (проект Stitch). Это текстовый файл с YAML-токенами (цвета, шрифты, радиусы) и markdown-описанием стиля.

AI-агенты читают его и генерируют интерфейс в точном соответствии с брендом — без ручного подбора цветов и шрифтов. Файл уже используют Claude Code, Cursor, Codex и другие инструменты.

Как генератор анализирует сайт

Инструмент загружает HTML и CSS указанного сайта, извлекает ключевые дизайн-токены: custom properties из :root, цвета текста и фона, шрифтовые стеки, размеры заголовков, радиусы скругления и отступы. Затем нейросеть Mistral анализирует эти данные и формирует DESIGN.md по спецификации Google Stitch.

Результат включает YAML front matter с токенами и prose-разделы с описанием стиля.

Для каких сайтов подходит генератор

Лучше всего инструмент работает с серверно-рендерящимися сайтами: WordPress, статические сайты, Next.js/Nuxt (SSR), документация. Если сайт использует клиентский рендеринг (React SPA, Vue без SSR), часть стилей может быть недоступна.

В этом случае генератор честно предупредит, что анализ неполный, и предложит проверить результат вручную.

Как использовать готовый DESIGN.md

Скачайте сгенерированный файл и положите его в корень проекта с именем DESIGN.md. AI-агенты автоматически обнаружат его при генерации кода.

Файл также можно вручную доработать: добавить недостающие компоненты, уточнить описания разделов или расширить палитру. Формат поддерживает версионирование — можно хранить DESIGN.md в Git рядом с кодом.

Как это сделать

  1. Введите URL сайта в поле ввода — например, https://example.com.
  2. Нажмите «Сгенерировать DESIGN.md» — сервер загрузит HTML и CSS сайта.
  3. Дождитесь результата — нейросеть анализирует стили и формирует файл (10–30 секунд).
  4. Скачайте DESIGN.md или скопируйте содержимое в буфер обмена.
  5. Положите файл в корень проекта и дайте AI-агенту команду «используй DESIGN.md».

Частые вопросы

DESIGN.md — формат файла от Google, описывающий дизайн-систему сайта для AI-агентов. Состоит из YAML front matter (токены: цвета, шрифты, радиусы, отступы) и markdown prose (описание стиля).

Позволяет AI-инструментам генерировать UI в точном соответствии с визуальным стилем бренда.

Style guide — это документ для людей (Figma, PDF, wiki). DESIGN.md — машиночитаемый файл для AI.

Он содержит точные значения токенов (hex-цвета, px-размеры, имена шрифтов), а не скриншоты и словесные описания. AI-агент может напрямую использовать эти значения в коде.

Любые публично доступные сайты. Лучше всего — серверно-рендерящиеся (WordPress, статика, SSR-фреймворки).

Для клиентских SPA часть стилей может быть недоступна — генератор предупредит об этом.

Генератор DESIGN.md бесплатен. Ограничений по количеству генераций нет, но действует троттлинг — не чаще одного запроса в 15 секунд с одного IP.

Да, DESIGN.md — это обычный текстовый файл. Вы можете добавить недостающие компоненты, поправить цвета, расширить разделы или дополнить описания.

Файл можно версионировать в Git.