Продвинутый

VoltAgent/awesome-design-md: Анализ DESIGN.md бренд‑систем

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

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

design-md
design-system
design-tokens
figma

VoltAgent/awesome-design-md: Анализ DESIGN.md бренд‑систем

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

Что такое DESIGN.md и зачем его использовать

Что такое DESIGN.md и зачем его использовать

DESIGN.md — это машинно‑читаемый markdown‑файл, в котором фиксируются токены дизайна, цветовая палитра, типографика, компоненты UI и правила их применения. Он служит единой точкой источника для генерации интерфейсов в разных инструментах, включая AI‑агентов и UI‑фреймворки. Подключив такой файл в проект, вы даёте coding‑агенту полную спецификацию, которую он может превратить в готовый код или прототип без ручного переключения между разными документами.

Пример

yaml
# DESIGN.md
tokens:
  color-primary: "#0066CC"
  color-success: "#28A745"
  radius-base: 4px
typography:
  font-base: "Inter, 16px, 400"
  line-height: 1.5
components:
  button:
    colors:
      primary: token(color-primary)
      background: token(color-primary)
    radius: token(radius-base)
    padding: "8px 12px"

Такой файл можно разместить в репозитории проекта и подключить к любой системе, поддерживающей токены.

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

Как использовать VoltAgent/awesome-design-md для генерации UI

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

VoltAgent/awesome-design-md: анализ DESIGN.md систем дизайна

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

Структура DESIGN.md

Файл обычно состоит из нескольких логических блоков, каждый из которых описывает отдельный аспект дизайна:

  1. Токены – переменные, которые дальше используются в компонентах (цвета, отступы, радиусы и т.п.).
  2. Типографика – шрифты, размеры, межстрочный интервал, вес шрифта.
  3. Цветовая палитра – набор цветов с мета‑данными (primary, success, warning и т.д.).
  4. Компоненты – описание UI‑элементов (кнопка, карточка, форма) с указанием используемых токенов.
  5. Правила применения – рекомендации, как комбинировать токены, примеры состояний (hover, disabled).

Пример структуры (yaml‑пример):

yaml
# DESIGN.md
tokens:
  color-primary: "#0066CC"
  color-bg: "#F5F5F5"
  radius-sm: 2px
  radius-md: 4px

typography:
  font-main: "Inter, 16px, 400"
  font-heading: "Inter, 24px, 600"
  line-height: 1.4

components:
  card:
    background: token(color-bg)
    border-radius: token(radius-md)
    padding: "16px"
    box-shadow: "0 2px 4px rgba(0,0,0,0.1)"
  button:
    colors:
      primary:
        background: token(color-primary)
        hover: token(color-primary, 0.9)
    radius: token(radius-sm)
    padding: "8px 12px"

Как coding‑агенты читают DESIGN.md

Coding‑агенты парсят файл, извлекают токены и правила, а затем применяют их в генерации кода. Обычно процесс выглядит так:

  1. Парсинг – агент читает markdown‑файл, выделяет блоки tokens, typography, components.
  2. Моделирование – на основе токенов создаётся внутренняя модель (например, словарь переменных).
  3. Генерация – по шаблонам UI‑компонентов агент пишет код (HTML + CSS, React‑компоненты, Figma‑специфика и т.д.).

Командный пример (bash):

bash
# Запуск агента, который читает DESIGN.md и генерирует React‑компоненты
voltagent generate ui \
  --design ./design/DESIGN.md \
  --output ./src/components \
  --framework react

Дальнейшие шаги: агент создаёт файлы Button.jsx, Card.jsx, подключает стили из токенов и добавляет простые тесты. Если в DESIGN.md указаны дополнительные правила (например, «кнопка должна бытьDisabled, когда токен color‑primary имеет значение #CCCCCC»), агент учитывает их при генерации.

Практический совет
При работе с DESIGN.md держите файл в актуальном состоянии: любые изменения в токенах сразу отражаются в сгенерированном UI, что повышает предсказуемость и избавляет от «коленных» правок.

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

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

Если у вас возникнут вопросы по конкретному формату токенов или синтаксису, обратитесь к документации выбранного AI‑агента.

Популярные бренд‑системы и их DESIGN.md

Популярные бренд‑системы и их DESIGN.md

Figma и Material Design

Во-первых, в Figma‑файлах Material Design токены (цвета, радиусы, отступы) хранятся в разделе Styles. Плагин figma‑tokens CLI позволяет экспортировать их в JSON‑файл, который затем подключается к проекту.

bash
npx figma-tokens export \
  --file-id 1234567890abcdef \
  --format json \
  --output ./src/tokens/material-tokens.json

После получения файла токены можно импортировать в CSS‑или SCSS‑препроцессор. Пример импорта в SCSS:

scss
@import "./tokens/material-tokens.json";

:root {
  --color-primary: #{map-get($tokens, "colors.Primary")};
  --color-secondary: #{map-get($tokens, "colors.Secondary")};
  --radius-sm: #{map-get($tokens, "radius.Small")};
  --radius-md: #{map-get($tokens, "radius.Medium")};
}

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

Для более глубокого анализа DESIGN.md систем дизайна см. VoltAgent/awesome-design-md: анализ DESIGN.md систем дизайна.

Tailwind CSS и design‑tokens

С практической точки зрения удобно экспортировать токены из Figma‑файла и сразу использовать их в конфигурации Tailwind CSS. Это гарантирует, что цвета и радиусы в UI совпадают с официальными рекомендациями Material Design.

Скрипт на Node.js, который читает JSON‑файл токенов и генерирует часть tailwind.config.js:

js
const fs = require('fs');
const tokens = JSON.parse(fs.readFileSync('./src/tokens/material-tokens.json', 'utf8'));

const theme = {
  extend: {
    colors: {
      primary: tokens.colors['Primary'],
      secondary: tokens.colors['Secondary'],
    },
    borderRadius: {
      sm: tokens.radius['Small'],
      md: tokens.radius['Medium'],
    },
  },
};

fs.writeFileSync(
  './tailwind.config.js',
  `module.exports = ${JSON.stringify(theme, null, 2)}`
);

Теперь в разметке можно применять классы, основанные на токенах:

tsx
<div className="bg-primary text-white rounded-md sm:rounded-lg p-4">
  Кнопка с токеном primary и скругленными углами
</div>

Для примера использования токенов в Tailwind см. Как использовать VoltAgent/awesome-design-md для генерации UI.

Если требуется более автоматическая генерация UI, можно воспользоваться Генерация UI по DESIGN.md из awesome-design.md.

Заключение
Экспорт токенов из Figma и их подключение к Tailwind CSS обеспечивает предсказуемость стилей и ускоряет разработку UI‑компонентов. Такой подход легко интегрируется в любой проект, где используется DESIGN.md как источник дизайн‑систем.

Интеграция DESIGN.md в проект

Интеграция DESIGN.md в проект

Подключение DESIGN.md к UI‑генератору

Для подключения DESIGN.md к UI‑генератору достаточно добавить файл в корень проекта и указать его путь в конфигурации инструмента. В большинстве случаев используется CLI‑утилита VoltAgent.

bash
# Добавление DESIGN.md в проект
voltagent integrate --design ./design/awesome-design.md

После выполнения команды CLI сканирует файл, извлекает токены и сохраняет их в локальном кэше. При необходимости можно задать дополнительные параметры в конфигурационном файле voltagent.yaml:

yaml
design:
  path: ./design/awesome-design.md      # путь к DESIGN.md
  tokens:
    color-primary: "#0066CC"            # пример токена цвета
    radius: 4                           # радиус скругления
    font-family: "Inter"                # шрифт

Если проект уже использует другой генератор, достаточно указать путь к DESIGN.md в его настройках, например:

json
{
  "designFile": "./design/awesome-design.md",
  "outputDir": "./dist/ui"
}

Подробную инструкцию по подключению смотрите в руководстве: Как использовать VoltAgent/awesome-design-md для генерации UI.

Пример генерации интерфейса

После того как DESIGN.md подключён, можно запустить генерацию UI‑компонентов. Ниже пример генерации React‑компонентов на основе токенов из DESIGN.md.

bash
# Генерация UI‑компонентов для React
voltagent generate-ui \
  --design ./design/awesome-design.md \
  --framework react \
  --output ./dist/ui

Команда создаёт директорию dist/ui, в которой находятся файлы Button.jsx, Card.jsx и т.д. Каждый компонент использует токены, определённые в DESIGN.md, что обеспечивает единообразие стилей по всему проекту.

Пример сгенерированного компонента Button.jsx:

jsx
import './Button.css';

export default function Button({ children, variant = 'primary' }) {
  const classNames = `btn btn--${variant}`;
  return <button className={classNames}>{children}</button>;
}

css
/* Button.css */
.btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius, 4px);
  font-family: var(--font-family, Inter);
  transition: background-color 0.2s ease;
}

.btn--primary {
  background-color: var(--color-primary, #0066CC);
  color: #fff;
}

Готовый UI‑компонент сразу можно подключить к приложению, а при необходимости изменить токены в DESIGN.md и перезапустить генерацию – изменения отразятся во всех компонентах.

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

Практические рекомендации

Практические рекомендации

Настройка токенов

Для работы с токенами удобно экспортировать их из DESIGN.md и импортировать в VoltAgent.
Сначала извлеките секцию с токенами в отдельный YAML‑файл, например tokens.yml:

yaml
colors:
  primary: "#0066CC"
  secondary: "#00AAFF"
  background: "#FFFFFF"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"

Импортировать токены можно одной командой:

bash
voltagent tokens import --file tokens.yml

После импорта проверьте, что токены доступны в конфигурации:

bash
voltagent tokens list

Если требуется изменить отдельный токен, отредактируйте tokens.yml и повторно запустите импорт – система заменит значение без перезапуска агента.

Использование DESIGN.md для генерации интерфейсов
Как использовать VoltAgent/awesome-design-md для генерации UI
VoltAgent/awesome-design-md: анализ DESIGN.md систем дизайна

Тестирование и валидация UI

Валидация UI состоит из двух этапов: проверка соответствия токенов и автоматическое тестирование интерфейса.

Проверка токенов
VoltAgent предоставляет линтер, который сравнивает объявленные токены с их реальными значениями в компонентах:

bash
voltagent lint-tokens --config tokens.yml

Линтер выводит список несоответствий, если токен используется с другим цветом или размером, чем указано в DESIGN.md.

Автоматическое тестирование
Для UI‑тестов удобно использовать Cypress (или Playwright). Пример теста, проверяющего, что кнопка использует токен primary:

javascript
describe('UI compliance', () => {
  it('renders primary button with correct token', () => {
    cy.visit('/components/button')
    cy.get('button.primary')
      .should('have.css', 'background-color', '#0066CC')
  })
})

Запуск тестов включается в CI‑pipeline:

bash
npm run test:ui

При неудачном тесте CI останавливает сборку, что гарантирует, что только проверенные версии UI попадают в продакшен.

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

После настройки токенов и прохождения валидации UI ваш дизайн будет предсказуемо работать в продакшене.

Часто задаваемые вопросы

Как подключить DESIGN.md к проекту и передать его coding‑агенту?

Подключить DESIGN.md достаточно добавить его путь в конфигурацию AI‑агента (например, в параметр design_file). После этого агент автоматически получит токены цвета, типографики и компонентов, что позволит генерировать UI‑элементы без ручного указания стилей. Убедитесь, что файл находится в доступной директории и имеет корректный YAML‑ или Markdown‑формат, иначе агент не сможет его распарсить.

Какие токены обычно объявляются в DESIGN.md и как их использовать в коде?

В DESIGN.md объявляются токены для цветов (color-primary, color-success и т.д.), радиуса (radius-base), шрифтов (font-base), высоты строки (line-height) и параметров компонентов (отступы, паддинг). В коде этих токенов заменяют на реальные значения, например style={{ color: token(color-primary) }} в React‑компоненте. Такие токены позволяют менять визуальное оформление проекта в одном месте, не редактируя каждый файл отдельно.

Что делать, если в DESIGN.md указаны неверные или неполные токены?

Если токен не определен или имеет неверный формат, AI‑агент может сгенерировать ошибочный код или просто пропустить элемент. Проверьте файл на наличие всех токенов, используемых в описании компонентов, и при необходимости дополните его, после чего перезапустите генерацию. Ошибки в токенах лучше исправлять до начала работы с агентом, чтобы избежать лишних правок кода.

Как обеспечить согласованность дизайна между разными AI‑агентами, использующими один и тот же DESIGN.md?

Для согласованности важно, чтобы все агенты использовали одинаковую версию DESIGN.md и одинаковый способ обращения к токенам (например, через функцию token()). Рекомендуется хранить файл в едином репозитории и указывать в конфигурации одинаковый путь к нему. При изменении токенов делайте версии (git‑теги) и уведомляйте всех агентов о новом файле, чтобы они не работали со старыми данными.

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

Читайте также

awesome-design-md: DESIGN.md создаёт UI через agents

Анализ коллекции DESIGN.md файлов дизайн-систем. Один файл в проекте заставляет coding agents генерировать современный, предсказуемый интерфейс для быстрой и...

7 ноября 2026 г.9 мин
Продвинутый

VoltAgent/awesome-design-md: анализ DESIGN.md систем дизайна

Сборник DESIGN.md‑файлов от популярных бренд‑дизайн‑систем. Подключите один из них в проект и дайте coding‑agents создать UI‑компоненты.

11 ноября 2026 г.11 мин
Средний