Вместо экспорта из Figma: как формат DESIGN.md учит нейросети понимать интерфейсы

Любой дизайнер, наблюдавший за работой ИИ-агента в коде, знает этот момент растерянности: языковая модель охотно собирает каркас страницы, но моментально сваливается в безликие фиолетовые кнопки, случайные скругления и хаотичные отступы. Обычно эту проблему пытаются решить монструозными JSON-файлами, выгрузками токенов или плагинами к графическим редакторам. Команда VoltAgent предложила пойти по пути наименьшего сопротивления: превратить эстетику продукта в один структурированный файл Markdown, который просто бросают в корень репозитория. Их проект awesome-design-md взлетел на 150-е место в глобальном рейтинге GitHub, собрав коллекцию из 73 готовых дизайн-систем.

В основу идеи легла концепция DESIGN.md, изначально предложенная в стандарте Google Stitch. Суть проста: большие языковые модели читают текст намного лучше, чем запутанные схемы стороннего софта или громоздкие дизайн-токены. Текстовая спецификация на чистом Markdown объясняет агенту визуальные правила продукта на естественном языке, не требуя установки тяжелых графических сред или запуска промежуточных конвертеров. Когда агент начинает писать интерфейс, он просто считывает манифест и держит заданную стилистику в каждом сгенерированном компоненте.

Каждый ресурс в подборке авторы упаковали в строгую тройку файлов. Основой выступает сам DESIGN.md с полной инструкцией для искусственного интеллекта. Рядом лежат два каталога для быстрой визуальной сверки человеком: preview.html демонстрирует палитру, шрифты, кнопки и карточки на светлой подложке, а preview-dark.html показывает поведение тех же компонентов в темной теме.

Анатомия текстовой дизайн-системы

Чтобы машина не додумывала пропорции на ходу, спецификация каждого из 73 брендов разделена на девять обязательных блоков. Архитектура документа выстроена так, чтобы закрыть все уровни сборки интерфейса — от общей тональности до мобильной адаптивности:

• Визуальная тема и атмосфера: сжатое описание настроения, плотности элементов и ключевой философии продукта.
• Цветовая палитра и роли: функциональное назначение оттенков, семантические имена и точные HEX-коды для светлых и темных поверхностей.
• Правила типографики: выбранные семейства шрифтов и подробная таблица иерархии кеглей, интерлиньяжа и трекинга.
• Стили компонентов: спецификации кнопок, инпутов, карточек и навигации с обязательным разбором интерактивных состояний вроде наведения или фокуса.
• Принципы верстки: шаг модульной сетки, шкала отступов и подход к использованию пустого пространства вокруг смысловых блоков.
• Глубина и возвышение: иерархия поверхностей и расчет параметров теней для разных уровней интерфейса.
• Правила «Что можно и чего нельзя делать»: жесткие охранные рамки, антипаттерны и запрещенные дизайн-приемы.
• Адаптивное поведение: контрольные точки брейкпоинтов, минимальные габариты областей касания для пальца и логика сворачивания блоков на смартфонах.
• Руководство по промптам для агентов: выжимка цветовых ориентиров и готовые текстовые директивы, которые можно напрямую скармливать модели при генерации нового экрана.

От ретро-веба до гиперкаров

Каталог репозитория охватывает практически весь спектр современной цифровой эстетики, от утилитарного софта для инженеров до премиального ритейла и культовых интерфейсов прошлого.

В категорию платформ искусственного интеллекта и больших языковых моделей вошли спецификации для Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, Runway, Together AI, xAI, а также самого VoltAgent. Инструменты разработки и среды кодинга представлены системами Cursor, Expo, Lovable, Raycast, Superhuman, Vercel и Warp. Инфраструктуру, базы данных и DevOps-инструменты описали через дизайн-языки ClickHouse, Composio, HashiCorp, MongoDB, PostHog, Sanity, Sentry и Supabase.

Сектор продуктивности и SaaS-сервисов авторы разобрали на примерах Cal.com, Intercom, Linear, Mintlify, Notion, Resend и Zapier. Для креативных платформ зафиксировали интерфейсную логику Airtable, Clay, Figma, Framer, Miro и Webflow. Финтех и криптовалютные сервисы представлены правилами верстки Binance, Coinbase, Kraken, Mastercard, Revolut, Stripe и Wise. Электронную коммерцию и потребительский сектор раскрывают дизайн-системы Airbnb, Meta, Nike, Shopify и Starbucks.

Блок медиа и потребительских технологий включает спецификации Apple, HP, IBM, NVIDIA, Pinterest, PlayStation, SpaceX, Spotify, The Verge, Uber, Vodafone и WIRED. В автомобильном разделе создатели каталога оцифровали эстетику BMW, BMW M, Bugatti, Ferrari, Lamborghini, Renault и Tesla. Отдельный интерес представляет секция ретро-веба: в ней собрали прецизионные описания раннего веба — например, каталожный стиль сайтов Dell образца 1996 года или экранную эстетику консольных систем Nintendo 2001 года.

Для арт-директоров и продуктовых дизайнеров этот переход на текстовую разметку снимает привычную головную боль при передаче макетов в нейросетевую разработку. Вместо того чтобы вручную следить за каждым радиусом или писать километровые системные промпты в чате, достаточно положить проверенный манифест в репозиторий проекта. Агент больше не выдумывает собственный стиль — он вынужден следовать зафиксированным координатам.