Variant и Claude Code: закрываем разрыв в дизайне для vibe-coding проектов — настройка репозитория и практика

Введение

Vibe coding — это термин, который стремительно вошел в лексикон разработчиков в 2025 году. Он описывает подход, когда программист описывает идею на естественном языке, а искусственный интеллект генерирует код, беря на себя рутину. Этот метод позволяет создавать прототипы и даже production-приложения за часы, а не недели. Однако у него есть очевидный провал — качество дизайна. ИИ-генерация часто выдает «серые» интерфейсы: кривые отступы, случайные цвета, шрифты без иерархии. Это подтверждают многочисленные обсуждения в профессиональных сообществах: функционально все работает, но выглядит непрофессионально.

Claude Code — это инструмент от Anthropic, который превращает терминал в диалог с ИИ. Он умеет анализировать код, вносить изменения, запускать тесты. Но даже с мощной моделью Claude, качество визуальной части остается в руках разработчика. Здесь на помощь приходит новый подход — специализированные навыки (skills) для Claude Code. Один из таких навыков — Variant — создан именно для того, чтобы закрыть разрыв между «работающим» и «выглядящим дорого» сайтом.

В этой статье мы разберем, как Variant помогает прокачать дизайн сайтов, созданных через vibe coding, как настроить репозиторий с этим навыком и какие практики позволяют добиться уровня профессионального UI/UX. Обсудим как теоретические основы, так и конкретные шаги, которые можно применить уже сегодня.

Что такое vibe coding и почему дизайн страдает

Термин «vibe coding» популяризировал Андрей Карпати в феврале 2025 года, описав процесс, когда разработчик «плывет по течению» с ИИ, принимая его решения без глубокого анализа. Это похоже на джазовую импровизацию — вы задаете ритм, а инструмент заполняет пробелы. Проблема в том, что у джазового музыканта есть чувство стиля, а у ИИ — нет эстетического вкуса.

ИИ-модели обучаются на огромных массивах кода, включая миллионы посредственных интерфейсов. Поэтому по умолчанию они генерируют «среднестатистический» дизайн. Основные проблемы, которые видят разработчики при vibe-coding:

• Непоследовательная типографика — смешение размеров шрифтов, отсутствие масштабирования.
• Случайная цветовая палитра — цвета не согласованы, нет акцентов.
• Игнорирование сетки — элементы «плавают», нет выравнивания по вертикали и горизонтали.
• Отсутствие состояний — кнопки не имеют ховера, фокуса, анимации.
• Шаблонность — сайты похожи друг на друга, как близнецы.

Это происходит потому, что модель не думает о дизайн-системе. Она просто комбинирует популярные паттерны. В результате получается «картонный» интерфейс, который отпугивает пользователей.

Роль Claude Code в современной разработке

Claude Code — это агент для разработки, который работает прямо в терминале. Он понимает структуру проекта, может читать и изменять файлы, выполнять команды, использовать инструменты. Одной из ключевых фич, появившихся в 2025 году, стала поддержка навыков (skills) — подключаемых модулей, которые расширяют возможности ассистента. Навык — это набор инструкций, примеров и правил, которые загружаются в контекст и направляют поведение Claude.

Фактически, skill — это как плагин для IDE, только для мозга ИИ. Вы можете обучить Claude своему стилю кода, код-ревью, а теперь и дизайну. Именно в эту экосистему вписывается Variant — специализированный навык, который добавляет Claude Code «дизайн-экспертизу».

Variant можно представить как мини-дизайн-систему, которую вы подключаете к проекту. Он включает:
- Наборы правил для UI-паттернов.
- Шаблоны для компонентов (кнопки, карточки, формы).
- Методику работы с дизайн-токенами.
- Сценарии аудита визуального качества.

Когда Claude Code активирует навык Variant, он начинает мыслить как дизайнер: проверяет отступы, контраст, выравнивание, семантику. Это сдвигает результат от «работает» к «выглядит профессионально».

Знакомство с Variant: как это работает

На момент августа 2026 года Variant распространяется как репозиторий с набором конфигурационных файлов и инструкций для Claude Code. По сути, это skill, который вы подключаете через команду /skill add или вручную копируете в директорию .claude/skills. Его структура включает:

variant-skill/
├── SKILL.md          # Основная инструкция для ИИ
├── design-tokens/     # JSON/YAML файлы с токенами
├── components/        # Примеры шаблонов компонентов
├── audit/             # Чек-листы для аудита дизайна
└── examples/          # Скриншоты и описания хороших практик

Главный файл SKILL.md содержит системную промпт-инструкцию, которая загружается в контекст Claude Code. В нем прописано, как оценивать дизайн, какие принципы использовать (например, атомарный дизайн, прогрессивное улучшение), а также как применять токены.

Variant работает по принципу «внедрения дизайн-системы». Вместо того чтобы полагаться на случайные значения, Claude получает доступ к переменным: color.primary, font.size.large, spacing.md. Это позволяет генерировать согласованный CSS и HTML.

Ключевые принципы Variant

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

2. Компонентный подход: вместо генерации разрозненных разметок, навык требует переиспользования стандартных компонентов (Button, Card, Input) с кастомизацией через токены.

3. Аудит качества: перед окончанием задачи Claude Code запускает проверки: контрастности по WCAG, выравнивание через CSS Grid, семантические HTML-теги.

4. Рефакторинг: если в проекте уже есть плохой код, Variant предоставляет стратегию его «причесывания» без полной переработки.

Настройка репозитория с Variant

Чтобы внедрить Variant в свой проект, нужно выполнить несколько простых шагов. Я покажу на примере типичного лендинга, созданного через vibe coding.

Шаг 1: Клонирование навыка

Сначала клонируйте репозиторий Variant в свой проект или установите через менеджер навыков Claude Code. Обычно это выглядит так:

cd my-project
mkdir -p .claude/skills
cp -r /path/to/variant-skill .claude/skills/variant

После этого добавьте в SKILL.md ваши собственные дизайн-предпочтения, если нужно.

Шаг 2: Создание дизайн-токенов

Variant использует файл design-tokens.json в корне проекта. Пример:

{
  "color": {
    "primary": "#2563eb",
    "neutral": "#1e293b",
    "surface": "#f8fafc"
  },
  "font": {
    "family": "Inter",
    "size": { "small": "14px", "base": "16px", "large": "24px" }
  },
  "spacing": { "sm": "8px", "md": "16px", "lg": "32px" }
}

Эти токены можно напрямую использовать в CSS или подгружать в Tailwind config.

Шаг 3: Подключение к Claude Code

При запуске Claude Code в проекте, он увидит папку .claude/skills/variant. Вы активируете навык командой /variant on, либо просто попросите: «Продолжай используя Variant». Теперь ИИ будет применять дизайн-систему.

Шаг 4: Аудит и итерации

Когда проект собран, запустите команду /variant audit. Claude Code проанализирует HTML/CSS и выдаст отчет о проблемах: низкий контраст, несовпадение палитры, отсутствие alt-атрибутов, кривые отступы. Вы можете попросить исправить их автоматически.

Практический кейс: улучшение лендинга

Рассмотрим пример. Представьте, что вы нагенерировали страницу для сервиса доставки еды с помощью vibe cooking. Claude Code создал HTML-файл с инлайн-стилями, случайными цветами и «расплющенными» кнопками. Дизайн выглядит неопрятно, хотя логика работает.

Подключаем Variant. Я даю команду:

Активируй Variant и проведи редизайн лендинга. Используй дизайн-токены из файла.

Что делает Claude Code?

1. Анализирует текущий код — разбирает HTML, CSS, выявляет несоответствия.
2. Создает структуру дизайн-токенов — на основе палитры сайта и типовых компонентов.
3. Рефакторит стили — заменяет «магические числа» на переменные, вводит систему отступов.
4. Улучшает компоненты — кнопки получают состояния hover, фокус, анимацию переходов.
5. Проверяет адаптивность — добавляет медиазапросы и гибкие сетки.

В результате код становится чище, а внешний вид — профессиональным. Важно, что Variant не меняет бизнес-логику, он фокусируется только на presentation layer.

Пример до/после

До: было style="color: blue; margin-top: 10px;" по всему сайту.

После: используется <button class="button button--primary"> с CSS-переменными в одном месте.

Это упрощает дальнейшее развитие и поддержку.

Лучшие практики при использовании Variant

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

1. Настройте токены под бренд

Не используйте стандартные токены из коробки. Замените цвета, шрифты и отступы на те, что соответствуют вашему бренду. Это займет 10 минут, но качество будет в разы выше.

2. Используйте компонентный подход

Не позволяйте Claude Code плодить уникальные разметки. Принуждайте его переиспользовать существующие компоненты или создавать новые через дизайн-систему. Например, добавьте в проект библиотеку простых компонентов (Button, Input, Card) и укажите это в SKILL.md.

3. Проверяйте адаптивность

Многие vibe-кодеры забывают про мобильные устройства. Variant должен включать проверку на @media запросы. Напишите в настройках, что все компоненты должны быть отзывчивыми.

4. Интегрируйте с системой контроля версий

Используйте Git-хуки, чтобы запускать аудит Variant перед коммитом. Это предотвратит попадание «кривых» стилей в основную ветку.

5. Участвуйте в ревью

Хотя Claude Code достаточно умен, он не заменяет человеческого глаза. После применения Variant просмотрите изменения и скорректируйте вкусовые вещи.

Автоматизация и экосистема

Variant — это не изолированный инструмент. Он хорошо вписывается в экосистему автоматизации. Например, вы можете настроить пайплайн, где после код-генерации автоматически запускается аудит дизайна, отправляются уведомления в Telegram, или создаются задачи в Jira. Для подобной оркестрации удобно использовать платформы интеграции.

Если вы строите сложные автоматизации на базе Claude Code и хотите подключить его к своим сервисам через API, обратите внимание на платформу ASI Biont — она поддерживает подключение к Claude Code и другим инструментам через API для создания сквозных сценариев. Подробнее на asibiont.com/courses. Это позволит вам, например, автоматически создавать дизайн-токены из Figma или выгружать отчеты об аудите в корпоративную базу.

Заключение

Vibe coding не собирается исчезать — он становится всё более мощным способом разработки. Но чтобы создавать продукты, которые пользователи не назовут «самоделкой», нужны инструменты, компенсирующие отсутствие у ИИ эстетического чутья. Навык Variant для Claude Code — один из первых значимых шагов в этом направлении. Он систематизирует дизайн, внедряет дизайн-токены, проводит аудит и позволяет даже новичку получить интерфейс, достойный профессионального продукта.

Рецепт успеха прост: настройте дизайн-систему, подключите Variant, проверяйте каждую итерацию. И не забывайте, что ИИ — это помощник, а не замена дизайнеру. Используйте его для рутины, но оставляйте контроль над качеством.

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