DESIGN.md для AI-агентов: как получить качественный UI без дизайнера
Коллекция готовых DESIGN.md-файлов от популярных брендов. Копируете в проект — AI-агент генерирует UI, соответствующий дизайн-системе. Экономия времени на стилизации и согласованиях.
Проблема современной генерации UI и решение awesome-design-md
Почему AI-агенты создают типовые интерфейсы
Если вы хоть раз просили AI-агента сгенерировать веб-страницу «в стиле Stripe» или «как на сайте Linear», скорее всего получили узнаваемую структуру, но визуально — серую, плоскую, без характерных деталей. Это не баг модели, а следствие того, как устроен промпт по умолчанию.
AI-агент не видит сайт так, как видит его человек. Он оперирует текстом и кодом. Когда вы говорите «сделай красиво», агент не имеет вектора стиля — у него нет палитры, типографской шкалы, набора компонентов. Он берёт базовый набор, который «знает» из обучающих данных: шрифт sans-serif, белый фон, синюю кнопку, стандартные отступы. Результат выглядит аккуратно, но безлико — как корпоративный лендинг из 2017 года.
С практической точки зрения, проблема сводится к трём вещам.
Первое — отсутствие дизайн-токенов в контексте. Агент не знает, что основной цвет бренда — не #3B82F6, а #2563EB с определёнными оттенками для hover- и active-состояний. Он не знает шкалу отступов, радиусы скругления, соотношения размеров заголовков.
Второе — нет паттернов компонентов. Кнопка — это не просто <button> с padding: 12px 24px. Это конкретная высота, конкретный шрифт, конкретная тень, конкретное поведение при фокусе. Без явного описания агент каждый раз генерирует кнопку заново, и они не совпадают между собой.
Третье — нет ограничений. Агент не знает, чего делать нельзя. Он может использовать десять разных оттенков серого, четыре размера кнопок и три стиля иконок на одной странице — просто потому, что ему не сказали, что этого делать не нужно.
Вот типичный пример. Я попросил агента сгенерировать дашборд «в стиле Notion». Получил что-то вроде:
html<!-- То, что выдаёт агент без контекста дизайн-системы -->
<div style="padding: 16px;">
<h1 style="font-size: 24px; font-weight: bold;">Dashboard</h1>
<button style="background: #3B82F6; color: white; padding: 8px 16px; border-radius: 4px;">
New page
</button>
</div>
А вот как выглядит настоящий UI Notion: характерный шрифт, специфические отступы, минималистичные иконки, единообразные состояния интерактивных элементов. Разница — как между стоковым фото и работой фотографа.
Как работает подход с DESIGN.md-файлами
Решение, которое предлагает проект awesome-design-md, простое по механике, но эффективное на практике. Идея в том, что дизайн-система популярного бренда описывается в виде структурированного Markdown-файла — DESIGN.md — и кладётся в корень проекта. AI-агент читает этот файл как техническое задание и генерирует код, который соответствует описанным ограничениям.
Почему Markdown, а не JSON или CSS? Потому что именно Markdown — формат, который LLM читает лучше всего. Никакого парсинга, никакой дополнительной конфигурации. Агент получает человекочитаемое описание дизайн-системы прямо в контексте проекта.
Коллекция содержит разборы дизайн-систем реальных продуктов: Stripe, Linear, Vercel, Notion, GitHub и других. Каждый файл — это не набор CSS-переменных, а полноценное описание: цветовая палитра, типографика, компоненты, паттерны взаимодействия, даже философия дизайна бренда.
Установить нужный файл можно напрямую из репозитория. Допустим, нужен стиль Stripe:
bash# Клонируем репозиторий во временную директорию
git clone https://github.com/VoltAgent/awesome-design-md.git /tmp/awesome-design-md
# Копируем нужный DESIGN.md в корень проекта
cp /tmp/awesome-design-md/design-md/stripe.md ./DESIGN.md
После этого достаточно сказать агенту: «Сгенерируй страницу настроек, используя стиль из DESIGN.md» — и результат будет стилистически соответствовать выбранному бренду.
Внутри файла вы увидите структурированное описание примерно такого вида:
markdown## Color Palette
- Primary: #635BFF (Stripe purple)
- Primary hover: #7A73FF
- Background: #FFFFFF
- Surface: #F6F9FC
- Text primary: #1A1F36
- Text secondary: #697386
## Typography
- Font family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
- H1: 32px / 40px line-height / 600 weight
- H2: 24px / 32px / 600 weight
- Body: 14px / 20px / 400 weight
## Buttons
- Primary: bg #635BFF, text white, border-radius 8px, height 40px
- Padding: 12px 24px
- Hover: bg #7A73FF, subtle shadow
Такой подход даёт агенту именно то, чего ему не хватает: конкретные значения вместо абстракций, ограничения вместо бесконечного пространства вариантов, паттерны вместо случайных решений.
Если интересны детали интеграции с конкретными AI-агентами и примеры реального применения — есть подробное руководство по работе с awesome-design-md через ИИ-агентов.
Установка и базовая интеграция в проект
Выбор и копирование подходящего DESIGN.md
Репозиторий awesome-design-md содержит коллекцию файлов, каждый из которых описывает дизайн-систему конкретного бренда: типографику, цвета, отступы, компоненты, тон текстов. Формат — обычный Markdown, который LLM обрабатывает без дополнительного парсинга.
Структура репозитория простая. Внутри каталога design-md лежат файлы вида stripe.design.md, linear.design.md, vercel.design.md и т. д. Выбираете тот, чей визуальный язык ближе к вашему проекту, и копируете в корень.
bash# Клонируете репозиторий целиком
git clone https://github.com/VoltAgent/awesome-design-md.git /tmp/awesome-design-md
# Копируете нужный файл в корень вашего проекта
cp /tmp/awesome-design-md/design-md/stripe.design.md ~/my-project/DESIGN.md
# Или скачиваете напрямую через curl
curl -o DESIGN.md \
https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe.design.md
После копирования файл должен находиться в корне проекта — именно туда AI-агенты по умолчанию ищут контекст. Если используете нестандартное расположение, это нужно будет указать явно в промпте.
Содержимое файла выглядит примерно так:
markdown# Stripe Design System
## Colors
- Primary: #635BFF
- Background: #FFFFFF
- Text: #1A1A2E
- Muted: #6B7280
## Typography
- Font family: "Inter", system-ui, sans-serif
- Base size: 16px
- Scale ratio: 1.25
## Spacing
- Base unit: 4px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64
## Border radius
- Small: 4px
- Medium: 8px
- Large: 12px
## Tone
- Professional, concise, confident
- Avoid jargon, use active voice
Это не спецификация в духе дизайн-токенов Figma — скорее компактное описание на естественном языке, которое агент может интерпретировать гибко. Именно в этом и заключается идея: не пытаться перевести дизайн-систему в машинночитаемый формат, а дать модели то, что она понимает лучше всего — текст.
Подробнее о том, как агент использует этот файл при генерации интерфейсов, разобрано в материале «Генерация UI с awesome-design-md через ИИ-агентов».
Конфигурация AI-агента для чтения дизайн-системы
Большинство современных агентов — Cursor, Claude Code, Aider, Windsurf — автоматически подхватывают файлы из корня проекта. Но полагаться на автообнаружение не стоит: явное указание в системном промпте повышает предсказуемость результата.
Cursor. В настройках проекта добавьте правило в .cursor/rules/design.mdc:
markdown## Design System
When generating UI components, always reference the DESIGN.md file
in the project root. Follow its color palette, typography scale,
spacing units, and tone guidelines. Do not invent visual styles
unless explicitly asked to deviate.
Claude Code. Создайте файл CLAUDE.md в корне проекта с секцией:
markdown# Project Guidelines
## Design
The file DESIGN.md contains the design system for this project.
All generated UI must conform to it. Before writing any component,
read DESIGN.md and extract the relevant tokens.
Aider. При запуске передайте файл как контекст:
bashaider --file DESIGN.md
Или добавьте в .aider.conf.yml:
yamlread:
- DESIGN.md
Универсальный подход. Если ваш агент поддерживает системные промпты через конфигурационный файл, добавьте туда строку вида:
Always read DESIGN.md before generating any UI code.
После настройки проверьте, что агент действительно учитывает дизайн-систему. Попросите его сгенерировать простой компонент — например, карточку или форму — и сравните результат с тем, что было до добавления DESIGN.md. Разница обычно заметна сразу: появляются правильные цвета, осмысленные отступы, читаемая типографика.
Если агент игнорирует файл — скорее всего, проблема в том, что контекстное окно переполнено и DESIGN.md вытесняется. В этом случае сократите файл до самого необходимого: палитра, шрифты, базовый масштаб. Тридцать строк текста агент прочитает всегда, а триста — не факт.
Анализ дизайн-систем из коллекции
Разбор структуры токенов цветов и типографики
Коллекция awesome-design-md — это набор Markdown-файлов, каждый из которых описывает дизайн-систему конкретного бренда в структурированном виде. Формат специально оптимизирован под то, как LLM воспринимает контекст: никаких JSON-схем, никаких бинарных ассетов — только текст, заголовки и списки.
Типичный DESIGN.md содержит несколько обязательных секций. Разберём структуру на примере токенов цветов.
Цвета описываются иерархически: сначала базовая палитра, затем семантические назначения, затем конкретные привязки к компонентам. Вот как выглядит секция цветов из файла GitHub:
markdown## Colors
### Base palette
- `white`: #ffffff
- `black`: #0d1117
- `gray-100`: #f6f8fa
- `gray-200`: #d0d7de
- `gray-300`: #afb8c1
- `gray-400`: #8b949e
- `gray-500`: #6e7781
- `gray-600`: #57606a
- `gray-700`: #424a53
- `gray-800`: #30363d
- `gray-900`: #21262d
### Semantic tokens
- `text-primary`: gray-900
- `text-secondary`: gray-500
- `text-link`: #0969da
- `bg-primary`: white
- `bg-secondary`: gray-100
- `border-default`: gray-200
- `accent-emphasis`: #0969da
- `danger-fg`: #cf222e
- `success-fg`: #1a7f37
### Component bindings
- Button primary bg: accent-emphasis
- Button primary text: white
- Button hover bg: #0550ae
- Input border focus: accent-emphasis
Обратите внимание на трёхуровневую структуру: базовые значения → семантика → привязка к компонентам. Именно это даёт AI-агенту достаточно контекста, чтобы не просто «угадать» оттенок, а выбрать правильный токен из правильной категории. Агент видит, что для фона кнопки нужно использовать accent-emphasis, а не просто синий цвет — и при изменении темы вся система перекрашивается предсказуемо.
Типографика описывается аналогично — от фундаментальных решений к конкретным применениям:
markdown## Typography
### Font families
- `font-sans`: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
- `font-mono`: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace
### Type scale (rem-based, root = 16px)
- `text-xs`: 0.75rem / 12px / line-height: 1.33
- `text-sm`: 0.875rem / 14px / line-height: 1.43
- `text-base`: 1rem / 16px / line-height: 1.5
- `text-lg`: 1.25rem / 20px / line-height: 1.4
- `text-xl`: 1.5rem / 24px / line-height: 1.33
- `text-2xl`: 2rem / 32px / line-height: 1.25
- `text-3xl`: 2.5rem / 40px / line-height: 1.2
### Font weights
- `font-normal`: 400
- `font-medium`: 500
- `font-semibold`: 600
- `font-bold`: 700
### Component bindings
- Heading 1: text-3xl, font-semibold, letter-spacing: -0.02em
- Heading 2: text-2xl, font-semibold, letter-spacing: -0.01em
- Body text: text-base, font-normal
- Caption: text-xs, text-secondary color
- Code block: font-mono, text-sm, bg-secondary
Ключевой момент — указание line-height и letter-spacing прямо в токенах. Без этого агент часто генерирует «примерно похожий» текст, который визуально отличается от оригинала на 5–10 %. Эти проценты складываются, и в итоге интерфейс выглядит «не совсем так».
Практический совет: когда создаёте собственный DESIGN.md, не ограничивайтесь перечислением значений. Добавляйте секцию с явными запретами — агенты лучше реагируют на негативные инструкции, чем на абстрактные пожелания:
markdown## Do NOT
- Use pure black (#000000) for text or backgrounds
- Use more than 2 font weights per component
- Mix border-radius values — choose either 6px or 8px globally
- Use box-shadow without corresponding border color
Примеры: GitHub, Vercel, Tailwind CSS в формате DESIGN.md
Посмотрим, как три популярные дизайн-системы выглядят в формате коллекции awesome-design-md.
GitHub — один из наиболее детально описанных файлов в коллекции. Его особенность — чёткое разделение между светлой и тёмной темой. Токены цветов дублируются для каждой темы, но семантические имена остаются одинаковыми:
markdown### Dark theme overrides
- `text-primary`: #e6edf3
- `bg-primary`: #0d1117
- `bg-secondary`: #161b22
- `border-default`: #30363d
- `accent-emphasis`: #1f6feb
Это позволяет агенту генерировать компоненты с поддержкой темизации «из коробки» — достаточно попросить «сделай поддержку тёмной темы», и он уже знает, какие токены нужно переопределить.
Vercel отличается минимализмом. Палитра сокращена до нескольких ключевых цветов, а акцент сделан на типографику и пространстве:
markdown## Colors
- `foreground`: #000000
- `background`: #ffffff
- `accent`: #0070f3
- `gray-alpha-100`: rgba(0, 0, 0, 0.05)
- `gray-alpha-200`: rgba(0, 0, 0, 0.08)
- `gray-alpha-400`: rgba(0, 0, 0, 0.16)
## Spacing scale (4px base unit)
- `space-1`: 4px
- `space-2`: 8px
- `space-3`: 12px
- `space-4`: 16px
- `space-5`: 24px
- `space-6`: 32px
- `space-8`: 48px
- `space-10`: 64px
Обратите внимание на использование rgba вместо сплошных серых оттенков — это характерный приём Vercel, который создаёт мягкие тени на любом фоне. Если вы опишете это в DESIGN.md, агент будет генерировать именно такой подход, а не стандартные #f5f5f5.
Tailwind CSS в коллекции интересен тем, что описывает не конкретный сайт, а фреймворк. Файл содержит масштабируемую систему токенов:
markdown## Color system
All colors use 50–950 scale (light to dark):
- `slate-50`: #f8fafc → `slate-950`: #020617
- `gray-50`: #f9fafb → `gray-950`: #030712
- `blue-50`: #eff6ff → `blue-950`: #172554
Default usage:
- Neutral text: gray-900
- Muted text: gray-500
- Interactive: blue-600
- Success: green-600
- Warning: amber-600
- Error: red-600
## Border radius
- `rounded-sm`: 2px
- `rounded`: 4px
- `rounded-md`: 6px
- `rounded-lg`: 8px
- `rounded-xl`: 12px
- `rounded-2xl`: 16px
- `rounded-full`: 9999px
Такой файл особенно полезен, когда вы используете Tailwind в проекте и хотите, чтобы агент генерировал классы в соответствии с кастомной конфигурацией, а не дефолтной палитрой.
Если сравнить все три примеры, видно, что структура файлов едина, но глубина детализации различается. GitHub — максимально конкретный, Vercel — лаконичный, Tailwind — абстрактный и масштабируемый. Выбор зависит от задачи: для прототипа подойдёт Vercel-стиль, для продакшн-проекта с дизайн-ревью — GitHub-уровень детализации.
Подробнее о том, как интегрировать эти файлы в рабочий процесс с AI-агентами, разобрано в материале «Генерация UI с awesome-design-md через ИИ-агентов».
Практические сценарии использования
Генерация страниц под существующую брендовую стилистику
Один из самых частых сценариев — нужно сгенерировать интерфейс, который визуально совпадает с конкретным брендом. Достаточно скопировать подходящий DESIGN.md в корень проекта и передать агенту инструкцию. Например, для стилизации под Vercel:
bash# Клонируем репозиторий и копируем нужный DESIGN.md
git clone https://github.com/VoltAgent/awesome-design-md.git
cp awesome-design-md/design-md/vercel.md ./DESIGN.md
Затем в запросе к агенту указываем:
Сгенерируй страницу входа, следуя стилям из DESIGN.md.
Используй цвета: primary #000000, secondary #666666.
Шрифт Inter, минимальный reset 4px.
Агент читает файл и выдаёт разметку. Пример того, что получается после генерации:
html<!-- login.html -->
<div class="login-container">
<h1 class="text-primary font-inter text-2xl">Вход в систему</h1>
<input
class="border border-gray-300 rounded px-4 py-2 mt-4 focus:ring-2 focus:ring-black"
type="email" placeholder="Email" />
<button class="bg-black text-white px-6 py-2 rounded mt-4 hover:bg-gray-800 transition">
Войти
</button>
</div>
Главное — предсказуемость. Файл DESIGN.md фиксирует все токены: цвета, отступы, типографику. Это как наличие схемы электропроводки перед тем, как позвать электрика.
Интеграция с дизайн-токенами Figma и CI/CD-пайплайнами
Другой сценарий — дизайнер регулярно обновляет токены в Figma, а разработчику нужно поддерживать синхронность. Ручное копирование — утомительный процесс, который легко автоматизировать через GitHub Actions.
Сначала настроим выгрузку токенов из Figma. Используем любой инструмент экспорта токенов — например, Figma Tokens или Style Dictionary:
yaml# .github/workflows/sync-design.yml
name: Sync Design Tokens
on:
schedule:
- cron: '0 9 * * 1' # Каждый понедельник в 9:00
workflow_dispatch:
jobs:
sync:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Fetch Figma tokens
run: |
curl -H "X-Figma-Token: ${{ secrets.FIGMA_TOKEN }}" \
"https://api.figma.com/v1/files/${{ secrets.FILE_KEY }}/variables" \
> figma-tokens.json
- name: Generate DESIGN.md
run: |
node scripts/generate-design-md.js figma-tokens.json > DESIGN.md
- name: Commit changes
run: |
git config --global user.name "design-bot"
git add DESIGN.md
git diff --quiet && git diff --staged --quiet || git commit -m "chore: update design tokens"
git push
Скрипт generate-design-md.js превращает JSON в формат, читаемый агентами:
javascript// scripts/generate-design-md.js
const fs = require('fs');
const tokens = JSON.parse(fs.readFileSync(process.argv[2]));
const md = `# Design System
## Colors
- primary: ${tokens.colors.primary.value}
- secondary: ${tokens.colors.secondary.value}
## Typography
- font-family: ${tokens.typography.fontFamily.value}
- base-size: ${tokens.typography.baseSize.value}px
## Spacing
- base-unit: ${tokens.spacing.base.value}px
- scale: 4, 8, 12, 16, 24, 32
`;
console.log(md);
Теперь каждый раз, запуская AI-агента, мы получаем UI в актуальном фирменном стиле. Это экономит минимум два часа в спринте — время, которое обычно уходит на правку отступов и подбор цветов.
Часто задаваемые вопросы
Чем DESIGN.md отличается от обычного дизайн-токена или CSS-переменных
DESIGN.md — это не набор CSS-переменных и не JSON-файл с токенами вроде тех, что генерирует Style Dictionary. Это структурированный текстовый документ в формате Markdown, который описывает дизайн-систему на естественном языке: палитру, типографику, паттерны компонентов, правила компоновки и — что критически важно — ограничения. AI-агент читает этот файл как контекст и использует его при генерации кода, а не как набор значений для подстановки. В отличие от чистых токенов, DESIGN.md содержит семантические указания вроде «не использовать более двух акцентных цветов на странице» или «карточки всегда имеют тень второго уровня», которые агент способен интерпретировать и применять последовательно.
Нужно ли редактировать DESIGN.md под каждый проект или можно использовать как есть
Коллекция awesome-design-md содержит готовые файлы, и для прототипа или MVP их можно использовать без изменений — просто скопировать в корень проекта и указать агенту, какой стиль использовать. Однако для продакшн-проекта рекомендуется адаптировать файл: заменить цвета на свои брендовые, скорректировать типографскую шкалу под реальный контент, добавить описание специфичных компонентов вашего приложения. Предсказуемость результата напрямую зависит от того, насколько точно DESIGN.md отражает вашу дизайн-систему. Чем конкретнее файл, тем меньше правок придётся вносить в сгенерированный код.
Какие AI-агенты поддерживают работу с DESIGN.md
Формат не привязан к конкретному агенту. Любой инструмент, который читает файлы проекта для построения контекста, будет использовать DESIGN.md — это Cursor, GitHub Copilot, Claude Code, Aider, Windsurf и аналоги. Принцип работы одинаковый: агент сканирует корень проекта, находит DESIGN.md, загружает его в контекстное окно и при генерации интерфейса опирается на описанные там правила. Если ваш агент поддерживает чтение произвольных файлов из рабочей директории — он поддерживает DESIGN.md.
Можно ли использовать DESIGN.md вместе с Tailwind CSS или другими CSS-фреймворками
Да, и это одна из распространённых комбинаций. В DESIGN.md описывается дизайн-система на уровне семантики и ограничений, а Tailwind выступает инструментом реализации. В файле можно явно указать, что проект использует Tailwind, и задать mapping — сопоставление кастомных цветов, размеров и отступов через конфигурацию tailwind.config.js. Агент, видя и DESIGN.md, и конфигурацию фреймворка, генерирует компоненты с правильными классами, а не произвольными inline-стилями. Такой подход даёт и визуальную консистентность из DESIGN.md, и предсказуемость утилитарного CSS.
Что делать, если нужного бренда нет в коллекции awesome-design-md
Есть два пути. Первый — взять ближайший по стилю файл и адаптировать его: заменить палитру, подстроить типографику, скорректировать описание компонентов. Это занимает 15–30 минут и даёт приемлемый результат для большинства задач. Второй — создать DESIGN.md с нуля, проанализировав целевой сайт: извлечь цвета через инструменты вроде ColorZilla, определить типографскую шкалу, зафиксировать паттерны отступов и компонентов. Репозиторий awesome-design-md содержит примеры структуры, поэтому даже самостоятельное написание файла — это не с чистого листа, а по образцу.