Почему сайты в Claude Code выглядят одинаково — и как это чинится за 15 минут

Сначала разница: два лендинга психолога

Оба лендинга — про одного выдуманного психолога. Текст, секции, цена и порядок блоков совпадают полностью. Разное только то, что модель знала в момент написания кода.

Первый я получила обычным запросом «сделай лендинг для психолога».

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

Второй — с дизайн-библиотеками.

Тот же текст. Тёплый фон вместо холодного серого, тонкие заголовки, курсивный serif на слове «выдохнуть», запросы списком вместо карточек с эмодзи. Анимаций здесь всего две, и обе почти незаметны — так и должно быть в теме, где человек приходит с тревогой.

Что конкретно я взяла для второго варианта: на Refero открыла дизайн-систему Intercom, которая описана как тёплый кремовый editorial, и скопировала оттуда параметры. Фон #faf9f6 вместо белого, тёплые серые с бежевым подтоном, скругление 4 пикселя у всего без исключений, заголовки тонким начертанием 300, никаких теней и градиентов, секции разделены не линиями, а сменой тона. Акцентный цвет поменяла на приглушённый зелёный — фирменный фиолетовый Intercom к теме не подходит. Это заняло пять минут и дало основную часть результата: страница перестала читаться как типовая генерация. Два эффекта сверху — уже мелочь.

Почему дефолт выглядит именно так

У левого лендинга есть узнаваемый набор признаков. Если найдёте у себя хотя бы четыре — вы смотрите на тот самый дефолт.

• Фон #f9fafb, карточки белые, тени мягкие и одинаковые у всех блоков.
• Заголовок по центру, под ним абзац на две строки, под ним две кнопки рядом.
• Градиент «синий в фиолетовый» на паре слов в заголовке.
• Три колонки фич, в каждой эмодзи в цветном квадратике со скруглением.
• Шрифт системный или Inter без единой настройки межбуквенных расстояний.
• Отступы между секциями одинаковые сверху донизу.
• Скругление 8 или 12 пикселей вообще у всего: у кнопок, карточек, картинок, полей ввода.

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

Отсюда вывод, из которого растёт всё остальное: просить «сделай красиво» бесполезно, это просьба выбрать что-то среднее. Работает другое — дать конкретный источник, откуда брать решения.

Два типа библиотек, которые все путают

Библиотеки делятся на два типа. Это главное, что стоит запомнить, потому что они решают разные задачи и не заменяют друг друга.

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

Второй тип — библиотеки компонентов и эффектов. Они отвечают на вопрос «чем оживить». Внутри готовый код: живые фоны, анимация текста, появление по скроллу, необычные карточки и меню. Копируется и вставляется. Это отделка, и без первого пункта она даёт ту же дефолтную страницу, но с анимациями — то есть хуже.

Ошибка, которую делают почти все: начинают со второго. Ставят светящийся фон на дефолтную вёрстку и получают дефолтную вёрстку со светящимся фоном. Порядок всегда такой: сначала система, потом эффекты.

Перечень: что брать и сколько стоит

Цены и лицензии я проверяла руками 26 сентября 2026 года. Это меняется, поэтому перед тем, как закладывать в работу, проверяйте сами.

Каталоги дизайн-систем:

Библиотеки эффектов и компонентов:

Отдельно про лицензию React Bits, и это важно, если вы делаете лендинги на заказ. MIT + Commons Clause означает, что ставить компоненты на свои и клиентские сайты можно, в том числе за деньги. Нельзя продавать сами компоненты — отдельно, в наборе или переписанными под другой фреймворк. Проще говоря: сделать клиенту сайт можно, собрать из них шаблон и продавать его нельзя.

MCP или просто браузер

Вопрос, на котором люди застревают. Отвечаю по-простому: начинайте с браузера. MCP экономит вам время на поиске референсов, но на качество страницы не влияет: страницу делают сами параметры, а способ их доставки к делу не относится.

Через браузер это выглядит так. Открываете Refero Styles, листаете, выбираете сайт, который нравится. Копируете со страницы цвета, шрифты, отступы и блок «так делать / так не делать». Вставляете это в Claude Code как текст задания. Бесплатно, ничего не нужно настраивать, и вы своими глазами видите, что выбираете. Минус один — примерно пять минут ручной работы на каждый новый проект.

MCP — это «розетка», через которую модель сама ходит в сервис без копирования вручную. Ставится одной строкой в настройках Claude Code, Cursor или Codex. У Refero свой MCP в тарифе Pro за 17 долларов в месяц: модель сама ищет подходящие экраны под задачу. У 21st.dev тоже есть, для поиска компонентов. Плюс в том, что референсы подбираются на каждой задаче автоматически, минус — это платно, требует настройки и без понимания происходящего легко получить кашу.

Есть и третий путь, бесплатный: у Refero лежит официальный скилл — набор инструкций, который учит модель сначала искать референсы, а потом писать код. Там же в репозитории лежит и команда установки.

Ловушка, о которой не пишут: шрифт с эталона вам не подойдёт

Это то, на чём метод спотыкается у русскоязычных, и предупреждения об этом я нигде не встречала.

Вы копируете типографику с эталона — и почти наверняка копируете шрифт, который не умеет писать по-русски. Фирменные шрифты хороших продуктов обычно платные и лицензируются отдельно: у Intercom, с которого я брала систему для демо, это Saans и Serrif, у Apple — SF Pro, доступный только в их экосистеме. А бесплатные шрифты, которые модель предлагает чаще всего, кириллицы не имеют вовсе.

Я проверила самые популярные. Poppins, DM Sans, Space Grotesk, Outfit, Sora, Plus Jakarta Sans, Figtree, Fraunces — кириллицы нет ни у одного. Ошибки при этом вы не увидите: браузер молча подставит системный шрифт, и настроенная типографика превратится в тот самый дефолт. Выглядит так, будто метод не сработал.

Что с этим делать. Берите с эталона не название шрифта, а его характер: насколько он узкий, какой у букв контраст, тонкое начертание или плотное. Под этот характер подбирайте кириллическую замену. Вот проверенные на сентябрь 2026 года — все бесплатные на Google Fonts и с кириллицей:

В демо выше я так и сделала: вместо платных Saans и Serrif взяла Inter Tight для заголовков и Source Serif 4 для курсива. Характер системы сохранился — тонкое начертание, тесный трекинг на крупном кегле, editorial-контрапункт, — а текст читается по-русски.

В задании это стоит проговаривать сразу:

Шрифты с эталона не подставляй напрямую: у меня русский текст.
Подбери бесплатную замену с Google Fonts, у которой ЕСТЬ кириллица,
и сохрани характер оригинала (насколько узкий, какой контраст,
какое начертание). Название шрифта, который выбрал, напиши мне —
проверю. Размеры, межбуквенные расстояния и толщину бери с эталона.

Пять промтов, которые работают

Главный принцип: не описывайте настроение, давайте параметры. «Сделай стильно и современно» и «фон #faf9f6, чередующиеся секции, отступ между секциями 90 пикселей, радиус скругления 4 пикселя, теней нет» — это запросы разного класса.

1. Задать фундамент.

Вот дизайн-система сайта [название] — палитра, шрифты, отступы, радиусы
и правила «так делать / так не делать»: [вставить со страницы Refero].

Применяй её как жёсткие ограничения: используй только эти цвета и эти
размеры, соблюдай ритм отступов. Отклоняйся, только если это ломает
читаемость.

Слово «ограничения» здесь ключевое. Без него модель воспримет параметры как пожелание и через две секции вернётся к своим привычным серым карточкам.

2. Один эффект в первый экран.

В первом экране нужен ровно один эффект, и он должен соответствовать
теме: страница про [тему], человек приходит в состоянии [состояние] —
значит никакого резкого движения, только мягкое проявление текста
при загрузке. Всё остальное оставь неподвижным.

Мой стек — [HTML + CSS / React]: если компонент под другой стек,
не подключай библиотеку, а воспроизведи приём на моём.

Первая часть про уместность. Летящие частицы и неоновое сияние сделают страницу психолога тревожной, даже если на сайте игры те же эффекты работают отлично. Вторая часть нужна технически: React Bits, Aceternity и Fancy Components написаны под React, на обычной HTML-странице они не заработают — но приём повторяется на чистом CSS за десять строк.

3. Убрать признаки дефолта.

Пройдись по странице и убери признаки типового AI-лендинга:
одинаковые отступы у всех секций, три равные карточки с эмодзи,
градиент на словах в заголовке, одинаковое скругление у всего,
центрированный текст во всех блоках.

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

Это лечит уже готовую страницу. Приписка «текст не меняй» добавлена не зря — иначе перепишет заодно и его.

4. Смешать источники.

Собери страницу так: за основу возьми дизайн-систему [сайт из Refero] —
её палитру, шрифты и ритм. Поверх добавь ровно три приёма:
[фон в первом экране], [появление секций по скроллу],
[подсветка за курсором в карточках].

Больше эффектов не добавляй, даже если кажется уместным.
Держи один акцентный цвет, заливкой — только главная кнопка.

«Ровно три» и «больше не добавляй» — это защита от того, что модель начнёт украшать каждую секцию.

5. Проверка перед сдачей.

Проверь готовую страницу и покажи результат по пунктам:
1) все ли цвета из заданной палитры;
2) сколько заметных эффектов в первом экране (должен быть один);
3) нет ли горизонтальной прокрутки на ширине 390px;
4) читается ли серый текст на фоне (контраст не ниже 4.5:1);
5) отключаются ли анимации при prefers-reduced-motion.
Что не так — почини.

Третий пункт экономит больше всего нервов: на телефоне вёрстка разъезжается чаще всего, и на большом экране этого не увидишь. В моём же демо на этой проверке нашлись два дефекта — логотип переносился на две строки и не пряталось меню.

Дозировка: сколько эффектов уже перебор

Самая частая ошибка после того, как человек нашёл библиотеки, — поставить всё сразу. Светящийся фон, летящие частицы, буквы по одной, карточки наезжают друг на друга. Получается ярмарка, и выглядит она дешевле дефолта.

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

Второе правило: эталон подбирают под тему. Для демо выше я взяла тёплую кремовую систему, потому что на страницу психолога человек приходит с тревогой и холодный синий интерфейс здесь работает против. Тот же самый приём — лёгкие заголовки, курсивный serif, фон цвета бумаги — на странице банка выглядел бы несерьёзно. Одна и та же библиотека даёт разный результат в зависимости от того, что вы у неё берёте.

У эффектов есть цена, и она в килобайтах

Об этом тоже редко говорят, когда советуют библиотеки. Эффекты приезжают не бесплатно: за плавной анимацией обычно стоит Framer Motion, а за «живым» фоном — WebGL-сцена, которая считается на видеокарте. Один такой фон способен добавить странице пару мегабайт и заметно греть телефон, пока читатель скроллит.

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

Практический ориентир: смотрите, что тянет за собой компонент, прежде чем его ставить. Если ради одного фона в проект приезжает анимационная библиотека, а больше вы её нигде не используете — почти всегда дешевле попросить воспроизвести приём на CSS. В моём демо весь тёплый фон — это два размытых круга и градиент, десяток строк без единой библиотеки. На глаз разницы с WebGL-версией нет, а весит ноль.

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

Четыре грабли, на которые я наступила

1. Компоненты не подойдут вашему стеку. React Bits, Aceternity и Fancy Components написаны под React. Если у вас обычная HTML-страница, просите повторить приём на чистом CSS, а не подключать библиотеку.
2. Модель считает дизайн-систему пожеланием. Через пару секций она возвращается к своим любимым серым карточкам. Пишите «применяй как жёсткие ограничения» и проверяйте результат пятым промтом.
3. Лицензия тихо ограничивает. У React Bits нельзя перепродавать сами компоненты. Для клиентских сайтов можно, для продажи шаблонов нельзя.
4. Красиво на ноутбуке, сломано на телефоне. Модель почти не проверяет узкие экраны. Проверяйте ширину 390 пикселей руками — там вылезает горизонтальная прокрутка и слипшиеся меню.

Что делать прямо сейчас

Дефолтный вид появляется там, где модели не дали референса. Дайте конкретный источник вместо слова «красиво», и порядок действий будет такой.

1. Выбрать сайт-эталон на Refero Styles и отдать его параметры как жёсткие ограничения — это основная часть результата.
2. Добавить один эффект в первый экран и спокойное появление по скроллу, взяв приём из React Bits.
3. Прогнать проверку на ширине 390 пикселей и на контраст текста.

Это пятнадцать минут работы. Разница — на двух лендингах в начале статьи.

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

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

Нужно ли платить за дизайн-библиотеки, чтобы уйти от шаблонного вида? Нет. Основную часть результата даёт бесплатный каталог Refero Styles, откуда берутся точные цвета, шрифты и отступы, и бесплатная библиотека React Bits с 209 компонентами. Платные тарифы вроде Refero MCP за 17 долларов в месяц экономят время на поиске референсов, но на качество страницы напрямую не влияют.

Чем каталог дизайн-систем отличается от библиотеки компонентов? Каталог дизайн-систем — это параметры настоящих сайтов: палитра, типографика, отступы, радиусы. Кода там нет, это фундамент внешнего вида. Библиотека компонентов — это готовый код эффектов: фоны, анимации текста, появление по скроллу. Сначала задают систему, потом добавляют эффекты; в обратном порядке получается дефолтная вёрстка с анимациями.

Можно ли использовать React Bits в коммерческих проектах? Да, лицензия MIT + Commons Clause разрешает ставить компоненты на свои и клиентские сайты, в том числе за деньги. Запрещено только продавать сами компоненты — по отдельности, в наборе или переписанными под другой фреймворк. То есть сделать лендинг клиенту можно, а собрать из них шаблон на продажу нельзя.

Что делать, если сайт не на React, а на обычном HTML? Просить воспроизвести приём вместо подключения библиотеки. Большинство эффектов из React Bits и Aceternity — это несколько строк CSS и пара строк JavaScript. В формулировке задания достаточно указать свой стек и добавить: «если компонент под другой стек, воспроизведи приём на моём».

Почему шрифт с сайта-эталона не подходит для русского текста? Фирменные шрифты хороших продуктов обычно платные и лицензируются отдельно. А популярные бесплатные — Poppins, DM Sans, Space Grotesk, Outfit, Sora, Plus Jakarta Sans, Figtree, Fraunces — не имеют кириллицы. Браузер при этом не выдаёт ошибку: он молча подставляет системный шрифт, и настроенная типографика превращается в дефолтную. Решение — брать с эталона характер шрифта и числовые параметры: размеры, межбуквенные расстояния, толщину. Сам шрифт заменять на кириллический того же характера: Inter, Inter Tight, Manrope, Onest, Golos Text для интерфейсных, Source Serif 4, Spectral, Lora для текстовых с засечками.

Замедляют ли анимации из библиотек загрузку сайта? Да, и иногда существенно. За анимациями обычно стоит Framer Motion, а за «живыми» фонами — WebGL-сцена, которая считается на видеокарте: один такой фон может добавить странице пару мегабайт и греть телефон. Это бьёт дважды — люди уходят, не дождавшись загрузки, а поисковики учитывают скорость при ранжировании. Если анимационная библиотека приезжает в проект ради одного эффекта, дешевле воспроизвести приём на CSS: тёплый фон в демо из этой статьи — два размытых круга и градиент, десяток строк без библиотек.

Сколько анимаций можно ставить на лендинг? Один заметный эффект в первом экране и спокойное появление секций по скроллу. Исключение — игры и развлекательные проекты, там перегруз уместен. Для услуг, связанных с доверием (психолог, врач, юрист), резкое движение противопоказано: оно повышает тревожность и работает против цели страницы.

Если было полезно, у меня есть курс для маркетологов про работу с AI-инструментами — там подробно разбираю и лендинги, и всё остальное, что маркетолог может собрать себе сам. Первые два модуля бесплатные.