Не шаблонный сайт в Claude Code: Refero Styles и 4 шага

Пункт 0. Пойми, откуда берётся шаблонный вид

Без готового файла с точными цифрами Claude Code рисует интерфейс из усреднённой обучающей выборки - отсюда тёмный фон, фиолетовый градиент и одинаковые карточки на каждом втором ИИ-сайте. Дело не в том, что агент плохо работает: он честно выполняет расплывчатую просьбу вроде «сделай современно» так, как это выглядит чаще всего в данных, на которых его учили

Разница появляется, когда вместо слова «современно» агенту дают конкретные значения: не «премиальный синий», а #0e100f для фона и #fffce1 для текста. Именно это и делает библиотека дизайн-паспортов - переводит вкус в цифры, которые Claude Code способен взять буквально

Шаг 1. Установи Claude Code, если его ещё нет

Скачай официальный установщик с сайта Anthropic и запусти его - без этого пункта открывать файлы стиля будет не в чем. Что увидишь: после установки в терминале или в отдельном окне появится приглашение написать первую задачу словами, без единой строчки кода от тебя. Что это даёт: у тебя на компьютере появляется помощник, которому можно показать файл с оформлением и попросить собрать по нему сайт. Если Claude Code уже стоит - смело переходи к следующему пункту, а если установка вызывает вопросы отдельно от темы дизайна, разбор есть в отдельном гайде про установку Claude Code и в общем гайде про первый проект

Шаг 2. Найди стиль бренда на styles.refero.design

Открой сайт, введи название компании в строку поиска или выбери категорию вроде Minimal Design, кликни на понравившуюся карточку. Адрес сервиса - styles.refero.design. Что увидишь: страница конкретного бренда с превью его настоящего сайта сверху и коротким текстовым описанием того, что делает этот стиль узнаваемым - какой цвет держит основную нагрузку, какой шрифт использован, насколько крупные заголовки. Что это даёт: ты выбираешь не абстрактное «нравится», а конкретный чужой сайт, дизайн которого уже проверен настоящей аудиторией бренда

Я открыл живьём страницу стиля GSAP (сервиса анимации, о котором отдельно рассказано в гайде про анимированный сайт) - никакого запроса на вход или подписку сайт не показал ни разу за весь визит

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

Шаг 3. Скачай файл DESIGN.md на свой компьютер

На странице стиля нажми вкладку DESIGN.md, затем кнопку со значком .md - файл сохранится в папку загрузок. Что увидишь: раскроется текстовый документ с таблицей цветов (название, код цвета, техническое имя переменной, для чего этот цвет используется) и разделом про шрифты с точными размерами и межстрочными интервалами. Что это даёт: у тебя на руках готовый текстовый паспорт стиля, а не картинка, которую придётся описывать словами и терять точность

Внутри файла есть и кнопка «Copy» рядом с каждым отдельным цветом, если нужен не весь паспорт целиком, а один конкретный код - для быстрой правки одной детали этого достаточно, скачивать весь файл заново не придётся

Шаг 4. Положи файл в проект и сошлись на него в промпте

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

Формулировка промпта имеет значение: попроси прямо - «используй точные цвета и отступы из файла DESIGN.md, ничего не меняй и не смягчай». Расплывчатая просьба вроде «сделай в этом стиле» снова открывает дверь усреднённому результату, потому что не называет источник цифр напрямую

Какие категории стилей есть в библиотеке

Библиотека делит 2000+ дизайн-паспортов не только по названию бренда, но и по общему настроению - это помогает, если конкретного бренда в голове нет, а нужно просто «что-то в таком духе». На главной странице сразу видно восемь готовых категорий

Категория - это фильтр по настроению, а не гарантия идеального совпадения с задачей: внутри одной категории лежат десятки разных брендов, и финальный выбор всё равно делается открытием конкретной карточки

Что делать, если MCP просит оплату

Кнопка «Connect via MCP» на странице стиля ведёт на отдельный сервис Refero MCP - это платное расширение с прямым доступом к 142 000 экранов настоящих приложений внутри самого Claude Code, а не тот бесплатный каталог, с которым работает эта статья. У платного сервиса тоже есть бесплатный вход с ограничением: доступна примерно 3% полной библиотеки экранов и только базовый поиск по названию бренда. Полный доступ стоит 10 евро в месяц при годовой оплате

Для задачи «не шаблонный сайт» платный MCP не нужен вообще: обычный бесплатный каталог DESIGN.md уже даёт полный текстовый паспорт нужного бренда без единого евро, а MCP пригождается для другой, более широкой задачи - изучения целых пользовательских сценариев поверх отдельных экранов

Что просить у Claude Code, если своего DESIGN.md ещё нет

Если ни один готовый стиль на Refero не подошёл, можно попросить Claude Code собрать похожий паспорт самостоятельно - показать агенту ссылку на понравившийся сайт и попросить описать его цвета, шрифты и отступы в такой же табличной форме. Результат выйдет менее точным, чем настоящий файл с сервиса (агент оценивает цвета на глаз, а не берёт их из кода страницы), но это лучше, чем вообще ничего не давать агенту в качестве образца

Альтернативный бесплатный путь для визуальной части сайта в целом - инструмент, разобранный в гайде про Open Design: он даёт визуальный редактор вместо готового файла-эталона, подход другой, а бюджет тот же - ноль

Что чаще всего идёт не так при первом запуске

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

Как проверить, что агент правда использует твой файл

Три быстрые проверки после того, как правки внесены:

1. Открой готовую страницу и сверь один код цвета. Возьми любой hex-код из скачанного DESIGN.md и найди его в CSS собранной страницы - если код совпадает буквально, агент действительно читал файл, а не сочинял похожий оттенок
2. Спроси агента прямым текстом. Формулировка «какие три цвета ты взял из DESIGN.md и с какими значениями» заставляет Claude Code процитировать конкретные строки файла, а не общие слова про палитру
3. Сравни визуально с оригиналом. Открой страницу настоящего сайта, с которого снят стиль, и свой результат рядом - шрифт и общее настроение должны узнаваться, даже если контент у тебя совсем другой

Если после этих проверок сайт выглядит как раньше усреднённым - чаще всего причина в формулировке промпта, а не в самом файле: агенту нужно назвать источник цифр явно, а не просто положить документ рядом с проектом

Хаб гайдов про Claude Code

Если сайт собирался или будет собираться в Claude Code, а сам инструмент вызывает вопросы отдельно от темы дизайна, в разделе Claude Code: разборы и гайды собраны остальные материалы про установку, первые проекты и типовые ошибки инструмента

Чем шаблонный ИИ-дизайн отличается от дизайна по чужому паспорту

Что ещё почитать про сайты и Claude Code

• Создание сайтов на Claude: лендинг одной строкой в Claude Code - если сайта ещё нет вовсе и его только предстоит получить, прежде чем добавлять чужой стиль
• Как сделать анимированный сайт в Claude Code: 2 приёма без кода - следующий слой поверх уже стилизованного сайта
• Open Design: бесплатная копия Claude Design для сайтов и презентаций - альтернативный бесплатный визуальный редактор вместо готового файла-эталона
• Bolt.new: 6 шагов от промпта до живого сайта в браузере - другой инструмент сборки сайта, если Claude Code не единственный вариант
• Как пользоваться Claude Code: установка и 9 шагов до проекта - если Claude Code ещё не установлен
• Как создать сайт с помощью ИИ: 4 пути и страница за 40 минут - обзор путей получить сайт целиком, если непонятно, с чего начинать
• Как выложить сайт в интернет бесплатно в 2026: 4 способа - следующий шаг после того, как стиль сайта уже собран
• Claude Code бесплатно: 11 находок вместо платного софта - если после Refero Styles хочется сэкономить и на остальных инструментах вокруг сайта
• Сколько стоит сайт: смета из пяти строк и четырёх путей - если считаешь бюджет всего проекта, а не только визуальной части
• Курс по вайбкодингу - если хочется системного разбора вайбкодинга целиком, не только визуальной части сайта
• Cursor или Claude Code: что выбрать для сайта - если вместо Claude Code рассматривается другой агент
• Настройка Claude Code под конкретный проект - если хочется закрепить не только стиль, но и свои правила работы агента
• Claude Code с телефона - если хочется продолжить работу над стилем сайта не с компьютера
• Как заработать на нейросетях: 5 путей, цены и первый заказ - если сайт с уникальным стилем уже готов и следующий вопрос - как на этом навыке заработать
• Установка Claude Code на Windows - местные особенности запуска, если основная система - Windows
• Большой проект в Claude Code - если стиль нужно применить не к одной странице, а к целому многостраничному проекту
• PageSpeed Insights упомянут ниже в источниках - полезно проверить скорость страницы после добавления кастомного стиля
• Motionsites.ai: готовые промпты для сайтов с 3D-анимацией - ещё один платный путь получить готовое визуальное направление, если один бесплатный файл стиля кажется недостаточным

Источники

Все страницы проверены прямым запросом 5 сентября 2026 года

• Refero Styles - каталог DESIGN.md - формулировка «2,000+ AI-readable design systems», подтверждённая совместимость с Claude Code, Cursor, Codex, v0, Lovable
• Refero Styles - пример стиля GSAP - структура вкладок DESIGN.md/Tailwind v4/CSS Variables/Design Tokens, таблица токенов цвета и типографики
• Refero MCP - страница отдельного платного сервиса с доступом к 142 тысяч экранов и больше
• Refero - тарифы - бесплатный тариф Free (0€/мес, ~3% библиотеки) и платный Pro (10€/мес при годовой оплате)
• PageSpeed Insights - официальный инструмент Google для проверки скорости страницы после добавления кастомного стиля

Памятка: не шаблонный сайт за вечер

Пять строк, которые закрывают выбор стиля и проверку результата

Частые вопросы