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