Использование DESIGN.md для генерации UI

Инструкция по применению коллекции DESIGN.md для обучения AI-агентов созданию интерфейсов в стиле популярных дизайн-систем.

Средний

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

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

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

cp awesome-design-md/path/to/chosen-design.md ./DESIGN.md

# Пример промпта для агента:
"Создай React-компонент кнопки, строго следуя правилам из файла DESIGN.md"

Использование DESIGN.md для генерации UI

Инструкция по применению коллекции DESIGN.md для обучения AI-агентов созданию интерфейсов в стиле популярных дизайн-систем.

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

• Установленный Git
• Доступ к AI-агенту (например, Claude Code или GitHub Copilot)
• Базовые навыки работы с терминалом

Шаг 1: Клонирование репозитория

Для начала работы необходимо получить локальную копию коллекции. Это позволит вам выбирать подходящие файлы систем дизайна для ваших проектов.

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

Шаг 2: Выбор файла дизайн-системы

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

Шаг 3: Добавление файла в проект

Скопируйте выбранный файл DESIGN.md в корневую директорию вашего проекта. Это создаст контекст для AI-агента при чтении структуры вашего кода.

cp awesome-design-md/path/to/chosen-design.md ./DESIGN.md

Шаг 4: Генерация интерфейса через AI-агента

Запустите вашего AI-агента и дайте команду на создание компонента, ссылаясь на файл DESIGN.md. Агент проанализирует правила оформления и применит их к коду. Подробнее о процессе можно узнать в Гайде: Генерация UI из DESIGN.md.

# Пример промпта для агента:
"Создай React-компонент кнопки, строго следуя правилам из файла DESIGN.md"