Как использовать awesome-design-md для генерации UI через ИИ-агентов

Пошаговый гайд по подключению готовых DESIGN.md-файлов из репозитория VoltAgent/awesome-design-md к вашему проекту и генерации интерфейсов с помощью ИИ-агентов.

Начальный

Алексей Кузнецов

Системный администратор15 июня 2026 г.3 мин чтения

open https://github.com/VoltAgent/awesome-design-md

git clone https://github.com/VoltAgent/awesome-design-md.git
cd awesome-design-md

cp path/to/awesome-design-md/material-design.md /your/project/root/DESIGN.md

# Для Cursor — просто откройте папку проекта
# Для Claude Code:
claude

# Для Aider:
aider

Прочитай файл DESIGN.md в корне проекта.
Используй описанную там дизайн-систему для генерации компонентов:
- палитру цветов,
- типографику (шрифты, размеры, начертания),
- отступы и сетку,
- стилизацию кнопок, инпутов, карточек.

Сгенерируй страницу лендинга в соответствии с этими правилами.

# Пример корректирующего промпта:
# Замени все отступы на значения из секции Spacing Tokens в DESIGN.md.
# Кнопки primary должны использовать цвет #1976D2, а не #1565C0.

git add DESIGN.md
git commit -m "Добавлен DESIGN.md для генерации UI через ИИ-агент"

awesome-design-md: генерация UI через ИИ-агентов

Пошаговый гайд по подключению готовых DESIGN.md-файлов из репозитория VoltAgent/awesome-design-md к вашему проекту и генерации интерфейсов с помощью ИИ-агентов.

awesome-design-md — это кураторский список (awesome-list) файлов дизайн-систем в формате Markdown. Каждый файл описывает конкретный бренд или фреймворк: цвета, типографику, компоненты, токены и правила компоновки. ИИ-агент читает такой файл и использует его как спецификацию при генерации кода.

Предварительные требования

• Аккаунт на GitHub
• Локально установленный ИИ-агент (Cursor, Claude Code, Aider или аналогичный)
• Существующий или новый проект с кодовой базой
• Базовое понимание работы с терминалом

Что понадобится дополнительно

Если вы ещё не настроили ИИ-агент для разработки, начните с обзора ИИ-агентов для разработки. Для более глубокого понимания принципов работы с дизайн-токенами рекомендуем гайд по design tokens.

Шаг 1: Ознакомьтесь с репозиторием awesome-design-md

Перейдите на страницу репозитория VoltAgent/awesome-design-md и изучите доступные DESIGN.md-файлы. Каждый файл содержит описание дизайн-системы конкретного бренда — цвета, типографику, компоненты, design tokens и правила компоновки. Выберите тот, который ближе всего к стилю, который вы хотите получить в своём проекте.

open https://github.com/VoltAgent/awesome-design-md

Шаг 2: Клонируйте репозиторий или скачайте нужный файл

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

git clone https://github.com/VoltAgent/awesome-design-md.git
cd awesome-design-md

Шаг 3: Скопируйте DESIGN.md в корень вашего проекта

Скопируйте выбранный DESIGN.md-файл в корневую директорию вашего проекта. Имя файла должно остаться именно DESIGN.md — большинство ИИ-агентов ищут его по умолчанию в корне. Если в проекте уже есть файл с таким именем, переименуйте существующий перед копированием.

cp path/to/awesome-design-md/material-design.md /your/project/root/DESIGN.md

Шаг 4: Откройте проект в вашем ИИ-агенте

Запустите ИИ-агент в директории вашего проекта. Убедитесь, что агент имеет доступ к файловой системе и видит DESIGN.md. В Cursor это происходит автоматически при открытии папки проекта. В Claude Code или Aider — при запуске из корневой директории.

# Для Cursor — просто откройте папку проекта
# Для Claude Code:
claude

# Для Aider:
aider

Настройка агента для работы с дизайн-системой

Подробнее о том, как настроить Cursor или Claude Code для эффективной работы с дизайн-системами, читайте в нашей статье о настройке Cursor и Claude Code.

Шаг 5: Направьте агента на использование DESIGN.md

Дайте агенту чёткую инструкцию с указанием использовать DESIGN.md как источник правил для генерации UI. Формулировка промпта критична — чем конкретнее запрос, тем предсказуемее результат. Пример рабочего промпта приведён в поле code.

Прочитай файл DESIGN.md в корне проекта.
Используй описанную там дизайн-систему для генерации компонентов:
- палитру цветов,
- типографику (шрифты, размеры, начертания),
- отступы и сетку,
- стилизацию кнопок, инпутов, карточек.

Сгенерируй страницу лендинга в соответствии с этими правилами.

Шаг 6: Проверьте и скорректируйте результат

Изучите сгенерированный код. Обратите внимание на соответствие дизайн-токенам из DESIGN.md: используются ли правильные цвета, размеры шрифтов, отступы. Если агент отклонился от спецификации — укажите конкретные расхождения и попросите исправить. Итеративная доработка нормальна и ожидаема.

# Пример корректирующего промпта:
# Замени все отступы на значения из секции Spacing Tokens в DESIGN.md.
# Кнопки primary должны использовать цвет #1976D2, а не #1565C0.

Шаг 7: Зафиксируйте DESIGN.md в системе контроля версий

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

git add DESIGN.md
git commit -m "Добавлен DESIGN.md для генерации UI через ИИ-агент"