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

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

Вы наверняка это видели и сами создавали такие вебдизайны : просишь нейросеть сделать лендинг - получаешь вроде что-то рабочее: 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 прямо в чате это сделать. Что-то типо:

"Set up Puppeteer to take screenshots for visual review"

Он создаст скрипт 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 начнёт «чинить» то, что на самом деле работает правильно - просто в момент скриншота выглядит иначе. Модель застрянет в бесконечном цикле правок, а вы останетесь с сожженными лимитами.

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

"Because this is an animated background, DO NOT use the screenshot tool to compare. Just work in the code."

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

Совет из практики: периодически очищайте контекст командой /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, вставляете стили и пишете промпт:

"Clone this website using this screenshot and these styles. Put it on localhost. Use screenshot loop to compare your result with the reference until it matches."

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

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

"Теперь замени цвета, тексты и логотипы на те, что лежат в папке @brand_assets"

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

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

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

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

Библиотека

Что брать

21st.dev

React-компоненты с анимациями, уникальные UI-элементы

UI Verse

Чистые CSS-компоненты без зависимостей

Framer Motion

Готовые анимации для React-проектов

Tailwind UI

Компоненты на Tailwind CSS

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

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

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

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

"Work in this background element right behind the logo"

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

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

"Add this element to my site for all my buttons"

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

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

"Because this is an animated background, DO NOT use the screenshot tool to compare. Just work in the code."

Иначе 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 - канал, на котором основан пайплайн

Надеюсь тебе понравилось. Заглядывай в мой тг-канал, там много интересного и полезного про вайб-кодинг и не только☺️