Настройка DESIGN.md для генерации UI ИИ

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

Средний
Алексей Кузнецов
Алексей Кузнецов
Системный администратор20 октября 2026 г.2 мин чтения

Требования

  • Базовые знания Git и структуры проекта
  • Аккаунт в Figma (для изучения исходных дизайн-систем)
  • Установленный VoltAgent или другой ИИ-агент для генерации кода

Изучение репозитория awesome-design-md

Перейдите на страницу awesome-design-md и изучите список доступных DESIGN.md-файлов. Каждый файл содержит разбор дизайн-системы популярных брендов с токенами, компонентами и правилами.

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

Выбор подходящей дизайн-системы

Определите, какая дизайн-система подходит вашему проекту. Обратите внимание на стиль, цветовую палитру, типографику и компоненты. Примеры включают Material Design, Apple Human Interface Guidelines, Tailwind CSS и др.

cat awesome-design-md/material-design/DESIGN.md | head -50

Добавление DESIGN.md в проект

Скопируйте выбранный DESIGN.md в корень вашего проекта. Этот файл станет контекстом для ИИ-агента при генерации интерфейса.

cp awesome-design-md/material-design/DESIGN.md ./DESIGN.md

Настройка ИИ-агента для чтения DESIGN.md

Если вы используете VoltAgent, убедитесь, что агент имеет доступ к DESIGN.md. Для других агентов добавьте указание в промпт: «Используйте DESIGN.md в корне проекта как эталон стилей».

# Пример промпта для ИИ-агента
"Сгенерируй компонент кнопки на React, следуя правилам из DESIGN.md. Учти цвета, отступы, тени и состояния (hover, active, disabled)."

Генерация компонентов по дизайн-системе

Запустите ИИ-агента с запросом на создание UI-компонентов. Агент прочитает DESIGN.md и сгенерирует код, соответствующий выбранной дизайн-системе.

# Пример вызова VoltAgent
voltagent generate --prompt "Создай форму регистрации по DESIGN.md" --output ./src/components/AuthForm.tsx

Проверка и доработка сгенерированного кода

Проверьте, чтобы сгенерированный код соответствовал токенам и правилам из DESIGN.md. Добавьте недостающие стили или исправьте расхождения вручную.

# Проверка цветовых токенов
grep -r "color" ./src/styles/tokens.ts
# Проверка типографики
grep -r "font" ./src/styles/tokens.ts

Настройка DESIGN.md для генерации UI ИИ

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

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

  • Базовые знания Git и структуры проекта
  • Аккаунт в Figma (для изучения исходных дизайн-систем)
  • Установленный VoltAgent или другой ИИ-агент для генерации кода

Шаг 1: Изучение репозитория awesome-design-md

Перейдите на страницу awesome-design-md и изучите список доступных DESIGN.md-файлов. Каждый файл содержит разбор дизайн-системы популярных брендов с токенами, компонентами и правилами.

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

Шаг 2: Выбор подходящей дизайн-системы

Определите, какая дизайн-система подходит вашему проекту. Обратите внимание на стиль, цветовую палитру, типографику и компоненты. Примеры включают Material Design, Apple Human Interface Guidelines, Tailwind CSS и др.

cat awesome-design-md/material-design/DESIGN.md | head -50

Шаг 3: Добавление DESIGN.md в проект

Скопируйте выбранный DESIGN.md в корень вашего проекта. Этот файл станет контекстом для ИИ-агента при генерации интерфейса.

cp awesome-design-md/material-design/DESIGN.md ./DESIGN.md

Шаг 4: Настройка ИИ-агента для чтения DESIGN.md

Если вы используете VoltAgent, убедитесь, что агент имеет доступ к DESIGN.md. Для других агентов добавьте указание в промпт: «Используйте DESIGN.md в корне проекта как эталон стилей».

# Пример промпта для ИИ-агента
"Сгенерируй компонент кнопки на React, следуя правилам из DESIGN.md. Учти цвета, отступы, тени и состояния (hover, active, disabled)."

Шаг 5: Генерация компонентов по дизайн-системе

Запустите ИИ-агента с запросом на создание UI-компонентов. Агент прочитает DESIGN.md и сгенерирует код, соответствующий выбранной дизайн-системе.

# Пример вызова VoltAgent
voltagent generate --prompt "Создай форму регистрации по DESIGN.md" --output ./src/components/AuthForm.tsx

Шаг 6: Проверка и доработка сгенерированного кода

Проверьте, чтобы сгенерированный код соответствовал токенам и правилам из DESIGN.md. Добавьте недостающие стили или исправьте расхождения вручную.

# Проверка цветовых токенов
grep -r "color" ./src/styles/tokens.ts
# Проверка типографики
grep -r "font" ./src/styles/tokens.ts
Поделиться:TelegramX / TwitterVK