Моя сборка, чтобы Claude делал сайты уровня продукта, а не AI-шаблоны

Все видели одинаковые сайты, сделанные через AI: светлый фон, синие кнопки, карточки в три колонки, шрифт Inter. Узнаешь его за секунду. Это не потому что Claude плохо умеет в дизайн - он умеет. Это потому что ему не дали контекст.

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

Почему сайты на Claude выглядят как шаблон

Claude по умолчанию оптимизирует под «работает и выглядит нормально». Если не задать планку выше, он делает то, что видел чаще всего в обучающих данных. А чаще всего там - стандартные Bootstrap/Tailwind-шаблоны с предсказуемой иерархией.

Решение не в том, чтобы написать «сделай дизайн уровня Apple». Это работает плохо - слишком абстрактно. Решение - в конкретных инструкциях и правильном контексте.

Рычаг 1: движение и анимации с правильным easing

Статичный сайт на Claude выглядит как документ. Добавь движение - и он начинает ощущаться как продукт.

Главное - не просто «добавь анимации». А задать конкретный easing и тайминг. Дефолтные ease-in-out на 0.3s - это стандарт. Вот что работает лучше:

Добавь на секцию появление при скролле. Используй:
- transform: translateY(24px) → translateY(0)
- opacity: 0 → 1
- easing: cubic-bezier(0.16, 1, 0.3, 1)
- duration: 0.6s
- stagger между дочерними элементами 80ms

Этот easing (spring-like, быстрый старт, плавное завершение) - стандарт у Vercel, Linear, Loom. Он ощущается дорого, потому что движение похоже на физическое.

Микроанимации на hover тоже работают: scale на кнопках (1.02), лёгкий подъём карточек (translateY -4px), плавное изменение цвета с задержкой. Это детали, которые чувствуются, даже если пользователь не может их назвать.

Рычаг 2: авто-правка дизайна одной командой

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

Вместо ручной правки - даю Claude одну задачу на весь проект:

Пройдись по всему проекту и приведи к единому стандарту:
- отступы: только кратные 4px (16, 24, 32, 48, 64, 96px)
- типографика: заголовки H1/H2/H3 с чёткой иерархией, line-height 1.2/1.4/1.6
- сетка: все колонки на одной базовой сетке
- выравнивание: все блоки на главной оси выровнены единообразно
Покажи что изменил.

Это занимает один раз 2-3 минуты - и сайт становится визуально согласованным. Разнобой исчезает.

Рычаг 3: конкретные референсы вместо абстракций

«Сделай красиво» - самая неэффективная инструкция. «Сделай как Vercel.com» - лучше, но всё ещё абстрактно.

Рабочий подход: дать конкретный элемент с конкретного сайта.

Например:

Посмотри как устроен hero-блок на linear.app - 
темный фон, крупный заголовок с градиентным акцентом на ключевом слове,
подзаголовок в 60% непрозрачности, две кнопки (primary solid + ghost),
слева снизу - соцдоказательство маленьким шрифтом.
Сделай мой hero в этой логике, адаптировав под мой контент.

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

Сигнатурные детали, которые дают «вау»

Есть несколько конкретных решений, которые я использую на премиальных лендингах - и они стабильно дают реакцию «это выглядит дорого»:

Шрифт Onest вместо Inter. Inter - стандарт, его везде. Onest - современная русскоязычная гарнитура, которая хорошо смотрится и в кириллице, и в латинице. Просто замени шрифт в глобальных стилях.

Liquid glass на элементах. Стеклянный эффект с blur-фоном (backdrop-filter: blur + полупрозрачный фон) на карточках, навбаре, модалках. Это ощущение глубины, которого нет у плоского дизайна. Просит: «Добавь glass-morphism на карточки: backdrop-filter blur(20px), фон rgba(255,255,255,0.08), border rgba(255,255,255,0.12)».

Градиентные акценты на заголовках. Одно-два ключевых слова в заголовке с градиентом вместо плоского цвета. Классика: линейный градиент с фиолетового на голубой или с оранжевого на розовый на тёмном фоне.

Тёмная тема как основа, а не опция. Большинство AI-сайтов делают светлую тему по умолчанию. Тёмный фон сразу поднимает воспринимаемое качество - он прощает мелкие ошибки в тенях и создаёт ощущение современного продукта.

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

Больше про Claude и AI-инструменты в работе - в моём Telegram-канале Виктор Дачников | NEXTGEN.