База знаний

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

Каталог дизайн-стилей реальных сайтов с готовыми DESIGN.md, токенами и Tailwind v4-конфигами, которые можно сразу отдать AI-агенту. Разбираем, что это, как использовать с Codex и Claude Code и чем отличается от Mobbin и обычного Refero.

Опубликовано 06.05.2026

Frontend DevTools ИИ-агенты

Каталог дизайн-стилей реальных сайтов с готовыми DESIGN.md, дизайн-токенами и Tailwind v4-конфигами. Скачиваете один файл — отдаёте его агенту в Codex или Claude Code, и он строит UI в выбранной эстетике без бесконечных правок «сделай поярче».

📌

Суть: Refero Styles превращает «дизайн-вкус» в формальный артефакт. Любой стиль из библиотеки выгружается как файл DESIGN.md (плюс Tailwind v4, CSS variables, design tokens) — это и есть инструкция, по которой агент собирает интерфейс в нужной стилистике.

Что это такое

Refero Styles (styles.refero.design) — отдельный продукт команды Refero, куратор-сайт с дизайн-системами реальных продуктов. Основной Refero — это библиотека UI/UX-референсов на 130 000+ экранов веба и iOS. Styles работает на другом слое: вытаскивает из живого сайта его «вкус» и упаковывает в формат, который понимает AI-агент.

Интерфейс простой: поиск по бренду, настроению, цвету, типографике или по URL похожего сайта. Каждый стиль раскрывается в страницу с цветовой палитрой, типографикой, шкалой spacing, компонентами, рекомендациями Do's / Don'ts и набором экспортных артефактов.

Зачем это нужно

Проблема: AI-сгенерированные интерфейсы выглядят одинаково

Каждый второй AI-сгенерированный лендинг похож на все остальные. SaaS hero слева, CTA справа, три карточки фич, две кнопки в шапке. Модель не знает вашего бренда — она знает усреднённый паттерн интернета.

Решение известно: дать модели референс. Но «референс» в виде скриншота — слабая опора, агент додумает половину. Что нужно — формальное описание стиля: цвета с ролями, шрифты с весами, spacing scale, токены, правила.

Идея: DESIGN.md как контракт

Здесь подключается формат DESIGN.md, который Google открыл из своего инструмента Stitch. Он быстро превращается в стандарт «дизайн-системы как одного файла для AI». Refero Styles делает следующий шаг — наполняет этот формат реальными продуктами и отдаёт готовые артефакты к копированию.

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

Что вы получаете на каждый стиль

Откройте любой стиль — например, Virtual — и увидите четыре экспортных формата плюс ссылку на оригинальный сайт.

Формат	Что это	Когда брать
DESIGN.md	Markdown со всем стилем: токены, типографика, компоненты, do's/don'ts, agent prompt guide	Базовый сценарий. Кладёте в репо, агент читает
Tailwind v4	Готовый блок `@theme` с переменными	Если проект на Tailwind 4
CSS Variables	Раздел `:root { --color-... }` для любого стека	Если используете чистый CSS или другую систему стилей
Design Tokens	JSON-формат токенов в духе W3C Design Tokens	Для интеграции с Figma Tokens, Style Dictionary, дизайн-пайплайнами

Внутри типичной DESIGN.md лежит:

Цвета с ролями (background, primary text, accent, border) и токенами вида --color-midnight-void.
Типографика: семейства шрифтов с фолбэками, веса, размеры, line-heights, letter-spacing.
Type scale — caption / body / heading / display.
Spacing scale и border radius через CSS-переменные.
Компоненты: hero headline, outlined button, instruction text — каждый с ролью и стилем.
Do's & Don'ts: жёсткие правила, которые агент будет соблюдать.
Similar Brands — родственные стили внутри библиотеки.
Agent Prompt Guide — готовые формулы для промптов агенту, чтобы он собрал конкретный компонент в этой эстетике.

Как использовать с агентом

Базовый сценарий

Найти подходящий стиль на styles.refero.design — поиском по настроению или по URL похожего сайта.
Скопировать DESIGN.md (кнопка «Copy .md»).
Положить файл в корень проекта или в docs/DESIGN.md.
В системном промпте Codex / Claude Code добавить: «При генерации UI следуй правилам docs/DESIGN.md».
Запросить компонент — агент построит его в выбранной эстетике.

Через Refero MCP

У Refero есть отдельный продукт Refero MCP, который подключается к Cursor, Claude Desktop, Windsurf и другим MCP-совместимым средам. Агент получает прямой доступ к библиотеке: можно не копировать файл вручную, а просить «найди стиль, похожий на Linear» или «возьми палитру с virtual.plus-ex.com».

Про сам протокол — в справочнике MCP.

Несколько стилей сразу

Никто не мешает подключить несколько DESIGN.md как набор пресетов: theme-dark.md, theme-editorial.md, theme-playful.md. И в промпте указывать, какой использовать для конкретной страницы. Это то самое «модульное проектирование вкуса», которого до DESIGN.md как стандарта по сути не было.

Тарифы и доступ

На момент написания styles.refero.design находится в стадии Beta. Базовый каталог открыт без регистрации, копировать DESIGN.md можно бесплатно. У основного Refero есть платная подписка для расширенного доступа к библиотеке экранов и Figma-плагину; политика для Styles может измениться, поэтому актуальные тарифы стоит проверять прямо на сайте.

Сравнение с соседями

Инструмент	Что даёт	Когда выбирать
Refero (основной)	130 000+ экранов веба и iOS, поиск по тегам, флоу, UI-элементы	Нужно посмотреть «как делают другие», искать паттерны экранов
Refero Styles	DESIGN.md с реальных сайтов: токены, типографика, компоненты, правила	Нужно отдать агенту формальный «вкус» для генерации UI
Mobbin	Большая библиотека экранов и флоу с фильтрами, Figma-плагин	Командная исследовательская работа, более полная библиотека за деньги
Shadcn Studio	Расширенные компоненты и блоки на shadcn/ui	Когда нужны готовые компоненты, а не извлечённый стиль

Эти инструменты не заменяют друг друга. Refero — для исследования паттернов, Styles — для агента, Mobbin — для команды, Shadcn Studio — для готовых блоков. На большом проекте часто нужны все четыре.

Практические сценарии

MVP-лендинг под бренд клиента. Найти в Refero сайт с похожим настроением, скопировать DESIGN.md, отдать Codex — получить готовый лендинг в нужной стилистике за один проход.
Унификация старого проекта. Снять стиль с собственного работающего сайта (через URL), сохранить как DESIGN.md, положить в репо. Дальше любой агент или новый разработчик строит компоненты в той же системе.
A/B на уровне стиля. Параллельно собрать две версии главной с разными DESIGN.md и посмотреть, какая лучше работает с пользователями.
Дизайн-сессия с командой. Открыть Refero Styles на большом экране, прокликать 10–15 ярких стилей, договориться, какой вектор выбираем — и сразу унести готовый артефакт в работу.

Ограничения и грабли

⚠️

DESIGN.md — это интерпретация, а не оригинал. Refero извлекает стиль из живого сайта эвристически, через AI-разбор. Названия токенов, роли цветов и подбор фолбэков — это решение алгоритма. Перед использованием на коммерческом проекте читайте файл глазами.

Шрифты с лицензией. В DESIGN.md прописываются оригинальные шрифты (часто платные) и их фолбэки. На своём проекте подставляйте собственный шрифт или бесплатный аналог.
Бренд-чувствительность. Брать стиль 1-в-1 с известного сайта — это не воровство, но и не дизайн. Используйте Styles как опору, а не как готовый ответ.
Beta-статус. Часть стилей размечена приблизительно, не все продукты в библиотеке. Проверяйте, насколько результат соответствует визуалу оригинала.
Только статика. DESIGN.md описывает стиль, а не анимации, не интеракции, не нюансы accessibility. Это всё на вас.

⚖️

Trade-off. Refero Styles резко ускоряет старт — но агент работает «в чужом стиле». Чем дальше проект, тем сильнее придётся отрывать его от исходного референса и собирать собственный DESIGN.md, который отражает уже ваш бренд, а не чужой.

Чеклист «как внедрить за вечер»

Открыть styles.refero.design, прокликать 10–20 стилей, выбрать 2–3 близких к нужному настроению.

На каждой странице стиля прочитать раздел Do's / Don'ts глазами — это самое важное.

Скопировать DESIGN.md выбранного стиля в docs/DESIGN.md своего репозитория.

В системном промпте агента (Codex / Claude Code) добавить ссылку на этот файл.

Попросить агента собрать hero-секцию и одну ключевую кнопку — проверить, что получается.

Подменить шрифты на свои (обычно платные → бесплатные аналоги) и зафиксировать в DESIGN.md.

Закоммитить DESIGN.md в репозиторий как часть проекта — это теперь artifact команды, а не временный пресет.

Ссылки

Каталог стилей: styles.refero.design
Основной Refero: refero.design
Refero MCP: refero.design/mcp
Product Hunt: Refero
Figma-плагин Refero: figma.com/community/plugin/1583968086662940972

По теме

Если у вас в работе есть проект, где AI-агент уже пишет фронтенд, но интерфейсы всё ещё выходят «безликими» — Refero Styles даёт самый дешёвый способ передать модели формальный дизайн-вкус. Не «сделай красиво», а конкретный набор цветов, шрифтов и правил, по которым агент собирает UI.

Если хотите обсудить, как встроить такой подход в собственный продуктовый контур, напишите в Telegram.

Если хотите разобрать свою задачу — напишите мне

Можно прийти с идеей, черновым контекстом или уже живой задачей. Помогу быстро понять, где реальный следующий шаг, а где лишний шум.

Напишите мне в Телеграм Мой Телеграм канал

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