У каждого проекта есть README.md — файл, который объясняет людям, как устроен проект. Теперь появился аналог для AI: DESIGN.md — файл, который объясняет языковой модели, как должен выглядеть интерфейс.
Концепцию представил Google Stitch — AI-инструмент для генерации UI. Идея проста: вместо того чтобы каждый раз описывать в промпте цвета, шрифты и отступы, вы один раз фиксируете правила дизайн-системы в обычном markdown-файле и кладёте его в корень проекта. Любой AI-агент — будь то Cursor, Claude Code, Copilot или сам Stitch — читает этот файл и генерирует UI, который выглядит так, как нужно.
Зачем это нужно
Когда вы просите AI написать интерфейс, он каждый раз «придумывает» дизайн с нуля. Результат — визуальный хаос: разные отступы на разных страницах, произвольные цвета, несогласованная типографика. Чем больше экранов генерирует агент, тем сильнее расползается стиль.
DESIGN.md решает эту проблему на корню. Файл работает как контекст для модели — набор жёстких правил, которые агент обязан соблюдать при генерации любого компонента.
Как устроен файл
DESIGN.md — это обычный markdown. Никаких специальных парсеров, JSON-схем или Figma-экспортов. Внутри — секции, описывающие визуальные правила проекта:
- Цветовая палитра — primary, secondary, accent, фоны, состояния
- Типографика — шрифты, размеры, межстрочные интервалы
- Отступы и сетка — spacing scale, breakpoints, контейнеры
- Компоненты — кнопки, карточки, формы, навигация
- Тон и стиль — rounded vs sharp, минимализм vs насыщенность, тёмная тема
Формат намеренно простой: markdown — это то, что LLM читают лучше всего. Никакой конфигурации, никакого тулинга — просто текстовый файл.
Место в экосистеме
DESIGN.md вписывается в растущую экосистему .md-файлов, которые дают AI-агентам контекст о проекте:
| Файл | Кто читает | Что описывает |
| README.md | Люди | Что делает проект и как его запустить |
| AGENTS.md | Coding-агенты | Как собирать и тестировать проект |
| DESIGN.md | Design-агенты | Как проект должен выглядеть |
| CLAUDE.md | Claude Code | Правила и предпочтения для агента |
Логика одна: чем больше структурированного контекста получает модель, тем предсказуемее результат.
Awesome Design MD
Команда VoltAgent собрала курируемую коллекцию готовых DESIGN.md-файлов, вдохновлённых дизайн-системами популярных продуктов:
- Stripe — чистая типографика, контрастные акценты
- Vercel — минимализм, монохром, геометрия
- Linear — тёмная тема, чёткая иерархия
- Notion — светлый фон, мягкие тени, читаемость
- Figma — яркие градиенты, rounded corners
- GitHub — системная палитра, плотная вёрстка
Можно взять любой файл, положить в свой проект и сказать AI-агенту: «Сделай страницу в этом стиле». Агент прочитает DESIGN.md и сгенерирует UI, визуально близкий к оригиналу.
Как использовать
Шаг 1. Создайте файл DESIGN.md в корне проекта.
Шаг 2. Опишите визуальные правила: цвета, шрифты, отступы, стиль компонентов. Можно начать с готового файла из awesome-design-md и адаптировать под себя.
Шаг 3. Если используете Google Stitch — импортируйте файл напрямую. Stitch умеет и экспортировать дизайн-систему в формат DESIGN.md.
Шаг 4. Для других AI-инструментов (Cursor, Claude Code, Copilot) — добавьте в инструкции агента указание: «Перед генерацией UI прочитай DESIGN.md в корне проекта».
Ограничения
- Не заменяет полноценную дизайн-систему. DESIGN.md — это «переводчик» между вашими правилами и AI. Для сложных проектов с десятками компонентов и состояний одного файла будет мало.
- Зависит от модели. Насколько точно агент соблюдает правила — зависит от конкретной LLM и качества промпта.
- Нет валидации. Файл не проверяется автоматически — если AI отклонится от правил, вы узнаете об этом только визуально.
Ссылки
- Документация DESIGN.md — официальная спецификация от Google Stitch
- Google Stitch — AI-инструмент для генерации UI
- awesome-design-md — коллекция готовых DESIGN.md-файлов от VoltAgent
По теме
- Статья: Почему готовые ИИ-агенты не работают — и что делать вместо
- Блог: Привычка фиксировать мысли — самый недооценённый буст для работы с ИИ
- База знаний: AI-генераторы дизайна: обзор инструментов
Если вы уже генерируете интерфейсы через AI и хотите навести порядок в визуальной консистентности — DESIGN.md стоит попробовать первым делом. Давайте обсудим, как встроить это в ваш рабочий процесс.