Что такое DESIGN.md и зачем он нужен ИИ
Когда дизайнер или разработчик давно работает с проектом, часть правил уже не приходится проговаривать. Он знает фирменную палитру, шрифты, отступы, радиусы карточек и то, что градиенты здесь вообще не нужны.
ИИ этих правил не знает, пока вы явно не передали их в контекст.
Можно попросить модель сделать новую страницу «в стиле сайта», но ей всё равно придётся решить десятки мелочей: оттенки, размеры, радиусы, карточки, иконки, изображения. Один экран получится строгим, второй — типичным SaaS, а третий внезапно обзаведётся градиентами.
DESIGN.md сокращает пространство произвольных решений.
Это Markdown-файл, в котором зафиксированы визуальные правила проекта: цвета, типографика, сетка, компоненты, изображения, адаптивность, ограничения и правила принятия решений. Его можно передавать ИИ как постоянный дизайн-контекст вместе с конкретными задачами.
Файл не гарантирует, что любая модель безошибочно выполнит каждое правило. Его задача практичнее: уменьшить количество вещей, которые ИИ приходится додумывать самостоятельно.
Что содержит DESIGN.md
Итоговый файл описывает несколько групп правил дизайн-системы.
| Группа | Что фиксируется |
|---|---|
| Визуальная основа | цвета, шрифты, размеры текста, сетка, spacing |
| Компоненты | радиусы, кнопки, карточки, поля, границы, тени |
| Визуальный контент | фотография, иллюстрации, 3D, иконки, декор |
| Поведение | motion, responsive, состояния компонентов |
| Правила | ограничения, Do / Don't и AI Decision Rules |
Здесь есть важное различие между значениями, правилами и ограничениями.
Цвет #173B57 — значение. «Использовать существующую палитру» — правило. «Не добавлять новые цвета» — ограничение.
Поэтому DESIGN.md — это больше, чем список design tokens. Раздел AI Decision Rules подсказывает модели, как действовать дальше: повторно использовать существующие токены и компоненты, не придумывать новые шрифты и цвета, не вводить новый декоративный приём без необходимости, а при неопределённости выбирать ближайший существующий паттерн.
То есть файл отвечает не только на вопрос «какой радиус у карточки», но и на более полезный: «что делать, если нужно создать новый компонент, которого раньше не было».
Как генератор собирает дизайн-систему
Логика простая:
Визуальный пресет → параметры бренда → индивидуальные настройки → ограничения → DESIGN.md
Сначала выбирается одно из девяти визуальных направлений. Пресет содержит исходные значения палитры, типографики, геометрии, компонентов, изображений и motion, но остаётся отправной точкой, а не готовым шаблоном.
Если у бренда есть свои цвета и шрифты, они заменяют значения пресета. Дополнительно можно изменить сетку, радиусы, кнопки, карточки, иконки, тени, изображения, анимацию и другие параметры.
Жёсткие ограничения имеют более высокий приоритет. Например, пресет может допускать 3D, но после выбора «Без 3D» этот приём будет исключён из итоговой спецификации. Генератор также проверяет часть конфликтующих настроек.
Если дизайн-система уже существует, инструмент помогает перевести её основные правила в Markdown. Если её пока нет, пресет даёт базу для дальнейшей настройки.
Где можно использовать DESIGN.md
Генератор поддерживает шесть областей применения: сайты и лендинги, продуктовые интерфейсы, презентации, email, маркетинговые материалы и социальные сети.
Для выбранных областей в DESIGN.md добавляются отдельные рекомендации: для сайта — иерархия, CTA и адаптивность; для продуктового интерфейса — формы, таблицы и состояния; для презентаций — композиция и графики; для email — мобильная структура и ограничения вёрстки.
Можно выбрать сразу несколько назначений, чтобы один файл описывал общую визуальную систему бренда и правила для разных форматов.
Как использовать DESIGN.md с ChatGPT, Claude Code, Codex и Cursor
Базовый сценарий:
- Создайте и скачайте
DESIGN.md. - Добавьте файл в проект или передайте его AI-инструменту вместе с задачей.
- Укажите, что файл содержит дизайн-систему проекта.
- Попросите использовать существующие значения, компоненты и ограничения до создания новых.
Например:
Используй DESIGN.md как дизайн-систему проекта. При создании новых компонентов сначала используй существующие токены, паттерны и ограничения из файла. Не добавляй новые визуальные решения без необходимости.
После этого можно поставить конкретную задачу: сделать страницу тарифов, карточку товара, форму регистрации или новый экран.
Название DESIGN.md само по себе ничего не включает. Способ постоянного подключения файла зависит от конкретной среды.
Генератор формирует итоговый файл на английском — это удобно для AI coding и других инструментов, где технические инструкции обычно передаются в таком формате.
DESIGN.md, промт и бренд-гайд: в чём разница
У этих документов разные задачи.
| Критерий | DESIGN.md | Промт | Бренд-гайд |
|---|---|---|---|
| Задача | Визуальные правила для ИИ и разработки | Конкретная задача | Визуальная идентичность бренда |
| Использование | Многократно | Под задачу или сценарий | Как постоянный справочник |
| Содержимое | Значения, компоненты, правила, ограничения | Цель, контекст, требования | Логотип, цвета, типографика, правила бренда |
Промт отвечает на вопрос: что сделать сейчас. DESIGN.md — по каким визуальным правилам это делать.
Например, в промте достаточно попросить создать страницу новой услуги. Палитру, размеры заголовков, сетку, радиусы и запрет на лишние эффекты не придётся повторять, если они уже записаны в DESIGN.md и переданы модели как контекст.
Бренд-гайд шире описывает идентичность бренда, а полноценная дизайн-система может включать макеты, библиотеки компонентов и процессы команды. DESIGN.md не заменяет их — он переводит нужную часть правил в компактный текстовый формат для ИИ и разработки.
DESIGN.md учитывает адаптивность и доступность
Генератор проверяет контраст основного текста и фона и добавляет требования к accessibility: контраст, focus indicator, порядок управления с клавиатуры, размеры интерактивных областей и поддержку reduced motion.
Отдельно задаётся стратегия responsive-поведения: сохранять композицию, упрощать её или перекомпоновывать сложные блоки на небольших экранах.
Поэтому DESIGN.md описывает не только внешний вид макета, но и часть правил поведения интерфейса. После генерации файл можно открыть в любом текстовом редакторе, изменить вручную и хранить вместе с проектом.
