🔍
Awesome DESIGN.md

Awesome DESIGN.md

Курируемая коллекция файлов DESIGN.md из дизайн-систем реальных сайтов. Помогает AI-агентам и разработчикам генерировать точный UI, копируя стиль известных брендов (Stripe, Linear, Vercel и др.).

Категория: Метки: ,

Awesome DESIGN.md — open-source репозиторий на GitHub с коллекцией файлов DESIGN.md. Каждый файл содержит описание дизайн-системы реального популярного сайта.

Для чего используют проект

Проект создан для упрощения создания интерфейсов с помощью ИИ.

Генерация UI через AI-агенты. Копируете файл DESIGN.md (например, от Stripe или Vercel) в корень проекта. Затем просите AI-агента (Cursor, Bolt, Lovable, Stitch): «Создай лендинг для моего продукта, используя стили из DESIGN.md». Агент считывает файл и генерирует код в стиле выбранного сайта.

Референс для дизайнеров. Файлы работают как готовое руководство по типографике, цветам и компонентам — помогает быстро понять дизайн-код конкретного бренда.

Стандартизация промптов. Формат файла оптимизирован для понимания большими языковыми моделями (LLM).

Как устроена коллекция

Стандарт DESIGN.md

Проект использует концепцию от Google Stitch. Файл .md — текстовый формат, который LLM обрабатывают лучше, чем сложные JSON-токены или бинарные файлы Figma.

Структура описания

Каждый файл в коллекции содержит 7 разделов:

  • Visual Theme & Atmosphere — описание настроения сайта (например, «тёмный кинематографичный» или «чистый минимализм»).
  • Color Palette & Roles — цвета с HEX-кодами и назначением (основной, акцентный, фон, ошибки).
  • Typography Rules — шрифты, размеры, межстрочные интервалы, иерархия заголовков.
  • Component Stylings — описание кнопок, карточек, полей ввода (включая состояния hover/focus).
  • Layout Principles — подход к сетке, отступам, использованию пространства.
  • Depth & Elevation — тени, размытие, слои.
  • Responsive Behavior — поведение элементов на мобильных устройствах.

Визуальные превью

В коллекции есть файлы preview.html. Это готовые HTML-страницы — их можно открыть в браузере и оценить палитру, шрифты и стили кнопок до начала работы.

Какие бренды в коллекции

В репозитории собрано более 50 брендов по категориям:

  • Developer Tools: Vercel, Linear, Supabase, Raycast, Stripe.
  • AI & ML: Claude, Mistral, ElevenLabs, Replicate.
  • Fintech & Crypto: Coinbase, Revolut, Wise.
  • Big Tech: Apple, Uber, Airbnb, Ferrari, BMW.

Итог

Awesome DESIGN.md — полезный инструмент для разработчиков, которые используют AI-кодинг. Файлы коллекции превращают общие запросы в конкретные технические задания на основе реальных дизайн-систем.

Похожие