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

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

Средний

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

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

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

git checkout figma
 cp DESIGN.md ../my-project/
 cd ../my-project

mkdir -p design-system
 mv DESIGN.md design-system/
 echo "DESIGN.md добавлен в design-system/"

cat > generate-ui.js << 'EOF'
const fs = require('fs');
const path = require('path');
const { OpenAI } = require('openai');

const designPath = path.join(__dirname, 'design-system', 'DESIGN.md');
const designContent = fs.readFileSync(designPath, 'utf8');

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const prompt = `На основе DESIGN.md ниже сгенерируй готовый UI-код на React, используя указанные дизайн-токены (цвета, шрифты, отступы). Верни только код без лишних комментариев.

${designContent}`;

(async () => {
  const completion = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [{ role: 'user', content: prompt }],
  });
  const code = completion.choices[0].message.content;
  fs.writeFileSync(path.join(__dirname, 'GeneratedUI.jsx'), code);
  console.log('UI сгенерирован: GeneratedUI.jsx');
})();
EOF
node generate-ui.js

npm install  # если используете npm
npm run dev    # запуск разработки

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

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

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

• Установленный Git
• Node.js (≥18) и npm/yarn
• Docker (опционально, для изоляции AI-агентов)
• API-ключ для OpenAI/Claude/DeepSeek
• Базовое понимание дизайн-токенов и Figma

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

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

Исходный код awesome-design-md

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

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

В корне репозитория найдите DESIGN.md, соответствующий нужной дизайн-системе (например, Figma, Tailwind, Ant Design). Для этого руководства используется DESIGN.md из ветки figma.

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

git checkout figma
 cp DESIGN.md ../my-project/
 cd ../my-project

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

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

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

mkdir -p design-system
 mv DESIGN.md design-system/
 echo "DESIGN.md добавлен в design-system/"

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

Создайте простой скрипт (например, на Node.js), который загружает DESIGN.md, передает его в AI-модель (Claude, OpenAI или DeepSeek) вместе с запросом на генерацию UI-кода (React/Vue). Используйте переменную окружения DESIGN_PATH для указания пути к файлу.

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

cat > generate-ui.js << 'EOF'
const fs = require('fs');
const path = require('path');
const { OpenAI } = require('openai');

const designPath = path.join(__dirname, 'design-system', 'DESIGN.md');
const designContent = fs.readFileSync(designPath, 'utf8');

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const prompt = `На основе DESIGN.md ниже сгенерируй готовый UI-код на React, используя указанные дизайн-токены (цвета, шрифты, отступы). Верни только код без лишних комментариев.

${designContent}`;

(async () => {
  const completion = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [{ role: 'user', content: prompt }],
  });
  const code = completion.choices[0].message.content;
  fs.writeFileSync(path.join(__dirname, 'GeneratedUI.jsx'), code);
  console.log('UI сгенерирован: GeneratedUI.jsx');
})();
EOF
node generate-ui.js

Шаг 5: Генерация и интеграция UI

После выполнения скрипта в корне проекта появится файл GeneratedUI.jsx. Добавьте его в ваш сборщик (Webpack/Vite) и запустите приложение. UI теперь будет соответствовать дизайн-системе, описанной в DESIGN.md.

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

npm install  # если используете npm
npm run dev    # запуск разработки