Designmd.supply - сервис для подготовки DESIGN.md - 2026
designmd.supply — бесплатный open-source сервис для автоматической генерации DESIGN.md — структурированного описания дизайна веб-сайта, предназначенного для использования ИИ-агентами при разработке интерфейсов.
Обзор
Сервис разработан командой Context.dev и опубликован как open-source проект на GitHub (репозиторий context-dot-dev/designmd-supply). Написан на Next.js.
Пользователь вводит URL сайта, а сервис собирает фирменный стиль, скриншоты, HTML/CSS-токены и формирует файл DESIGN.md в Google-спецификации (YAML frontmatter + секции).
Как это работает
Pipeline состоит из четырёх этапов:
- Извлечение стиля (Colors, Typography, Spacing, Radii, Components) — через Styleguide API Context.dev
- Бренд-интеллект (логотипы, фоновые изображения, слоган, отрасль) — через Brand API
- Скриншот страницы в реальном времени — через Screenshot API
- Разметка — финальная сборка DESIGN.md
Генерация занимает около минуты для новых доменов.
Структура DESIGN.md
Итоговый файл содержит YAML frontmatter и секции:
- Overview — общее описание дизайна
- Colors — палитра цветов (primary, secondary, accent)
- Typography — шрифты, размеры, высота строк
- Layout — сетка, отступы, контейнеры
- Elevation — тени, z-index
- Shapes — скругления, border-radius
- Components — кнопки, карточки, навбары и др.
- Do's and Don'ts — правила использования
Поддерживаемые AI-инструменты
Файл DESIGN.md может использоваться как контекст в:
- Cursor
- Claude Code (Anthropic)
- OpenCode
- Roo Code
- Windsurf
- GitHub Copilot Agent
- OpenAI Codex
Вместо длинного промпта о стиле разработчик просто добавляет DESIGN.md в проект, и ИИ-агент автоматически соблюдает дизайн-код.
Примеры
На главной странице сервиса доступны готовые DESIGN.md для известных брендов:
- apple.com
- microsoft.com
- google.com
- meta.com
- tesla.com
- broadcom.com
Технические детали
- Язык: TypeScript / Next.js
- Лицензия: open-source (MIT)
- Репозиторий: github.com/context-dot-dev/designmd-supply(https://github.com/context-dot-dev/designmd-supply)
- API-провайдер: Context.dev(https://context.dev)
Для кого
Сервис рассчитан на:
- frontend-разработчиков, использующих ИИ-агентов
- UI/UX-дизайнеров
- команды SaaS-продуктов
- всех, кто хочет автоматизировать поддержку дизайн-системы
Резюме
designmd.supply — это удобный инструмент для создания документации дизайна, понятной ИИ-агентам. Позволяет разработчикам не описывать стили в каждом промпте — достаточно один раз сгенерировать DESIGN.md и подключить его к проекту.
Ссылки
