Генерация UI по DESIGN.md из awesome-design.md

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

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

Требования

  • Аккаунт на GitHub
  • Редактор кода (VS Code или другой)
  • Доступ к ИИ-агенту для кодирования
  • Базовые знания Markdown

Склонируйте репозиторий awesome-design.md

Перейдите на страницу репозитория VoltAgent/awesome-design.md на GitHub и склонируйте его, чтобы ознакомиться со структурой и доступными файлами DESIGN.md.

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

Посмотрите доступные дизайн-системы

В репозитории собраны разборы дизайн-систем популярных брендов. Посмотрите папки и выберите файл, который соответствует стилю вашего проекта: цвета, типографика, отступы и компоненты.

ls awesome-design-md

Добавьте DESIGN.md в свой проект

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

cp awesome-design-md/<бренд>/DESIGN.md ./DESIGN.md

Настройте инструкцию для ИИ-агента

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

cat > AGENTS.md <<'EOF'
# Инструкция для ИИ-агента

При генерации интерфейса используй файл DESIGN.md в корне проекта.
Следуй цветам, типографике, отступам и правилам компонентов из этого файла.
EOF

Попросите агента сгенерировать компонент

Обратитесь к ИИ-агенту с просьбой создать кнопку, карточку или другой элемент интерфейса, опираясь на DESIGN.md. Проверьте результат на соответствие гайдлайну бренда.

Генерация UI по DESIGN.md из awesome-design.md

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

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

  • Аккаунт на GitHub
  • Редактор кода (VS Code или другой)
  • Доступ к ИИ-агенту для кодирования
  • Базовые знания Markdown

Шаг 1: Склонируйте репозиторий awesome-design.md

Перейдите на страницу репозитория VoltAgent/awesome-design.md на GitHub и склонируйте его, чтобы ознакомиться со структурой и доступными файлами DESIGN.md.

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

Шаг 2: Посмотрите доступные дизайн-системы

В репозитории собраны разборы дизайн-систем популярных брендов. Посмотрите папки и выберите файл, который соответствует стилю вашего проекта: цвета, типографика, отступы и компоненты.

ls awesome-design-md

Шаг 3: Добавьте DESIGN.md в свой проект

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

cp awesome-design-md/<бренд>/DESIGN.md ./DESIGN.md

Шаг 4: Настройте инструкцию для ИИ-агента

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

cat > AGENTS.md <<'EOF'
# Инструкция для ИИ-агента

При генерации интерфейса используй файл DESIGN.md в корне проекта.
Следуй цветам, типографике, отступам и правилам компонентов из этого файла.
EOF

Шаг 5: Попросите агента сгенерировать компонент

Обратитесь к ИИ-агенту с просьбой создать кнопку, карточку или другой элемент интерфейса, опираясь на DESIGN.md. Проверьте результат на соответствие гайдлайну бренда.

Поделиться:TelegramX / TwitterVK