Awesome DESIGN.md — коллекция дизайн-систем для AI-агентов
📂 Исходный код на GitHubКураторская подборка DESIGN.md-файлов, извлечённых из дизайн-систем популярных веб-сайтов. Охватывает AI-платформы, инструменты разработчика, SaaS, финтех, e-commerce, automotive и ретро-веб 90-х. Каждый файл описывает цветовую палитру, типографику, компоненты, принципы вёрстки и глубину — всё, что нужно AI-агенту для генерации консистентного UI.
Кураторская подборка DESIGN.md-файлов популярных брендовых дизайн-систем — результат анализа 73 веб-сайтов, упакованный в формат, который понимает любой AI-агент. Проект от команды VoltAgent набрал 102 тысячи звёзд на GitHub и входит в топ-150 мировых репозиториев по популярности.
Что такое DESIGN.md
DESIGN.md — концепция, предложенная Google Stitch. Это обычный Markdown-файл, который описывает дизайн-систему проекта: цветовую палитру, типографику, компоненты, отступы, тени и принципы вёрстки. Никакого Figma, JSON-схем или специального инструментария — просто текстовый документ, который AI-агент читает и применяет при генерации интерфейса.
Markdown — формат, который LLM понимают лучше всего. DESIGN.md использует это свойство: никакого парсинга, никакой конфигурации, только описание того, как должен выглядеть проект.
| Файл | Кто читает | Что определяет |
|---|---|---|
AGENTS.md |
Coding-агенты | Как собирать проект |
DESIGN.md |
Дизайн-агенты | Как проект должен выглядеть и ощущаться |
Что внутри каждого DESIGN.md
Каждый файл в коллекции следует спецификации Stitch DESIGN.md с расширенными секциями:
| # | Секция | Что описывает |
|---|---|---|
| 1 | Визуальная тема и атмосфера | Настроение, плотность, философия дизайна |
| 2 | Цветовая палитра и роли | Семантические имена + hex + функциональная роль |
| 3 | Правила типографики | Семейства шрифтов, полная иерархия |
| 4 | Стилизация компонентов | Кнопки, карточки, поля ввода, навигация с состояниями |
| 5 | Принципы вёрстки | Шкала отступов, сетка, философия whitespace |
| 6 | Глубина и elevation | Система теней, иерархия поверхностей |
| 7 | Do's and Don'ts | Дизайн-ограничения и антипаттерны |
| 8 | Адаптивное поведение | Breakpoints, touch-targets, стратегия сворачивания |
| 9 | Agent Prompt Guide | Быстрый цветовой справочник, готовые промпты |
К каждому сайту прилагается не только DESIGN.md, но и preview.html и preview-dark.html — визуальные каталоги, показывающие цветовые образцы, шкалу типографики, кнопки и карточки в светлом и тёмном режимах.
Как использовать
- Скопируйте
DESIGN.mdнужного сайта в корень своего проекта - Скажите AI-агенту: «сделай страницу в стиле этого DESIGN.md»
Агент прочитает файл и сгенерирует UI, визуально консистентный с оригинальным дизайн-языком выбранного бренда.
Коллекция
AI и LLM-платформы
Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, Runway, Together AI, VoltAgent, xAI
Инструменты разработчика
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
E-commerce и ритейл
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
Ретро-веб: ностальгический DESIGN.md
Субботняя серия — DESIGN.md-файлы из веба 1990-х. Dell (1996) в стиле каталогов с GIF-стикерами и рамками, Nintendo.com (2001) в стиле Y2K «console chrome».
Заказ DESIGN.md
Можно запросить DESIGN.md для любого сайта, включая приватные запросы с эксклюзивной доставкой.
AI Design + Build экосистема
Проект сопровождается LaunchKit — платформой для разработчиков, дизайнеров и «вайб-кодеров», создающих UI с помощью AI-агентов. Репозиторий занимает 150-е место в мировом рейтинге GitHub и предлагает спонсорское размещение для продуктов в AI-дизайн-экосистеме.
Контрибьюция
Проект принимает улучшения существующих DESIGN.md (исправление цветов, недостающих токенов, слабых описаний) и сообщения о проблемах. Перед открытием PR рекомендуется создать issue для обсуждения.
Лицензия — MIT.