Design.md

Source: https://github.com/VoltAgent/awesome-design-md at f6961238d5cd
License: MIT
Read the English original

This edition is an AI-assisted translation.

Кураторская коллекция анализа DESIGN.md веб-сайтов, ориентированных на разработчиков.

Подборка DESIGN.md

Копируйте DESIGN.md в свой проект, скажите своему агенту ИИ «создайте мне страницу, которая выглядит так», и создайте высококачественный пользовательский интерфейс, который визуально соответствует языку дизайна.

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

Что такое DESIGN.md?

DESIGN.md Это новая концепция, представленная Google Stitch. Простой текстовый документ системы проектирования, который агенты ИИ читают для создания последовательного пользовательского интерфейса.

Это просто файл разметки. Никакого экспорта Figma, никаких схем JSON, никаких специальных инструментов. Опустите его в корень вашего проекта, и любой агент по кодированию ИИ или Google Stitch мгновенно поймет, как должен выглядеть ваш пользовательский интерфейс. Markdown - это формат, который LLM читают лучше всего, поэтому нечего анализировать или настраивать.

Файл	Кто его читает	Что это определяет
AGENTS.md	Кодирующие агенты	Как построить проект
DESIGN.md	Дизайнерские агенты	Как должен выглядеть и чувствоваться проект

Репо предоставляет готовые к использованию файлы DESIGN.mdИзвлечено с реальных сайтов.

Запросить файл DESIGN.md

Ты можешьзапросить DESIGN.md для конкретного веб-сайта, включая частные запросы, предоставляемые исключительно вам.

Инструменты экосистемы дизайна и разработки с ИИ

Вы отправляете продукты с ИИ, но каждый запуск по-прежнему тихо умирает, потому что об этом никто не пишет.EveryFeed Подключает ИИ-помощника к социальному рабочему пространству, которое разрабатывает, планирует и публикует более 35 каналов — ни агентства, ни маркетинга.

👉 Представьте свой продукт рядом с разработчиками, дизайнерами и вайб-кодерами, создающими интерфейсы с помощью ИИ-агентов для программирования и веб-конструкторов. Рейтинг #150 по всему миру на GitHub. Ресурс сообщества, используемый разработчиками, дизайнерами и вибкодерами.

Коллекция

Платформы ИИ и LLM

• Claude - Помощник Антропика. Теплый терракотовый акцент, чистая редакционная планировка
• Cohere - Платформа Enterprise AI. Яркие градиенты, богатая данными эстетика приборной панели
• ElevenLabs - Голосовая платформа. Темный кинематографический пользовательский интерфейс, аудио-волновая эстетика
• Minimax - Поставщик моделей ИИ. Смелый темный интерфейс с неоновыми акцентами
• Mistral AI - Поставщик LLM с открытым весом. Французский минимализм, фиолетовый
• Ollama - Управляйте LLM локально. Терминал первый, монохромная простота
• OpenCode AI - Платформа кодирования AI. Темная тема, ориентированная на разработчиков
• Replicate - Запуск моделей ML через API. Чистый белый холст, код-форвард
• Runway - Платформа творческих инструментов ИИ с редакционной эстетикой кинофестиваля — кинематографические темные герои, бумажно-белые группы чтения, одиночные проприетарные без и чистые черные таблетки CTA.
• Together AI - Инфраструктура с открытым исходным кодом. Технический дизайн в стиле blueprint
• VoltAgent - Структура агента ИИ. Пусто-черное полотно, изумрудный акцент, терминально-родной
• xAI - Лаборатория Илона Маска. Монохром Старка, футуристический минимализм

Инструменты разработчика и IDE

• Cursor - Первый редактор кода. Гладкий темный интерфейс, градиентные акценты
• Expo - Нативная платформа React. Темная тема, плотная протяженность букв, код-центричный
• Lovable - Создатель полного стека. Игривые градиенты, дружелюбная эстетика dev
• Raycast - Пусковая установка производительности. Гладкий темный хром, яркие градиентные акценты
• Superhuman - Быстрый почтовый клиент. Премиум темный UI, клавиатура первая, фиолетовое свечение
• Vercel - Платформа развертывания Frontend. Черно-белая точность, шрифт Geist
• Warp - Современный терминал. Dark IDE-подобный интерфейс, блочный командный интерфейс

Бэкенд, базы данных и DevOps

• ClickHouse - Быстрая аналитическая база данных. Желтый акцент, стиль технической документации
• Composio - Интеграционная платформа инструментов. Современный темный с красочными иконками интеграции
• HashiCorp - Автоматизация инфраструктуры. Предприятие чистое, черное и белое
• MongoDB - База данных документов. Маркировка зеленых листьев, фокус документации разработчика
• PostHog - Аналитика продукта. Игровой брендинг ежа, темный UI для разработчиков
• Sanity - Платформа безголового контента с темной первой редакционной маркетинговой поверхностью — тип дисплея 112px, технические брови IBM Plex Mono и один кораллово-красный акцент, зарезервированный для наиболее приоритетного CTA.
• Sentry - Контроль ошибок. Темная приборная панель, насыщенный данными, розово-фиолетовый акцент
• Supabase - Альтернатива Open Source Firebase. Темная изумрудная тема, код первый

Продуктивность и SaaS

• Cal.com - Открытый исходный код. Чистый нейтральный пользовательский интерфейс, ориентированная на разработчиков простота
• Intercom - Обмен сообщениями с клиентами. Дружелюбная синяя палитра, разговорные шаблоны пользовательского интерфейса
• Linear - Управление проектами для инженеров. Ультраминимальный, точный, фиолетовый акцент
• Mintlify - Документационная платформа. Чистый, зеленый, оптимизированный для чтения
• Notion - Все в одном рабочем пространстве. Теплый минимализм, засечки, мягкие поверхности
• Resend - API электронной почты для разработчиков. Минимальная темная тема, монопространственные акценты
• Zapier - Платформа автоматизации. Теплый апельсин, дружелюбная иллюстрация

Инструменты дизайна и творчества

• Airtable - Гибрид базы данных. Красочные, дружелюбные, структурированные данные эстетически
• Clay - Творческое агентство. Органические формы, мягкие градиенты, арт-ориентированная компоновка
• Figma - Инструмент совместного дизайна. Яркий многоцветный, игривый, но профессиональный
• Framer - Создатель сайтов. Смелый черный и синий, движение вперед, дизайн вперед
• Miro - Визуальное сотрудничество. Яркий желтый акцент, бесконечная эстетика холста
• Webflow - Визуальный веб-строитель. Синий акцент, полированный маркетинговый сайт эстетичный

Финтех и криптовалюты

• Binance - Криптообмен. Bold Binance Yellow на монохромном, срочном торговом этаже
• Coinbase - Криптообмен. Чистая синяя идентичность, ориентированная на доверие, институциональное чувство
• Kraken - Торговая платформа Crypto. Purple-accented dark UI, информационные панели с высокой плотностью данных
• Mastercard - Глобальная платежная сеть. Теплый кремовый холст, орбитальные формы таблеток, редакционное тепло
• Revolut - Цифровой банкинг. Гладкий темный интерфейс, градиентные карты, точность финтеха
• Stripe - Платежная инфраструктура. Фиолетовые градиенты, элегантность вес-300
• Wise - Международный денежный перевод. Яркий зеленый акцент, дружелюбный и четкий

Электронная коммерция и розница

• Airbnb - Рынок путешествий. Теплый коралловый акцент, фотоуправляемый, округлый пользовательский интерфейс
• Meta - Технологический розничный магазин. Фотография-первая, двоичные светлые/темные поверхности, Meta Blue CTA
• Nike - Спортивная розничная торговля. Монохромный интерфейс, массивная футура, полнокровная фотография
• Shopify - Платформа электронной коммерции. Темно-первый кинематографический, неоново-зеленый акцент, ультралегкий тип дисплея
• Starbucks - Флагман розничной торговли кофе. Четырехуровневая земляно-зеленая система, теплый кремовый холст, фирменная типография SoDoSans

Медиа и потребительские технологии

• Apple - потребительской электроники. Премиум белое пространство, SF Pro, кинематографические образы
• HP - Производитель ПК и принтеров. Чистый белый холст, сигнал HP Electric Blue CTA, геометрическая форма DJR Micro, синие шевронные украшения
• IBM - Технологии предприятия. Углеродная система проектирования, структурированная синяя палитра
• NVIDIA - GPU вычисления. Зелено-черная энергетика, эстетическая техническая мощь
• Pinterest - Платформа визуальных открытий. Красный акцент, каменная сетка, имидж первый
• PlayStation - Игровая консоль розничная. Трехповерхностная компоновка канала, cyan hoverscale interaction
• SpaceX - Космические технологии. Старки черно-белые, полнокровные образы, футуристические
• Spotify - Потоковая музыка. Яркий зеленый на темном, смелом типе, альбом-арт
• The Verge - Технические редакторские СМИ. Кислотно-мятный и ультрафиолетовый акценты, тип дисплея Манука
• Uber - Мобильная платформа. Смелый черно-белый, плотный тип, городская энергетика
• Vodafone - Глобальный телекоммуникационный бренд. Монументальный верхний дисплей, Vodafone Red Chapter Bands
• WIRED - Технологический журнал. Плотность листов бумаги белого цвета, засечки на заказ, чернильно-голубые звенья

Автомобили

• BMW - Роскошный автомобиль. Темные поверхности премиум-класса, точная немецкая инженерная эстетика
• BMW M - Производительность автомобиля. Контраст, вдохновленный автоспортом, акценты цвета M, точное расположение
• Bugatti - Роскошный гиперкар. Кино-черное полотно, монохромная строгость, монументальный тип отображения
• Ferrari - Роскошный автомобиль. Черно-белая редакция Chiaroscuro, Ferrari Red с экстремальной редкостью
• Lamborghini - Роскошный автомобиль. Истинно черный собор, золотой акцент, обычай LamboType Нео-Гротеск
• Renault - Французский автомобиль. Яркие градиенты сияния, фирменный шрифт NouvelR, кнопки с нулевым радиусом
• Tesla - Электромобили. Радикальное вычитание, кинематографическая полноэкранная фотография, Universal Sans

Ретро-веб · ностальгия по DESIGN.md

Субботняя серия — файлы DESIGN.md, извлеченные из Интернета 1990-х годов. Бросьте один и скажите своему агенту ИИ, чтобы он создал точный винтажный пользовательский интерфейс.

• Dell (1996) - Корпоративная сеть эпохи каталогов. Буквальная черная рамка страницы, плоские цветные блоки «карты ленты», громоздкие названия Helvetica-Black над римским телом Times и ручные наклейки GIF (NEW!) всплески, наградные печати, скошенные фотографии продукта.
• Nintendo.com (2001) - Y2K “консольный хром” web. Изогнутые перивинкловые скошенные металлические панели, полутоновый углеродный нав, светящийся янтарь, очерченные ариал-черные художественные словарные знаки над полями героев на плате и пиксельный пузырь Марио.

Что включает каждый DESIGN.md

Каждый файл следует заформат Stitch DESIGN.md с расширенными разделами:

#	Раздел	Что захватывает
1	Визуальная тема и атмосфера	Настроение, плотность, философия дизайна
2	Цветовая палитра и роли	Семантическое имя + гекс + функциональная роль
3	Правила типографии	Семьи шрифтов, таблица полной иерархии
4	Компонентный стиль	Кнопки, карты, входы, навигация с состояниями
5	Принципы расстановки	Шкала пространства, сетка, философия белого пространства
6	Глубина и высота	Теневая система, поверхностные иерархии
7	Do’s и Don’ts	Конструкция ограждений и антипаттернов
8	Ответственное поведение	Точки останова, цели касания, стратегия разрушения
9	Агент Быстрый гид	Быстрая цветовая ссылка, готовые к использованию подсказки

Каждый сайт включает в себя:

Файл	Цель
DESIGN.md	Система проектирования (что читают агенты)
preview.html	Визуальный каталог, показывающий цветные часы, шкалу типов, кнопки, карты
preview-dark.html	Тот же каталог с темными поверхностями

Как использовать

1. Копировать сайтDESIGN.mdКорень вашего проекта
2. Скажи своему агенту использовать его.

Участие в проекте

Видишь?CONTRIBUTING.md для руководящих принципов.

• Улучшение существующих файловИсправьте неправильные цвета, недостающие токены, слабые описания
• Вопросы докладовДайте знать, если что-то выглядит

Перед тем, как открыть пиар, пожалуйстаОткрыть вопрос Сначала обсудите свою идею и получите обратную связь от тех, кто ее поддерживает.

Лицензия

Лицензия MIT - см.ЛИЦЕНЗИЯ

Это хранилище представляет собой кураторскую коллекцию документов системы проектирования, извлеченных из общедоступных веб-сайтов. Все файлы DESIGN.md предоставляются «как есть» без гарантии. Добытые дизайнерские токены представляют публично видимые значения CSS. Мы не претендуем на право собственности на визуальную идентичность любого сайта. Эти документы существуют, чтобы помочь агентам ИИ генерировать последовательный пользовательский интерфейс.