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

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

Я перепроверил оба сайта живьём 24 сентября 2026: styles.refero.design по-прежнему держит фразу «Browse 2,000+ AI-readable design systems», а refero.design без Styles - совсем другой продукт с попапом про платное MCP-подключение прямо на первом экране. К концу статьи у тебя будет собственный файл-паспорт стиля для проекта в Claude Code и понимание четырёх шагов, которые превращают усреднённый ИИ-дизайн в сайт с характером конкретного бренда. Если сайта в Claude Code ещё нет вовсе, сначала загляни в гайд лендинг одной строкой в Claude Code - там разобрано, как получить первые файлы сайта, а здесь речь именно про то, как сделать этот сайт непохожим на тысячи других

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

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

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

Без терминала проще всего поставить приложение Claude для компьютера со страницы claude.com/download: Claude Code там уже внутри, кнопки для macOS и Windows на первом экране. Кто привык к терминалу, ставит его одной командой из официальной инструкции Anthropic (сверено 25 сентября 2026):

macOS и Linux:        curl -fsSL https://claude.ai/install.sh | bash
Windows PowerShell:   irm https://claude.ai/install.ps1 | iex

После установки у тебя на компьютере появляется помощник, которому можно показать файл с оформлением и попросить собрать по нему сайт. Claude Code уже стоит - переходи к следующему пункту. Не ставится из России или не проходит вход - это отдельная тема, она разобрана в гайде про установку Claude Code

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

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

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

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

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

Рядом с .md стоит кнопка Copy: она кладёт весь текст файла в буфер обмена. Пригодится, если браузер не даёт скачать файл: тогда напиши агенту «создай в папке проекта файл DESIGN.md и вставь в него текст ниже» и вставь скопированное следом

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

Перенеси скачанный файл в ту же папку, где лежит твой сайт. Папка сайта - та, которую ты открыл в Claude Code, когда начинал проект (в терминале это папка, из которой ты запускал claude). Не помнишь, где она на диске, - спроси агента прямо в чате «покажи полный путь к папке этого проекта» и перетащи DESIGN.md из Загрузок туда

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

Допиши в CLAUDE.md в этой папке строку: «Бери цвета, шрифты и отступы для сайта строго из файла DESIGN.md в этой же папке, ничего не меняй и не смягчай». Потом покажи мне содержимое CLAUDE.md целиком

Последняя фраза сообщения - твоя проверка: в ответе должна стоять эта строка дословно. Нет её - повтори просьбу, не переходи дальше

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Спроси агента прямым текстом. Формулировка «какие три цвета ты взял из DESIGN.md и с какими значениями» заставляет Claude Code процитировать конкретные строки файла - назовёт код вроде #0e100f, а не общие слова про палитру. Не смог процитировать - файл не читал
2. Сверь фон и заголовок с таблицей файла. Попроси агента «открой мой сайт в браузере» и посмотри на две вещи: цвет фона страницы и шрифт главного заголовка. У GSAP это почти чёрный #0e100f и кремовый текст #fffce1. Видишь тёмно-синий фон с фиолетовым градиентом - стиль не применился, агент нарисовал своё
3. Попроси агента показать код одной кнопки. Формулировка «покажи код фона этой кнопки» вытащит из ответа тот же hex-код, что был в DESIGN.md - сверять глазами придётся только две строчки, а не разбираться в чужом коде самому

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

Хаб гайдов про 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 года и перепроверены 24-25 сентября 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 (около 3% библиотеки) и платный Pro ($10 в месяц при годовой оплате $120), сверено 24 сентября 2026
• Claude Code: установка - официальные команды установки для macOS, Linux и Windows, сверено 25 сентября 2026
• Claude для компьютера - страница загрузки приложения с Claude Code внутри
• PageSpeed Insights - официальный инструмент Google для проверки скорости страницы после добавления кастомного стиля

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

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

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