DESIGN.md

DESIGN.md: файл, который объясняет ИИ, как должен выглядеть ваш сайт

ИИ может собрать страницу, написать код и добавить анимацию. Но он не знает, какой именно дизайн нужен вашему проекту, пока вы не дадите ему конкретные правила. Фраза «сделай современно и красиво» не описывает дизайн. Для одного проекта современно означает строгую черно белую сетку, для другого крупную типографику и яркие цвета, для третьего спокойный интерфейс без лишних деталей. Чтобы не объяснять эти правила в каждом запросе, их можно собрать в одном файле. Он называется DESIGN.md.

Что такое DESIGN.md

Это обычный текстовый файл в формате Markdown, который описывает визуальную систему проекта понятным для ИИ языком.

Внутри обычно указывают:

🖊 основные и дополнительные цвета

🖊шрифты, размеры и насыщенность текста

🖊расстояния между элементами

🖊 ширину блоков и правила сетки

🖊скругления, границы и тени

🖊 внешний вид кнопок, карточек и полей

🖊 правила для навигации

🖊допустимые анимации

🖊 примеры правильного и неправильного оформления

В официальной спецификации Google файл состоит из двух частей. Первая содержит точные значения, например коды цветов, размеры текста и отступы. Вторая объясняет общий характер дизайна и логику использования этих значений. То есть md хранит не только ответ на вопрос «какой цвет использовать», но и объяснение «где и зачем его использовать».

Как это работает

1️⃣Сначала вы создаете или скачиваете подходящий DESIGN.md.

2️⃣Затем добавляете его в папку проекта или прикрепляете к запросу в AI инструменте.

3️⃣После этого даете агенту прямую инструкцию:

«Изучи файл DESIGN.md и используй его как основную дизайн систему проекта. Соблюдай указанные цвета, типографику, сетку, отступы и правила компонентов при создании всех экранов».

Агент читает файл перед работой и использует его как постоянный визуальный бриф. Например, если в md указано, что у проекта теплый светлый фон, один акцентный цвет, строгая типографика и минимальные скругления, агенту уже не нужно самостоятельно придумывать стиль каждой кнопки и карточки.

Важно понимать: md не обучает нейросеть заново и не меняет саму модель. Он передает ей контекст конкретного проекта.

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

В следующем посте я дам вам несколько сервисов где можно скачать готовые DESIGN.md. 🔽 Придумывать ничего, если вы не гуру дизайна (я вот нет) не обязательно.

#этостоитпротестить