design-bites — 270+ дизайн-систем в формате DESIGN.md для AI-агентов

Проект design-bites от команды Sparkbites — это каталог из 270+ файлов DESIGN.md, автоматически извлечённых из лучших с точки зрения дизайна сайтов мира. Каждый файл кодирует полный визуальный язык сайта в обычном Markdown, чтобы AI-агенты генерировали консистентный, выдержанный в бренде UI — без экспортов из Figma, JSON-токенов и специального инструментария. Устанавливается в проект одной командой: npx design-bites add linear.app.

Что такое DESIGN.md

Конвенцию ввёл Google Stitch, и она зеркалит привычный по агентному кодингу формат AGENTS.md:

Идея простая: положите файл в корень проекта, скажите агенту следовать ему — и UI получится «в духе» референса с первой попытки. Формат работает с Claude, Cursor, GitHub Copilot, Google Stitch и любым AI-инструментом, который читает файлы проекта.

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

Вариант 1 — CLI (рекомендуется). Одна команда кладёт файл в корень проекта:

npx design-bites add linear.app

Вариант 2 — скачать напрямую. Полный каталог с детальными страницами, палитрами, шрифтами и статистикой установок — на sparkbites.dev/design-bites. Либо забрать файл прямо из репозитория:

curl -o DESIGN.md https://raw.githubusercontent.com/educlopez/design-bites/main/design-mds/linear.app/DESIGN.md

Вариант 3 — поручить агенту. Когда файл уже в корне проекта:

Use DESIGN.md as the design reference for this UI task.

CLI

Инструмент не имеет зависимостей и работает на Node 18+:

# Install a design system
npx design-bites add linear.app

# List all available design systems
npx design-bites list

# Fuzzy search
npx design-bites search stripe

# Show help / version
npx design-bites --help
npx design-bites --version

Команда add работает так: загружает индекс доступных доменов из репозитория, резолвит домен (без учёта регистра, отбрасывая www.), при отсутствии точного совпадения предлагает нечёткие варианты, скачивает DESIGN.md и пишет его в ./DESIGN.md — либо в ./{domain}/DESIGN.md, если файл в корне уже занят.

Стоит знать про телеметрию: CLI отправляет анонимный ping об установке на sparkbites.dev, чтобы показывать счётчик установок для каждой дизайн-системы. Личных данных и трекинг-куки там нет, а отключить можно переменной окружения:

DESIGN_BITES_TELEMETRY_DISABLED=1 npx design-bites add linear.app

Что внутри каждого файла

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

1. Visual Theme & Atmosphere — философия и настроение дизайна
2. Color Palette & Roles — каждый цвет с его семантической ролью
3. Typography Rules — шрифтовые стеки, шкала, OpenType-фичи
4. Component Stylings — кнопки, карточки, инпуты + состояния hover/focus
5. Layout Principles — отступы, сетка, философия свободного пространства
6. Depth & Elevation — система теней и иерархия поверхностей
7. Do's and Don'ts — дизайнерские ограждения и антипаттерны
8. Responsive Behavior — брейкпоинты и стратегия свёртывания
9. Agent Prompt Guide — готовые промпты для AI-агентов

Вот фрагмент раздела типографики из файла Linear:

## 3. Typography Rules

Inter Variable is the sole typeface, deployed at weight 510 — a value between
regular (400) and medium (500), made possible only by variable font technology.
This is the signature choice: emphasis that registers subconsciously without
ever shouting.

| Element | Size  | Weight | Line Height | Letter Spacing | Features      |
|---------|-------|--------|-------------|----------------|---------------|
| h1      | 64px  | 510    | 64px (1.0)  | -1.408px       | "cv01","ss03" |
| h2      | 40px  | 510    | 44px (1.1)  | -0.88px        | "cv01","ss03" |
| body    | 16px  | 400    | 24px (1.5)  | normal         | "cv01","ss03" |

Обратите внимание на уровень детализации: не просто «шрифт Inter», а конкретный вес 510 и объяснение, почему выбран именно он.

Как генерируются файлы

В отличие от курируемых вручную аналогов, design-bites извлекаются автоматически с живых сайтов двухэтапным пайплайном.

Шаг 1 — извлечение CSS (Playwright). Headless-браузер обходит каждый сайт и собирает:

• вычисленные стили для 14+ типов элементов (h1–h6, body, p, a, button, input, code и др.);
• CSS-переменные (дизайн-токены);
• палитру с дедупликацией и фильтрацией шума;
• шрифты, веса, OpenType-фичи (font-feature-settings);
• тени, радиусы скругления, шкалу отступов;
• медиа-брейкпоинты;
• иерархию поверхностей/фонов, отсортированную по яркости;
• интерактивные состояния — hover и focus захватываются реальной симуляцией мыши и клавиатуры;
• определение рантайм-стека (Next.js, Nuxt, Astro, Svelte, Tailwind, GSAP и др.).

Шаг 2 — AI-анализ (Claude). Сырые CSS-данные интерпретируются в нарративный слой:

• философия дизайна и визуальное настроение;
• семантические цветовые роли (почему именно этот синий, а не просто какой синий);
• типографические принципы (почему вес 510, а не только то, что он равен 510);
• паттерны компонентов и обоснование интерактион-дизайна;
• действенные «можно и нельзя»;
• готовые промпты для AI-агентов.

Ключевой принцип проекта: каждое значение берётся из реального CSS. Нарратив объясняет «почему» — именно это отличает полезный DESIGN.md от сырой выгрузки данных.

Каталог

В каталоге 270+ дизайн-систем. Избранное:

Способы просмотра каталога:

• Веб-интерфейс — sparkbites.dev/design-bites: с поиском, живыми превью и статистикой установок;
• Сырые файлы — папка design-mds/ в репозитории;
• Машинный индекс — index.json.

Не нашли любимый сайт? Можно запросить его через issue — авторы сгенерируют файл. Ошибки в готовых DESIGN.md правятся через PR.

Чем это полезно

Связка AGENTS.md + DESIGN.md закрывает обе половины агентной разработки: как строить и как должно выглядеть. На практике это значит, что агента больше не нужно каждый раз описывать стиль словами — достаточно сослаться на файл референса. Отдельный бонус для команд: один и тот же DESIGN.md читают Claude, Cursor и Copilot, так что визуальный язык проекта перестаёт зависеть от того, каким именно инструментом пишет конкретный разработчик.

Проект распространяется по лицензии MIT и развивается в рамках Sparkbites — каталога вдохновляющих сайтов, где анализируются типографика, палитры, тех-стеки и дизайн-паттерны.