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

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

Средний

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

Системный администратор20 октября 2026 г.2 мин чтения

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

ls -la
cat DESIGN.md | head -50

# Пример структуры DESIGN.md
# Colors
- Primary: #007AFF
- Secondary: #FF2D55

# Typography
- Font Family: -apple-system
- Base Size: 16px

touch DESIGN.md
cp ../awesome-design-md/Apple/DESIGN.md ./DESIGN.md

# Пример промпта для ИИ-агента
"Проанализируй DESIGN.md и создай React-компоненты согласно указанным стилям. Используй Tailwind CSS для стилей."

# Пример команды для Claude Code
claude-code generate-ui --design-file=DESIGN.md --framework=react

# Запуск локального сервера для проверки
npm run dev
# Открытие в браузере
http://localhost:3000

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

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

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

• Базовые знания Git и терминалов
• Установленный Node.js (v18+)
• Доступ к awesome-design-md
• Аккаунт в Figma

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

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

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

Шаг 2: Выбор подходящей DESIGN.md

Просмотрите доступные DESIGN.md файлы и выберите тот, который соответствует стилю вашего проекта. Обратите внимание на цветовую палитру, типографику и компоненты.

ls -la
cat DESIGN.md | head -50

Шаг 3: Изучение структуры DESIGN.md

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

# Пример структуры DESIGN.md
# Colors
- Primary: #007AFF
- Secondary: #FF2D55

# Typography
- Font Family: -apple-system
- Base Size: 16px

Шаг 4: Создание собственного DESIGN.md

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

touch DESIGN.md
cp ../awesome-design-md/Apple/DESIGN.md ./DESIGN.md

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

Настройте ваш ИИ-агент (например, Claude Code) для анализа DESIGN.md и генерации UI-компонентов на его основе.

# Пример промпта для ИИ-агента
"Проанализируй DESIGN.md и создай React-компоненты согласно указанным стилям. Используй Tailwind CSS для стилей."

Шаг 6: Генерация UI-компонентов

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

# Пример команды для Claude Code
claude-code generate-ui --design-file=DESIGN.md --framework=react

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

Проверьте сгенерированный интерфейс на соответствие DESIGN.md. Внесите правки в случае расхождений в цветах, шрифтах или отступах.

# Запуск локального сервера для проверки
npm run dev
# Открытие в браузере
http://localhost:3000