Refero Styles — библиотека DESIGN.md из реальных продуктов для AI-агентов

Refero Styles — каталог из 2 000+ дизайн-систем реальных продуктовых сайтов. Каждый стиль можно открыть как готовый DESIGN.md с цветами, типографикой, отступами, компонентами и правилами для AI-агента.

Что входит в Refero Styles

Refero Styles — отдельный каталог команды Refero для разработки интерфейсов с помощью ИИ-агентов. По состоянию на 2 сентября 2026 года на главной странице заявлено более 2 000 AI-читаемых дизайн-систем, собранных по материалам продуктовых сайтов.

Искать стили можно по бренду, визуальному настроению, цвету, типографике и адресу похожего сайта. Страница стиля показывает:

• визуальную концепцию и тему;
• цвета и их роли;
• шрифты, веса и шкалу размеров;
• отступы, радиусы, поверхности и тени;
• правила компонентов;
• рекомендации Do / Don’t;
• примеры промптов для агента.

Refero описывает DESIGN.md как переносимый слой дизайн-контекста: файл хранится рядом с кодом и сообщает агенту конкретные решения до начала генерации интерфейса. Google Stitch представил DESIGN.md как текстовый формат описания дизайн-системы, и этот подход используется как практический способ передавать дизайн-контекст coding-агентам.

Подробнее о самом формате: DESIGN.md — дизайн-система в одном файле для AI-кодинга.

Какие форматы можно скопировать

На странице отдельного стиля доступны четыре представления одной дизайн-системы.

Типичный DESIGN.md содержит не только значения цветов и размеров. В нём фиксируются роли токенов, допустимые сочетания, правила типографики, оформление кнопок и карточек, поверхности, визуальная иерархия и запреты. Именно эти ограничения помогают агенту воспроизводить целостный стиль вместо случайного набора эффектов.

Как подключить DESIGN.md к проекту

1. Откройте каталог Refero Styles и найдите несколько близких направлений.
2. Сравните палитру, типографику, компоненты и раздел Do / Don’t.
3. Скопируйте DESIGN.md выбранного стиля.
4. Сохраните его, например, как docs/DESIGN.md.
5. Проверьте лицензии и доступность указанных гарнитур; замените те, которые нельзя использовать в вашем проекте.
6. Удалите правила, которые слишком явно воспроизводят чужой бренд, и добавьте собственные ограничения.
7. Перед генерацией интерфейса попросите агента прочитать файл и следовать ему.

Пример задания:

Перед реализацией прочитай docs/DESIGN.md. Собери первый экран и основные состояния кнопок по указанным токенам и правилам. Не добавляй цвета, шрифты и эффекты, которых нет в файле.

DESIGN.md лучше подключать до написания компонентов. Если добавить его после генерации страницы, файл превратится в список исправлений, а не в исходный контракт.

Как проверить результат

Сначала попросите агента собрать небольшой контрольный фрагмент: первый экран, одну карточку и основные состояния кнопки. Затем сравните результат с DESIGN.md:

• используются ли заданные цвета и их роли;
• совпадают ли шрифты, веса и шкала размеров;
• соблюдаются ли отступы и радиусы;
• соблюдаются ли ограничения файла на тени, градиенты и акцентные цвета;
• применены ли правила Do / Don’t.

Если агент регулярно нарушает одно правило, перепишите его как конкретное ограничение с допустимым значением. После проверки зафиксируйте адаптированный файл в репозитории.

Поиск через Refero MCP

Refero MCP подключает агента к каталогам сайтов и iOS-приложений, стилям, отдельным экранам и пользовательским сценариям. Он подходит, когда агенту нужно самостоятельно исследовать несколько направлений, а ручного копирования одного файла недостаточно.

На 2 сентября 2026 года для доступа требуется платный план Refero: Pro, Team или Lifetime.

Официальный адрес удалённого MCP-сервера:

https://api.refero.design/mcp

Авторизация выполняется через OAuth или токен Bearer в зависимости от клиента и настроек аккаунта. В документации перечислены Claude Code, Cursor, Codex, Antigravity, Lovable и Manus, а также другие клиенты с поддержкой удалённых MCP-серверов.

Для доступа требуется платный план Refero: Pro, Team или Lifetime. Стандартный доступ включает до 8 000 вызовов MCP-инструментов за месячный период на каждого лицензированного пользователя; неиспользованные вызовы не переносятся.

Как проверить подключение

После авторизации попросите агента выполнить поиск стилей:

Search Refero styles for developer tool websites with product screenshots

Проверяемый результат — агент возвращает результаты поиска Refero Styles. Если запрос не выполняется, проверьте авторизацию, тарифный план и настройки MCP-клиента.

MCP разделяет исследование на четыре слоя:

Для визуального направления документация рекомендует начинать со стилей. Экраны нужны для конкретных интерфейсных решений, а сценарии — когда важна последовательность состояний.

Полезные сценарии

Быстрый прототип в заданной эстетике

Исходные данные: требования к странице и несколько визуально близких продуктов. Вы выбираете стиль, адаптируете его DESIGN.md и просите агента собрать контрольный компонент. Результат можно проверить по токенам и правилам файла до реализации всей страницы.

Сценарий не подходит, если требуется точное воспроизведение сложной интерактивности: стиль в первую очередь описывает визуальное направление.

Унификация существующего проекта

Исходные данные: работающий интерфейс с непоследовательными цветами, шрифтами и отступами. Вы берёте подходящий файл как каркас, заменяете его значения на собственные и фиксируете правила компонентов. Наблюдаемый результат — новые компоненты используют один набор токенов и ограничений.

Автоматически считать извлечённый стиль достоверным описанием собственного продукта нельзя: каждое правило нужно сверить с реальным интерфейсом.

Исследование перед новой страницей

Через Refero MCP агент может сначала найти несколько стилей, затем подобрать реальные экраны нужного типа и при необходимости изучить пользовательский сценарий. Результатом становится набор источников для отдельных решений: стиль задаёт визуальное направление, экраны показывают структуру, сценарий — последовательность действий.

Официальная документация рекомендует изучать несколько визуальных направлений и использовать стили как исходные ингредиенты, а не как шаблоны для буквального копирования.

Ограничения

• Гарнитуры. Если выбранная в референсе гарнитура недоступна или требует отдельной лицензии, замените её и обновите файл.
• Чужой бренд. Копирование одного стиля целиком повышает риск получить узнаваемую имитацию. Используйте несколько источников и формируйте собственные правила.
• Фокус на веб-страницах. Актуальная документация указывает, что Styles в основном покрывает лендинги, страницы тарифов, продуктовые и редакционные сайты. Для поведения продуктового интерфейса нужны экраны и пользовательские сценарии.
• Неполное описание поведения. Сам дизайн-файл задаёт визуальные решения, но не заменяет требования к состояниям, адаптивности, доступности и сложной интерактивности.
• Изменяемые условия. Каталог помечен как Beta; размер библиотеки, доступность функций, планы и лимиты могут меняться.

Чеклист внедрения

Официальные ссылки

• Refero Styles
• Руководство по DESIGN.md
• Документация Refero MCP
• Справочник инструментов Refero MCP
• Основной Refero

Следующий шаг

Refero — библиотека реальных экранов и UX-паттернов для исследования интерфейсов

Связанные материалы

• Как мы переделывали главную pimenov.ai: от оценки Comet до нового визуального языка
• Google Stitch обновился: «vibe design» для интерфейсов
• DESIGN.md — дизайн-система в одном файле для AI-кодинга

Если AI-агенты уже пишут фронтенд в вашем проекте, обсуждение может быть полезно для выбора источников, структуры дизайн-контекста и правил проверки результата.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov