Как подружить AI-агентов с вашим дизайном без боли и Figma-плагинов

Знакомая история: вы просите Claude или Cursor набросать интерфейс, а на выходе получаете либо дефолтный Tailwind, либо «винегрет» из случайных стилей. Вроде работает, но выглядит как поделка из начала нулевых. Проблема не в том, что нейронка плохо «рисует», а в том, что у неё нет контекста вашего визуального языка. Обычно мы пытаемся решить это огромными системными промптами или закидыванием скриншотов, но есть способ элегантнее.

Недавно наткнулся на репозиторий awesome-design-md, который продвигает концепцию DESIGN.md. Это текстовый файл в корне проекта, который служит «библией стиля» для AI-агентов. Оказывается, Markdown — это лучший формат для передачи дизайн-токенов нейросетям.

Что такое DESIGN.md и зачем он вам

Идею предложили ребята из Google Stitch. Суть проста: если README.md объясняет людям, как запустить код, а AGENTS.md говорит AI, как его писать, то DESIGN.md диктует, как всё это должно выглядеть.

Вместо того чтобы заставлять LLM гадать, какой оттенок серого вы используете для бордеров, вы даете ей структурированный файл с цветами, типографикой и правилами отступов. Это не JSON со спецификациями, который сложно читать человеку, а обычный Markdown. Нейронки отлично понимают его структуру и иерархию.

Что внутри этого репозитория

Проект awesome-design-md — это огромная коллекция уже готовых файлов DESIGN.md, «разобранных» по косточкам с реальных топовых сервисов.

Здесь собрано больше 70 примеров:

AI-платформы: от минималистичного Anthropic Claude до «терминального» стиля Ollama.
Dev-инструменты: Vercel с его черно-белой эстетикой, Supabase с изумрудными акцентами или Linear с их легендарным вниманием к деталям.
Финтех и корпораты: Stripe, Apple, даже ретро-дизайн Dell из 1996 года для любителей ностальгии.

Как это работает на практике

Допустим, вы хотите сделать админку в стиле Stripe. Вместо того чтобы вручную подбирать градиенты и шрифты, вы берете готовый файл из коллекции.

Каждый DESIGN.md в репозитории содержит:

Атмосферу: описание общего настроения (например, «плотный интерфейс», «много воздуха»).
Палитру: конкретные HEX-коды и их роли (Primary, Surface, Accent).
Типографику: правила для заголовков, основного текста и моноширинных шрифтов.
Компоненты: как должны выглядеть кнопки, карточки и инпуты, включая состояния hover и focus.
Принципы верстки: сетки, отступы и логику адаптивности.

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

Почему это удобнее Figma

Я часто вижу, как разработчики мучаются с экспортом стилей из Figma. Это вечная борьба с плагинами и форматами. DESIGN.md решает другую задачу — он не заменяет макет, а дает AI «инструкцию по эксплуатации» вашего стиля.

Интересно, что авторы добавили в каждый набор файлы preview.html и preview-dark.html. Это живые каталоги, где можно сразу увидеть, как выбранный стиль отрисовывается в браузере. Если вам нужно быстро «примерить» визуальный язык Linear на свой проект, это делается за пару минут.

Кому это пригодится

Проект будет полезен в двух случаях. Во-первых, если вы пилите пет-проект и не хотите тратить время на дизайн — просто берете готовый стиль (например, Raycast или Vercel) и получаете профессиональный вид «бесплатно». Во-вторых, если вы внедряете AI-агентов в рабочий процесс компании. Можно один раз описать свой брендбук в формате DESIGN.md, и агент перестанет предлагать вам странные цветовые решения.

Коллекция постоянно пополняется, и там даже есть раздел с ретро-дизайном. Если вам вдруг захочется сделать современное приложение с вайбом веба 90-х, там есть отличный разбор Dell 1996 года с теми самыми «выпуклыми» кнопками и гифками.

В общем, если вы активно используете AI для написания фронтенда, этот репозиторий стоит закинуть в закладки. Это, пожалуй, самый простой способ заставить нейронку выдавать не просто рабочий, но и красивый код.