DESIGN.md от Google Stitch: как дать ИИ-агенту дизайн-систему проекта

Что такое DESIGN.md

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

Роли документов в проекте разделены: AGENTS.md объясняет агентам-кодерам, как собирать проект, а DESIGN.md — как проект должен выглядеть и ощущаться.

Что лежит в репозитории awesome-design-md

Это коллекция готовых DESIGN.md, извлечённых из реальных сайтов: платформы ИИ и LLM, инструменты разработчика и IDE, базы данных и DevOps, продуктивность и SaaS, дизайн-инструменты, финтех и крипто, e-commerce, медиа, автопром, а также отдельная серия «ретро-веб» из 1990-х.

Каждый файл следует формату Stitch и содержит расширенные разделы: визуальная тема и атмосфера, палитра с ролями и hex-кодами, типографика с иерархией, стили компонентов с состояниями, принципы раскладки и отступов, тени и уровни поверхностей, правила «можно/нельзя», адаптивность и раздел с готовыми промптами. К каждому сайту прилагаются preview.html и preview-dark.html — визуальный каталог со свотчами цветов, шкалой шрифтов, кнопками и карточками. Проект распространяется по лицензии MIT, а авторы принимают запросы на DESIGN.md для конкретного сайта — включая приватные.

Как проверить на своей задаче

Скопируйте DESIGN.md нужного сайта в корень проекта и дайте агенту инструкцию использовать его. Дальше проверяйте результат не по ощущениям, а сверяя его с preview.html: совпадают ли цвета и их роли, типографическая шкала, состояния кнопок и карточек. Начните с одного экрана — кнопки, формы или карточки — и сравните получившиеся токены с тем, что описано в файле. Если описание роли цвета или состояния компонента расплывчато, это повод уточнить сам файл под ваш проект, а не бесконечно подкручивать промпт.

Ограничения и заявленные свойства

Авторы заявляют, что материалы сделаны «с реальной глубиной» — проанализированные паттерны, токены и правила, а не поверхностный результат. Это заявление автора, а не факт, проверенный редакцией. Репозиторий прямо оговаривает: файлы предоставляются «как есть», без гарантий, а извлечённые токены отражают публично видимые CSS-значения — авторы не претендуют на визуальную идентичность сайтов.

Формулировки вроде «превращаем модель в сеньора-фронтендера с 15-летним опытом» источник не подтверждает: в описании репозитория речь идёт о генерации согласованного UI, а не о замене экспертизы. DESIGN.md задаёт рамку для внешнего вида, но не отвечает за качество логики, доступность и тестирование — это остаётся на разработчике.