Сайты от ИИ выглядят как сайты от ИИ — попробуем это исправить

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

Проблема: ИИ-шаблон в вебдизайне

Вы наверняка это видели и сами создавали такие вебдизайны : просишь нейросеть сделать лендинг - получаешь вроде что-то рабочее: HTML валидный, адаптив на месте, даже тёмная тема есть. Но выглядит оно слишком плоско и вызывает внутреннее отвращение. Одинаковые indigo-500 и blue-600 из дефолтной палитры Tailwind, один и тот же шрифт на заголовках и в теле, плоские тени через shadow-md, скучные кнопки, нулевая глубина - все элементы на одном визуальном слое: явно наш ИИ-дизайнер не собирался напрягаться.

Хотелось бы свалить на конкретную модель и сказать - "надо просто выбрать вот эту и всё будет тип топ". Но на самом деле - это проблема подхода: по умолчанию ИИ пишет и оптимизирует код подходом "работает и не ломается", а не "выглядит как лучшие примеры с Awwwards". У него нет контекста вашего бренда, нет визуального фидбека на результат, нет источника вдохновения. Он берёт самый частотный паттерн из обучающей выборки, и вы получаете среднее арифметическое всех шаблонов интернета (стоит признать - иногда и так нормально). Давайте это починим в этой статье.

Ниже - пайплайн из пяти приёмов, который я собрал для себя (основа это - туториал от Нейта Херка, у него интересный YouTube канал про вайбкодинг, советую, ссылки внизу).

Что понадобится

Перед тем как нырять в хаки - кратко про минимальный сетап:

• VS Code с расширением Claude Code

• Подписка Anthropic (Pro или Max)

• Node.js (для Puppeteer, который понадобится в хаке #2)

Рекомендуемая структура проекта:

my-website/ ├── claude.md ← системный промпт ├── brand_assets/ │ ├── logo.svg │ └── brand-guide.md ├── src/ │ ├── index.html │ ├── styles.css │ └── main.js └── screenshots/ ← для Puppeteer

Теперь к самим хакам.

Хак #0. Файл claude.md — системный промпт проекта

Самый фундаментальный приём, но ничего нового и гениального - нужен хороший промпт, который объяснит агенту, что мы хотим. Claude Code читает автоматически перед каждым запросом файл claude.md, где все и описывается. Он задаёт контекст, которого модели так не хватает по умолчанию.

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

Что стоит прописать:

• Стек: Tailwind через CDN, один index.html, mobile-first.

• Бренд: конкретные hex-коды цветов, пара шрифтов, стиль (минимализм / корпоратив / игривый / для-нелюбимого-заказчика).

• Запреты: вещи, которые вы точно не хотите видеть.

• Правила поведения: например, всегда сначала активировать скилл фронтенд-дизайна, всегда проверять папку brand_assets/.

Вот пример claude.md, который можно брать за основу и адаптировать:

# CLAUDE.md — Frontend Website Rules ## Always Do First - **Invoke the `frontend-design` skill** before writing any frontend code, every session, no exceptions. ## Reference Images - If a reference image is provided: match layout, spacing, typography, and color exactly. Swap in placeholder content. - If no reference image: design from scratch with high craft. - Screenshot your output, compare against reference, fix mismatches, re-screenshot. Do at least 2 comparison rounds. ## Output Defaults - Single `index.html` file, all styles inline, unless user says otherwise - Tailwind CSS via CDN - Placeholder images: `https://placehold.co/WIDTHxHEIGHT` - Mobile-first responsive ## Brand Assets - Always check the `brand_assets/` folder before designing. - If a logo is present, use it. If a color palette is defined, use those exact values — do not invent brand colors. ## Anti-Generic Guardrails - **Colors:** Never use default Tailwind palette (indigo-500, blue-600). Pick a custom brand color and derive from it. - **Shadows:** Never use flat `shadow-md`. Use layered, color-tinted shadows with low opacity. - **Typography:** Never use the same font for headings and body. Pair a display/serif with a clean sans. Apply tight tracking (-0.03em) on large headings, generous line-height (1.7) on body. - **Gradients:** Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth. - **Animations:** Only animate `transform` and `opacity`. Never `transition-all`. Use spring-style easing. - **Interactive states:** Every clickable element needs hover, focus-visible, and active states. No exceptions. - **Spacing:** Use intentional, consistent spacing tokens — not random Tailwind steps. - **Depth:** Surfaces should have a layering system (base → elevated → floating), not all sit at the same z-plane. ## Hard Rules - Do not use `transition-all` - Do not use default Tailwind blue/indigo as primary color - Do not stop after one screenshot pass

Ключевой блок здесь Anti-Generic Guardrails. Это конкретные правила, которые прямо запрещают модели делать то, что делает результат "пластиковым". Без них Claude по инерции возьмёт shadow-md, indigo-600, один шрифт на всё и вы получите ровно тот самый типикал ИИ-сайт.

Разберу несколько правил подробнее, потому что за ними стоит реальная дизайн-логика:

Парные шрифты. Один шрифт на заголовки и тело - первый признак шаблона. Профессиональные сайты почти всегда используют хотя бы два. Это сразу добавляет визуальную иерархию.

Многослойные тени. Реальные объекты отбрасывают несколько теней разной интенсивности. Правило заставляет Claude использовать 2-3 слоя теней с цветовым оттенком и низкой прозрачностью, и карточки начинают выглядеть объёмно.

Система глубины. Когда все элементы на странице визуально лежат на одном уровне - это скучно. Правило про "layering system" заставляет модель думать о z-плоскостях: фон, приподнятые карточки, "парящие" элементы.

Запрет transition-all. Кажется мелочью, но transition-all — это ленивый хак, который анимирует всё подряд, включая свойства, которые тормозят рендер. Правило заставляет анимировать только transform и opacity.

Хак #1. Навык фронтенд-дизайна (Frontend Design Skill)

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

Установка в два шага. Прямо в чате Claude Code выполняете:

/plugin marketplace add anthropics/claude-code

А затем:

/plugin install frontend-design@claude-code-plugins

После этого, когда в claude.md прописано «Invoke the frontend-design skill before writing any frontend code» Claude будет подтягивать этот скилл автоматически при каждом запросе на фронтенд.

Что это даёт: вместо голого Tailwind-дефолта модель начинает применять кастомные градиенты, парные шрифты, грамотные анимации, интерактивные состояния элементов - разница заметна сразу.

Папка brand_assets

Опционально, но рекомендую. Создайте в корне проекта папку с брендовыми материалами:

brand_assets/ ├── logo.svg ← основной логотип ├── logo-dark.svg ← логотип для тёмного фона └── brand-guide.md ← цвета, шрифты, правила

Claude автоматически подхватит эти файлы, если в claude.md есть соответствующая инструкция (а в примере выше она есть). Это значит, что модель не будет изобретать цвета, а она возьмёт ваши, не будет ставить плейсхолдер вместо логотипа - возьмёт реальный SVG.

Хак #2. Цикл скриншотов через Puppeteer

Идея простая: Claude Code не просто пишет код, а он сам делает скриншот результата, анализирует его, находит отклонения от цели или другие косяки и вносит правки и всё без вашего участия. Фактически некий визуальный селф ревьвер.

Как настроить

Лайфках: попросите Claude прямо в чате это сделать. Что-то типо:

Он создаст скрипт screenshot.mjs в корне проекта и настроит всё автоматически. Скриншоты будут сохраняться в папку temporary_screenshots/.

Как работает цикл

1. Claude генерирует код и запускает страницу на localhost через serve.mjs

2. Вызывает Puppeteer и делает скриншот текущего состояния

3. Анализирует скриншот - сравнивает с референсом или оценивает качество

4. Находит конкретные отклонения: «заголовок 32px, а на референсе ~24px», «отступ между карточками 16px, должен быть 24px»

5. Вносит правки в код

6. Повторяет цикл

Это то, чего принципиально не хватает в обычном текстовом чате с ИИ. Модель не видит, что она сгенерировала, она работает вслепую. А цикл скриншотов даёт ей глаза.

В claude.md можно прописать конкретный чеклист для проверки: spacing/padding, размер и вес шрифтов, точные hex-коды цветов, выравнивание, радиусы, тени, размеры изображений.

Важный нюанс про анимации

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

Поэтому при добавлении анимированных элементов в промпт обязательно дописывайте:

Управление контекстом

Совет из практики: периодически очищайте контекст командой /clear и просите Claude удалить временные скриншоты. Каждый скриншот- это токены в контексте, и если их накопится много, модель начнёт терять нить, это вы и сами уже все знаете.

Хак #3. Клонирование сайтов для вдохновения

Описывать дизайн словами это неблагодарное занятие. «Сделай минималистично, но выразительно, с акцентом на типографику» - это может значить тысячу разных вещей. А вот скриншот конкретного сайта будет однозначным референсом.

Claude Code довольно точно воспроизводит дизайн существующих сайтов. Идея не в том, чтобы воровать чужой дизайн (упаси Боже), а в том, чтобы получить профессиональную структуру и визуальную систему, которую затем можно адаптировать под свой бренд.

Где брать референсы

Dribbble и Awwwards - это очень хорошие источники. На Dribbble удобно искать по категориям: Web Design, Landing Page, SaaS. На Awwwards смотреть номинантов и победителей - лучших из лучших.

Процесс клонирования по шагам

Шаг 1. Получить полноразмерный скриншот. Открываете понравившийся сайт, нажимаете F12 (DevTools), далее Ctrl+Shift+P, вводите screenshot и выбираете "Capture full size screenshot" - это даст полную страницу целиком, а не только видимую область.

Шаг 2. Забрать стили. В DevTools переходите во вкладку Elements → Styles и копируете исходный код/стили нужных элементов. Это даст модели не только визуальный, но и технический контекст. Копируем всё-всё.

Шаг 3. Задача для Claude. Перетаскиваете скриншот в чат Claude Code, вставляете стили и пишете промпт:

Обратите внимание: здесь включается хак #2 - цикл скриншотов. Claude будет сравнивать свой результат с оригиналом и итеративно подгонять.

Шаг 4. Брендирование. Когда клон достаточно точен, даёте новый промпт:

И вот у вас сайт с профессиональной структурой, но вашим брендом.

Хак #4. Готовые компоненты из библиотек

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

Источники компонентов

Процесс интеграции

Шаг 1. Заходите, например, на 21st.dev и находите нужный элемент допустим, анимированный фон для вашего логотипа.

Шаг 2. Копируете код или промпт элемента (на 21st.dev есть специальная кнопка для этого, не промахнетесь).

Шаг 3. Вставляете в чат Claude Code с контекстом:

И ниже - скопированный код/промпт с сайта источника.

Можно и проще, если нужен элемент для конкретной роли:

Помним про анимации

Если компонент анимированный (а они часто анимированные), не забываем про правило из хака #2 и отключаем цикл скриншотов для этого шага:

Иначе Claude начнёт делать скриншоты анимации, каждый раз видеть «отличия» от предыдущего кадра и бесконечно пытаться «починить» то, что работает правильно.

Итого: как это работает вместе

Весь пайплайн выглядит так:

1. claude.md задаёт контекст: стек, бренд, запреты, правила качества

2. Frontend Design Skill подтягивает профессиональные паттерны верстки

3. Цикл скриншотов даёт модели визуальную обратную связь

4. Клонирование даёт профессиональную базу вместо генерации с нуля

5. Библиотеки компонентов закрывают сложные UI-элементы проверенными решениями

Каждый хак решает свою часть проблемы. claude.md убирает дефолтную ИИ-эстетику, скилл добавляет профессиональные приёмы, скриншоты дают фидбек-луп, клонирование и библиотеки дают качественную стартовую точку.

Сохраняйте, чтобы в следующий раз попробовать этот подход, вам понравится результат.

Полезные ссылки

Инструменты:

• Puppeteer - headless-браузер для цикла скриншотов

• Tailwind CSS - утилитарный CSS-фреймворк

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

• 21st.dev - React-компоненты с анимациями + кнопка «Copy prompt» для Claude

• UI Verse - чистые CSS-компоненты без зависимостей

• Framer Motion - анимации для React

Вдохновение:

• Dribbble - референсы лендингов и UI

• Awwwards - лучшие примеры вебдизайна

Вдохновение: YouTube-канал Nate Herk - канал, на котором основан пайплайн