DESIGN.md для AI-агентов: как получить качественный UI без дизайнера
Коллекция готовых DESIGN.md-файлов от популярных брендов. Копируете в проект — AI-агент генерирует UI, соответствующий дизайн-системе. Экономия времени на стилизации и согласованиях.
Проблема современной генерации UI и решение awesome-design-md
Почему AI-агенты создают типовые интерфейсы
Если вы хоть раз просили AI-агента сгенерировать веб-страницу «в стиле Stripe» или «как на сайте Linear», скорее всего получили узнаваемую структуру, но визуально — серую, плоскую, без характерных деталей. Это не баг модели, а следствие того, как устроен промпт по умолчанию.
AI-агент не видит сайт так, как видит его человек. Он оперирует текстом и кодом. Когда вы говорите «сделай красиво», агент не имеет вектора стиля — у него нет палитры, типографской шкалы, набора компонентов. Он берёт базовый набор, который «знает» из обучающих данных: шрифт sans-serif, белый фон, синюю кнопку, стандартные отступы. Результат выглядит аккуратно, но безлико — как корпоративный лендинг из 2017 года.
С практической точки зрения, проблема сводится к трём вещам.
Первое — отсутствие дизайн-токенов в контексте. Агент не знает, что основной цвет бренда — не #3B82F6, а #2563EB с определёнными оттенками для hover- и active-состояний. Он не знает шкалу отступов, радиусы скругления, соотношения размеров заголовков.
Второе — нет паттернов компонентов. Кнопка — это не просто <button> с padding: 12px 24px. Это конкретная высота, конкретный шрифт, конкретная тень, конкретное поведение при фокусе. Без явного описания агент каждый раз генерирует кнопку заново, и они не совпадают между собой.
Третье — нет ограничений. Агент не знает, чего делать нельзя. Он может использовать десять разных оттенков серого, четыре размера кнопок и три стиля иконок на одной странице — просто потому, что ему не сказали, что этого делать не нужно.
Вот типичный пример. Я попросил агента сгенерировать дашборд «в стиле Notion». Получил что-то вроде: