# Сайт в Claude Code с Refero Styles: настройка за четыре шага
> Разберём, как использовать Claude Code и Refero Styles: выбрать дизайн-систему, добавить DESIGN.md в проект и создать страницу с заданной визуальной основой за четыре шага.
Source: https://ailoot.ai/blog/ru/claude-code-refero-design-md/
Canonical: https://ailoot.ai/blog/ru/claude-code-refero-design-md/
Language: ru
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-205
Revision: sha256-ea9ff236a52ec417251f75c3abe56bdbab00a0659a36908c4f39a912ee98e7f9
Главное
Без заданной дизайн-системы Claude Code часто предлагает знакомое сочетание: тёмный фон, фиолетовые акценты, шрифт без засечек и стандартные карточки shadcn. В этом руководстве показано, как взять готовый `DESIGN.md` для Apple, Linear, Stripe или ElevenLabs из библиотеки, где собрано более 2000 дизайн-систем, добавить его в проект и попросить Claude следовать указанным правилам. Так интерфейс получает конкретное визуальное направление вместо стандартного набора решений.
Практические материалы о проектах и моделях собраны в [документации Ailoot](https://ailoot.ai/docs/).
## Почему сайты, созданные Claude Code, похожи на шаблоны Tailwind?
Главное
Если не предоставить дизайн-систему, Claude Code опирается на распространённые примеры интерфейсов. Веб полон страниц на Tailwind и shadcn/ui, поэтому без указаний о цветах, шрифтах и интервалах агент может выбрать привычные для этих решений варианты.
В январском примере автор работал над небольшим инструментом для холодных звонков. В пустом репозитории Claude Code попросили сделать главную страницу. Получился знакомый дизайн: фон `slate-950`, акцент `purple-500`, жирный заголовок без засечек и три карточки с одинаковыми тенями. Он напоминал первые результаты ChatGPT, Lovable и v0. Пять последующих уточнений вроде «современно», «премиально» и «не как у всех» почти не повлияли на страницу: она по-прежнему выглядела как шаблон из набора Tailwind UI Templates.
Чтобы получить более определённый результат, задайте агенту конкретные правила: укажите цвета, шрифты, интервалы и компоненты, которые следует использовать.
Дизайн-система превращает просьбу «сделай красиво» в набор применимых параметров: «используй этот стиль и вот его характеристики». Refero Styles предлагает такой контекст в виде готовых файлов `DESIGN.md` с параметрами реальных продуктов.
## Что представляет собой Refero Styles?
Главное
Refero Styles — библиотека с более чем 2000 дизайн-систем, собранных на основе реальных сайтов и представленных в файлах `DESIGN.md`. Среди брендов — Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs и Cursor. На styles.refero.design можно выбрать бренд, скопировать его markdown-файл и добавить в проект как визуальные инструкции для Claude Code, Cursor, Codex, v0 или Lovable.
На сайте 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?
Главное
Файл может описывать основные части дизайн-системы: палитру с цветами для тёмного и светлого режима, шрифты и их размеры, интервалы, компоненты, анимацию и тон интерфейсных сообщений. Типичный объём — от 100 до 400 строк markdown.
В шаблоне Refero предлагается начать с тона продукта и принципов дизайна, затем описать цвета, типографику, интервалы, компоненты, компоновку, анимацию, доступность и запреты.
Обычно файл включает такие разделы:
| Раздел | Содержание | Польза для агента |
|----|----|----|
| **Тон продукта** | 2–3 фразы о характере интерфейса | помогает выдерживать единый стиль микротекстов |
| **Принципы дизайна** | 4–6 правил, например «минимализм без ущерба для читаемости» | задают критерии выбора между равноценными вариантами |
| **Цвета** | именная hex-палитра (primary, secondary, accent, surface, text), светлый и тёмный режимы | позволяет применять заданные коды, а не подбирать новые |
| **Типографика** | название шрифта и fallback-стек, шкала из 10–12 размеров, начертания regular, medium, bold и межстрочная высота | помогает сохранить типографическую иерархию вместо повсеместного Inter 16px |
| **Интервалы** | базовая единица — 4px, 8px или 16px — и кратные ей значения | делает отступы предсказуемыми |
| **Компоненты** | размеры, состояния и варианты кнопок, карточек, форм и навигации | ограничивает случайное появление новых вариантов |
| **Компоновка** | сетка, контрольные точки и максимальная ширина контейнеров | объединяет страницы общими правилами расположения |
| **Анимация** | длительность, easing и допустимые переходы | помогает сохранять сдержанность анимации |
| **Стиль текста** | примеры надписей для кнопок, заголовков и сообщений об ошибках | задаёт фирменную манеру общения |
| **Не использовать** | список запретов, например `box-shadow: 0 10px 30px` | помогает избегать нежелательных шаблонных решений |
Refero отдельно подчёркивает, что точные указания полезнее расплывчатых оценок внешнего вида.
Например, hex-код `#5E6AD2` конкретнее, чем «цвет как у Linear». Значение `font-size: 13px / line-height: 18px` точнее, чем просьба сделать текст компактным. Чем меньше места оставлено для трактовки, тем легче агенту следовать заданному стилю.
## Как создать страницу в стиле Linear за четыре шага?
Главное
Последовательность проста: установите Claude Code, откройте styles.refero.design, выберите бренд, например Linear, и скопируйте его `DESIGN.md`. Сохраните файл в `docs/DESIGN.md` или `.claude/DESIGN.md`, добавьте ссылку на него в `CLAUDE.md` и попросите Claude создать страницу. В описанном сценарии переход от пустого проекта к первой версии главной занимает около 30 минут.
Далее приведены четыре последовательных действия для начала работы над сайтом.
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
Перейдите на и откройте каталог. Подбирайте систему по характеру продукта, а не только по внешнему виду. Для панели 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](https://ailoot.ai/blog/ru/agents-md-claude-md-one-instruction-file/).
4. ### Попросите создать конкретную страницу
Вместо общей просьбы «сделай красиво» опишите необходимый экран. Например: «Используя DESIGN.md из контекста, создай главную страницу SaaS-продукта для управления задачами. Нужны первый экран с заголовком и подзаголовком, две CTA-кнопки — основная и дополнительная, блок из трёх преимуществ с иконками и расположенный ниже блок отзывов. Точно соблюдай цвета и типографику из DESIGN.md, не добавляй собственные значения».
После этого Claude создаст страницу. В описанном опыте первая версия главной занимала в среднем 8–12 минут. Она не повторяла выбранный бренд до пикселя, но использовала похожие шрифты, цвета, интервалы и решения для кнопок.
В материалах для ИИ-агентов Refero описывает похожую последовательность: выбрать задачу, найти подходящий ресурс, передать файл `DESIGN.md` вместе с описанием продукта и запросить нужный экран.
## Как подобрать стиль для продукта?
Главное
Ориентируйтесь на плотность интерфейса и его тон. Для командного SaaS с большим объёмом данных подходят Linear или Vercel; для финансового сервиса, где важны доверие и точность, — Stripe, Mercury или Column. Для потребительского продукта можно рассмотреть Duolingo, Notion или Airbnb. Для инструментов разработки и ИИ — ElevenLabs, xAI или Modal. В интерфейсе для широкой аудитории важны доступность и читаемость. Если подходящий вариант не очевиден, Linear может стать универсальной отправной точкой.
В руководстве Refero советуют выбирать референс с учётом плотности интерфейса, его тона и аудитории, а не только известности бренда.
Цвета, типографика, иерархия и сдержанное движение по референсам Apple могут подходить SaaS-панели. Но большие интервалы конкретной маркетинговой страницы — не обязательно. Изучайте конкретный экран, а не одно имя бренда. Для бухгалтерской панели явно задайте компактные высоты строк, интервалы и плотность, сохраняя читаемость чисел и элементов управления. Просторную презентационную компоновку не копируйте без адаптации.
Карта выбора по типу продукта:
| Тип продукта | Подходящие стили из Refero | Общие черты |
|----|----|----|
| Командная SaaS-панель | Linear, Vercel, Notion, PostHog; токены Apple с адаптированной компактной компоновкой | читаемый плотный интерфейс, ясная иерархия, лаконичная типографика |
| Финансовый продукт | Stripe, Mercury, Column | палитра, поддерживающая доверие, чёткая типографика, моноширинный шрифт для чисел |
| Инструмент для ИИ или разработки | ElevenLabs, xAI, Modal, Anthropic | тёмная тема, сдержанные акценты, монохромная основа с одним ярким цветом |
| Потребительский продукт | Duolingo, Airbnb, Notion | тёплые цвета, выразительные иллюстрации, дружелюбный тон |
| Маркетинговый сайт | главные страницы Linear, Vercel, Stripe | крупные заголовки, понятная иерархия, спокойный фон |
| Минималистичное портфолио | Apple, Mercury, Modal | много свободного пространства, шрифт без засечек, сдержанные акценты |
Если выбор затруднён, можно начать с Linear: нейтральная палитра, читаемая типографика Inter / Söhne и сдержанные интервалы делают его удобной исходной системой для разных продуктов.
## Зачем хранить DESIGN.md в контексте проекта?
Главное
`DESIGN.md` может стать постоянной частью контекста проекта наряду с `CLAUDE.md` и материалами в `business/`. Если файл хранится в репозитории, к одним и тем же визуальным правилам смогут обращаться разные сессии Claude, участники команды и другие ИИ-агенты, например Codex, Cursor или Gemini CLI.
В описанной практике `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 MCP — сервер по адресу `api.refero.design/mcp`, через который Claude Code может обращаться к библиотеке из более чем 150 000 экранов приложений и 6 000 пользовательских сценариев. Refero также публикует skill для Claude Code, который подключает MCP и предлагает начинать работу с дизайн-исследования.
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 выполняется командой:
```bash
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.
## Какие четыре ошибки мешают этому процессу?
Главное
Четыре распространённые ошибки: попросить «сделать современно», не передав `DESIGN.md`; вставить файл в чат вместо того, чтобы сохранить его в репозитории; выбирать систему только по бренду; не сослаться на `DESIGN.md` в задании. В этих случаях агенту сложнее придерживаться выбранного стиля.
Ниже разобраны четыре ситуации, которые могут помешать использовать дизайн-контекст последовательно.
**Ошибка 1. Ограничиться словами «сделай современно».** Запрос вроде «сделай сайт для SaaS в современном премиальном стиле» не задаёт измеримых критериев. Агенту приходится самостоятельно выбирать решения. Чтобы направить результат, добавьте `DESIGN.md` с конкретными параметрами.
**Ошибка 2. Вставить DESIGN.md в сообщение чата.** Если отправить файл в чат Claude Code и попросить применить стиль, он будет доступен в рамках текущего контекста. После начала новой сессии или очистки контекста командой `/clear` его придётся передать заново. Чтобы сохранить визуальные правила между задачами, храните файл в репозитории и подключите его через `CLAUDE.md`. О том, как использовать `CLAUDE.md` как постоянный контекст, рассказано в [руководстве по памяти Claude](https://ailoot.ai/blog/ru/claude-memory-claude-md-auto-memory/).
**Ошибка 3. Выбрать стиль только потому, что нравится.** Просторный маркетинговый экран Apple может не подходить для прямого копирования в панель недвижимости с 30 объектами. Это не исключает типографику, палитру и иерархию Apple: адаптируйте интервалы и плотность строк к задаче и проверьте видимые данные на целевом экране. Выбирайте конкретный референс по плотности, тону и аудитории, а не только бренду.
**Ошибка 4. Не указать DESIGN.md в задании.** Даже если файл добавлен в репозиторий и импортируется через `CLAUDE.md`, в конкретном запросе полезно явно сослаться на него. Например: «Примени цвета, шрифты и интервалы из `docs/DESIGN.md`. Не придумывай значения, используй параметры из файла».
Практический принцип состоит в том, чтобы заменять общие описания точными токенами: hex-кодами цветов, размерами шрифтов и значениями интервалов из `DESIGN.md`. Слова «современно», «премиально», «чисто» или «как у Apple» допускают разные толкования, поэтому их лучше сопровождать конкретными правилами.
## Что делать дальше?
Главное
`DESIGN.md` задаёт визуальную основу проекта. Далее можно добавить визуальную проверку страницы, подключить Refero MCP для регулярной работы с разными системами или объединить файл с другими материалами о продукте, его структуре и аудитории. Тогда агент сможет учитывать эти сведения при создании интерфейса и проверять результат по скриншоту.
Базовый процесс включает 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`, агент сможет учитывать визуальный стиль, аудиторию и устройство продукта. Дополнительные практические материалы по [контекст-инжинирингу](https://ailoot.ai/blog/ru/context-engineering/) доступны в [документации Ailoot](https://ailoot.ai/docs/).
### Источники
- [Refero Styles — главная страница](https://styles.refero.design/)
- [Refero Styles — примеры DESIGN.md](https://styles.refero.design/ai-agents/design-md-examples)
- [Refero Styles — ресурсы для ИИ-агентов](https://styles.refero.design/ai-agents/design-resources)
- [Refero Skill на GitHub](https://github.com/referodesign/refero_skill)
- [Документация Claude Code от Anthropic](https://code.claude.com/docs/en/overview)
- [Официальное руководство по началу работы с Claude Code](https://code.claude.com/docs/en/quickstart)
Больше материалов и инструментов — на [Ailoot](https://ailoot.ai/).
## Вопросы и ответы
### Подойдёт ли референс Apple плотному SaaS-дашборду?
Да, с адаптацией. Используйте подходящие палитру, типографику, иерархию и сдержанное движение, а компактные высоты строк, интервалы и плотность задайте явно. Не копируйте просторный маркетинговый экран.
### Почему сохранённый DESIGN.md не влияет на новую страницу?
Проверьте наличие в репозитории, импорт из CLAUDE.md и явное имя в запросе дизайна. Попросите настоящие значения цветов, шрифтов и интервалов, затем сравните отрисованную страницу с референсом.
## Ailoot · Компания и портфель её проектов
Ailoot опирается на накопленный опыт работы, большую клиентскую базу, стабильный сервис и постоянный контроль KPI.
Компания и портфель её проектов: миллионы клиентов; продажи на миллиарды ежемесячно.
Этот опыт Ailoot использует для API-доступа к нейросетям в продуктах клиентов, агентах, приложениях и автоматизациях.