Сайт в Claude Code с Refero Styles: настройка за четыре шага

Практические материалы о проектах и моделях собраны в документации Ailoot.

Почему сайты, созданные Claude Code, похожи на шаблоны Tailwind?#

В январском примере автор работал над небольшим инструментом для холодных звонков. В пустом репозитории Claude Code попросили сделать главную страницу. Получился знакомый дизайн: фон slate-950, акцент purple-500, жирный заголовок без засечек и три карточки с одинаковыми тенями. Он напоминал первые результаты ChatGPT, Lovable и v0. Пять последующих уточнений вроде «современно», «премиально» и «не как у всех» почти не повлияли на страницу: она по-прежнему выглядела как шаблон из набора Tailwind UI Templates.

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

Дизайн-система превращает просьбу «сделай красиво» в набор применимых параметров: «используй этот стиль и вот его характеристики». Refero Styles предлагает такой контекст в виде готовых файлов DESIGN.md с параметрами реальных продуктов.

Что представляет собой Refero Styles?#

На сайте styles.refero.design каталог описан как собрание более 2000 дизайн-систем ведущих продуктовых сайтов, подготовленных для ИИ-агентов. В числе представленных брендов — Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal и Duolingo. По описанию Refero, системы формируются с помощью анализа CSS и разметки сайтов, а затем сохраняются в структурированном markdown. Библиотека styles.refero.design бесплатна.

Главная особенность файлов — структура и точные значения. Вместо скриншотов и общих формулировок вроде «минималистичный стиль» там указаны hex-коды, размеры шрифтов, интервалы и правила оформления компонентов. Агент может опираться на эти параметры, а не свободно толковать описание вкуса.

На странице для ИИ-агентов Refero перечисляет Cursor, Claude Code, Codex, v0 и Lovable. Один файл DESIGN.md можно использовать с разными инструментами разработки.

Что входит в файл DESIGN.md?#

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

Обычно файл включает такие разделы:

Refero отдельно подчёркивает, что точные указания полезнее расплывчатых оценок внешнего вида.

Например, hex-код #5E6AD2 конкретнее, чем «цвет как у Linear». Значение font-size: 13px / line-height: 18px точнее, чем просьба сделать текст компактным. Чем меньше места оставлено для трактовки, тем легче агенту следовать заданному стилю.

Как создать страницу в стиле Linear за четыре шага?#

Далее приведены четыре последовательных действия для начала работы над сайтом.

1. Установите Claude Code

   Для установки используйте команду из официальной документации: curl -fsSL https://claude.ai/install.sh | bash. На macOS также доступна команда brew install --cask claude-code, а на Windows — winget install Anthropic.ClaudeCode. Если Claude Code уже установлен, проверьте версию командой claude --version. Требуется версия 2.1.178 или новее: в ней появились разрешения Tool(param:value) и блокировка опасных git-команд в auto-mode. Запустите claude, чтобы открыть мастер входа. Claude Code входит в подписку Pro, которая стоит $17 в месяц при годовой оплате или $20 при помесячной оплате.

2. Выберите бренд в Refero Styles

   Перейдите на https://styles.refero.design и откройте каталог. Подбирайте систему по характеру продукта, а не только по внешнему виду. Для панели SaaS можно рассмотреть Linear, Vercel или Notion; для финансового сервиса — Stripe, Mercury или Column; для потребительского продукта — Duolingo. Откройте страницу бренда и нажмите «Copy DESIGN.md».

3. Добавьте DESIGN.md в проект

   Создайте в корне проекта файл docs/DESIGN.md и вставьте скопированное содержимое. Затем откройте CLAUDE.md и добавьте строку @docs/DESIGN.md. Эта директива импорта позволяет Claude Code загружать содержимое файла в контекст при запуске сессии. Подробности об импортах в CLAUDE.md приведены в руководстве о файле инструкций для Claude Code, Codex и Cursor.

4. Попросите создать конкретную страницу

   Вместо общей просьбы «сделай красиво» опишите необходимый экран. Например: «Используя DESIGN.md из контекста, создай главную страницу SaaS-продукта для управления задачами. Нужны первый экран с заголовком и подзаголовком, две CTA-кнопки — основная и дополнительная, блок из трёх преимуществ с иконками и расположенный ниже блок отзывов. Точно соблюдай цвета и типографику из DESIGN.md, не добавляй собственные значения».

После этого Claude создаст страницу. В описанном опыте первая версия главной занимала в среднем 8–12 минут. Она не повторяла выбранный бренд до пикселя, но использовала похожие шрифты, цвета, интервалы и решения для кнопок.

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

Как подобрать стиль для продукта?#

В руководстве Refero советуют выбирать референс с учётом плотности интерфейса, его тона и аудитории, а не только известности бренда.

Цвета, типографика, иерархия и сдержанное движение по референсам Apple могут подходить SaaS-панели. Но большие интервалы конкретной маркетинговой страницы — не обязательно. Изучайте конкретный экран, а не одно имя бренда. Для бухгалтерской панели явно задайте компактные высоты строк, интервалы и плотность, сохраняя читаемость чисел и элементов управления. Просторную презентационную компоновку не копируйте без адаптации.

Карта выбора по типу продукта:

Если выбор затруднён, можно начать с Linear: нейтральная палитра, читаемая типографика Inter / Söhne и сдержанные интервалы делают его удобной исходной системой для разных продуктов.

Зачем хранить DESIGN.md в контексте проекта?#

В описанной практике DESIGN.md хранится в проекте рядом с CLAUDE.md и служит постоянным ориентиром для новых задач. Когда позднее понадобится добавить страницу, Claude сможет прочитать тот же файл и использовать прежние правила. Другой участник команды также сможет обратиться к нему, чтобы продолжить работу в едином визуальном стиле.

Такой подход позволяет один раз зафиксировать решения о палитре, типографике и интервалах, а затем передавать их каждому ИИ-агенту как исходный контекст.

В репозитории проект можно организовать, например, так:

project/
├── CLAUDE.md            (импортирует @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (визуальные правила, скопированные из Refero)
│   ├── ARCHITECTURE.md  (структура проекта)
│   └── BRAND.md         (тон общения и словарь)
└── ...

В этой схеме DESIGN.md описывает визуальную систему, ARCHITECTURE.md — структуру проекта, а BRAND.md — тон и лексику. ИИ-агент, которому доступен репозиторий, может использовать каждый из этих файлов как контекст.

Что такое Refero MCP и refero_skill?#

Refero Styles предоставляет файлы DESIGN.md как базовый способ получить дизайн-контекст. Для интеграции библиотеки с ИИ-агентами Refero также предлагает MCP-сервер и skill.

Официальный Refero MCP. Сервер API расположен по адресу https://api.refero.design/mcp. Claude Code подключается к нему с bearer token. По описанию Refero, агент получает доступ к более чем 150 000 экранам и 6 000 пользовательским сценариям из реальных продуктов. Установка через skill выполняется командой:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

После установки в начале сессии можно проводить исследование дизайна: сопоставлять задачу с подходящими визуальными решениями, а при необходимости рассматривать три направления на основе выбранного референса. По состоянию на 23 июня 2026 года в репозитории refero_skill было 67 коммитов и 135 звёзд.

Для знакомства с каталогом достаточно открыть сайт Refero вручную, выбрать систему и скопировать DESIGN.md. MCP может быть удобен тем, кто регулярно работает с несколькими проектами и часто меняет визуальные ориентиры. Инструкции по подключению MCP-серверов к Claude Code приведены в руководстве по NotebookLM и MCP.

Какие четыре ошибки мешают этому процессу?#

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

Ошибка 1. Ограничиться словами «сделай современно». Запрос вроде «сделай сайт для SaaS в современном премиальном стиле» не задаёт измеримых критериев. Агенту приходится самостоятельно выбирать решения. Чтобы направить результат, добавьте DESIGN.md с конкретными параметрами.

Ошибка 2. Вставить DESIGN.md в сообщение чата. Если отправить файл в чат Claude Code и попросить применить стиль, он будет доступен в рамках текущего контекста. После начала новой сессии или очистки контекста командой /clear его придётся передать заново. Чтобы сохранить визуальные правила между задачами, храните файл в репозитории и подключите его через CLAUDE.md. О том, как использовать CLAUDE.md как постоянный контекст, рассказано в руководстве по памяти Claude.

Ошибка 3. Выбрать стиль только потому, что нравится. Просторный маркетинговый экран Apple может не подходить для прямого копирования в панель недвижимости с 30 объектами. Это не исключает типографику, палитру и иерархию Apple: адаптируйте интервалы и плотность строк к задаче и проверьте видимые данные на целевом экране. Выбирайте конкретный референс по плотности, тону и аудитории, а не только бренду.

Ошибка 4. Не указать DESIGN.md в задании. Даже если файл добавлен в репозиторий и импортируется через CLAUDE.md, в конкретном запросе полезно явно сослаться на него. Например: «Примени цвета, шрифты и интервалы из docs/DESIGN.md. Не придумывай значения, используй параметры из файла».

Практический принцип состоит в том, чтобы заменять общие описания точными токенами: hex-кодами цветов, размерами шрифтов и значениями интервалов из DESIGN.md. Слова «современно», «премиально», «чисто» или «как у Apple» допускают разные толкования, поэтому их лучше сопровождать конкретными правилами.

Что делать дальше?#

Базовый процесс включает Claude Code, файл DESIGN.md из Refero и четыре шага настройки. Для более точной или регулярной работы можно рассмотреть дополнительные направления.

1. Frontend Design Skill. Официальный skill для Claude Code, который добавляет цикл визуальной обратной связи. Агент создаёт скриншот страницы с помощью Puppeteer, анализирует его с помощью vision-модели, сверяет результат с DESIGN.md и предлагает изменения. Такой цикл — запрос, код, скриншот, анализ и новая правка — полезен, когда сложную страницу трудно настроить за один проход.

2. Refero MCP для постоянной работы. Если одновременно ведётся несколько проектов и для каждого нужна своя дизайн-система, MCP поможет быстрее обращаться к каталогу. Команда refero_match_style подбирает три варианта по описанию проекта, чтобы пользователь мог выбрать подходящий.

3. Связать дизайн с контекстом проекта. Вместе с DESIGN.md могут использоваться ARCHITECTURE.md со сведениями о структуре проекта, BRAND.md с правилами тона и business/audience.md с описанием целевой аудитории. Если подключить эти материалы в CLAUDE.md, агент сможет учитывать визуальный стиль, аудиторию и устройство продукта. Дополнительные практические материалы по контекст-инжинирингу доступны в документации Ailoot.

Больше материалов и инструментов — на Ailoot.