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

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

Средний

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

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

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

ls designs/
# Пример просмотра одной системы
cat designs/vercel-design.md | head -100

cp designs/linear-design.md ../my-project/DESIGN.md
# или в папку контекста
mkdir -p ../my-project/.ai-context
cp designs/linear-design.md ../my-project/.ai-context/DESIGN.md

cat >> ../my-project/CLAUDE.md << 'EOF'
## UI Generation Rules
- Use ONLY tokens, components and patterns from DESIGN.md
- Do not invent colors, spacing, radii or shadows
- Match the exact component API described in the file
- Reference DESIGN.md in every UI-related response
EOF

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

cat > ../my-project/.husky/pre-commit << 'EOF'
#!/bin/sh
npx design-tokens-validator --design-file DESIGN.md --src "src/**/*.{tsx,jsx}"
EOF
chmod +x ../my-project/.husky/pre-commit

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

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

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

• Установленный Git и Node.js 18+
• Доступ к AI-агенту с поддержкой контекста файлов (Claude Code, Cursor, Windsurf или аналог)
• Базовое понимание структуры дизайн-систем (токены, компоненты, паттерны)

Шаг 1: Клонирование репозитория и изучение структуры

Скачайте коллекцию DESIGN.md файлов и ознакомьтесь с доступными дизайн-системами. В репозитории представлены разборы брендовых систем: Vercel, Linear, Stripe, GitHub, Notion и других.

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

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

Изучите файлы в директории designs/. Каждый файл содержит структурированное описание: цветовые токены, типографику, радиусы, тени, компоненты и паттерны использования. Выберите систему, ближайшую к вашему продукту по визуальному языку и сложности.

ls designs/
# Пример просмотра одной системы
cat designs/vercel-design.md | head -100

Шаг 3: Копирование DESIGN.md в свой проект

Поместите выбранный DESIGN.md в корень проекта или в папку .ai-context/ (если используете структуру контекста для AI). Файл станет референсом для агента при генерации кода.

cp designs/linear-design.md ../my-project/DESIGN.md
# или в папку контекста
mkdir -p ../my-project/.ai-context
cp designs/linear-design.md ../my-project/.ai-context/DESIGN.md

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

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

cat >> ../my-project/CLAUDE.md << 'EOF'
## UI Generation Rules
- Use ONLY tokens, components and patterns from DESIGN.md
- Do not invent colors, spacing, radii or shadows
- Match the exact component API described in the file
- Reference DESIGN.md in every UI-related response
EOF

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

Попросите агента сгенерировать простой компонент (Button, Card, Input) по DESIGN.md. Проверьте, что используются точные токены из файла: цвета, отступы, радиусы, типографика. При расхождениях — уточните инструкции и повторите.

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

Шаг 6: Интеграция в рабочий процесс разработки

Добавьте DESIGN.md в систему контроля версий. Настройте pre-commit хук или CI-проверку, которая валидирует, что новые UI-компоненты не содержат hardcoded значений, отсутствующих в DESIGN.md. Это поддерживает консистентность при командной работе.

cat > ../my-project/.husky/pre-commit << 'EOF'
#!/bin/sh
npx design-tokens-validator --design-file DESIGN.md --src "src/**/*.{tsx,jsx}"
EOF
chmod +x ../my-project/.husky/pre-commit