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

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

Начальный

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

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

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

Prompt: 'Generate a React button component following the design tokens defined in DESIGN.md'

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

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

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

• Доступ к репозиторию VoltAgent/awesome-design-md
• Настроенный AI-агент (например, Claude Code или GitHub Copilot)
• Базовые знания Markdown и структуры UI-компонентов

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

Изучите содержимое репозитория VoltAgent/awesome-design-md, чтобы найти файл DESIGN.md, соответствующий вашему бренду или желаемому стилю. Каждый файл содержит структурированный анализ токенов и правил оформления.

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

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

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

Шаг 3: Настройка контекста для AI-агента

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

Prompt: 'Generate a React button component following the design tokens defined in DESIGN.md'

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

Запустите процесс генерации UI. После создания компонентов проверьте, соответствуют ли отступы, цвета и типографика тем значениям, которые были описаны в анализе дизайн-системы. Подробнее о процессе можно прочитать в гайде по генерации UI.