Как заставить AI-ассистента верстать премиальные интерфейсы вместо унылых серых шаблонов

Почему AI по умолчанию верстает плохо

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

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

Чтобы получить премиальный результат, нужно переопределить базовые стилистические паттерны модели. Для этого используются правила визуального вкуса ^[1].

Концепция taste rules в proagents

В библиотеке proagents под визуальные стандарты выделена отдельная папка rules/taste/. В ней содержатся инструкции, которые не меняют логику ^[2] работы компонентов, но жестко регулируют их внешний вид и динамику.

Рассмотрим три ключевых правила из этого раздела с конкретными примерами кода, которые вы можете внедрить прямо сейчас:

1. Физика вместо таймингов (animate.md)

Правило запрещает модели использовать стандартные CSS-свойства transition и animation с фиксированным временем (например, 0.3s ease). Вместо этого модель обязана использовать физику пружин (spring physics).

Пример настройки для Framer Motion, которую генерирует ИИ по этому правилу:

// Константы для пружинной анимации в соответствии с правилом animate.md
export const springTransition = {
  type: "spring",
  stiffness: 280, // Оптимальная жесткость для интерактивных элементов
  damping: 30,    // Затухание для предотвращения лишних колебаний
  mass: 0.8       // Легкость элемента для отзывчивого отклика
};

// Использование в компоненте:
// <motion.button transition={springTransition} whileHover={{ scale: 1.05 }} />

2. Матовое стекло (liquid-glass.md)

Создание качественного эффекта Glassmorphism требует точных расчетов. ИИ часто совершает ошибку ^[3], используя случайное размытие вроде backdrop-filter: blur(10px). Правило liquid-glass задает строгие пропорции для размытия, насыщенности фона и цвета наложения в зависимости от темы. Также оно контролирует контрастность текста на полупрозрачных элементах для обеспечения доступности (WCAG).

Готовый CSS-сниппет для создания правильного матового стекла:

.liquid-glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  
  /* Эффект двойной рамки для придания объема и четких краев */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* Для темной темы */
.dark .liquid-glass-card {
  background: rgba(15, 15, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

3. Динамический цвет (brand.md)

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

Пример реализации палитры в CSS:

:root {
  /* Базовый HSL-тон бренда (Hue: 250 - фиолетовый) */
  --brand-hue: 250;
  --brand-saturation: 85%;
  
  /* Цвета для светлой темы */
  --primary: hsl(var(--brand-hue), var(--brand-saturation), 50%);
  --primary-hover: hsl(var(--brand-hue), var(--brand-saturation), 40%);
  --background: hsl(var(--brand-hue), 10%, 98%);
  --foreground: hsl(var(--brand-hue), 20%, 10%);
}

.dark {
  /* Цвета автоматически перестраиваются для темной темы */
  --primary: hsl(var(--brand-hue), var(--brand-saturation), 60%);
  --primary-hover: hsl(var(--brand-hue), var(--brand-saturation), 70%);
  --background: hsl(var(--brand-hue), 15%, 8%);
  --foreground: hsl(var(--brand-hue), 5%, 95%);
}

Установка визуальных правил

Для применения этих правил в проекте используется CLI-инструмент библиотеки proagents.

Клонируем проект:

git clone https://github.com/Arlandaren/proagents.git
cd proagents

Устанавливаем правила визуального вкуса в Cursor:

./proagents install react-patterns --cursor
./proagents install animate --cursor

После этого при генерации любого компонента Cursor будет следовать заданным эстетическим гайдлайнам.

Сравнение результатов верстки

Пример кода: до и после применения правил

Посмотрим на разницу в генерации интерактивной кнопки.

Без использования правил (базовый промпт):

export function ActionButton({ label, onClick }) {
  return (
    <button
      onClick={onClick}
      className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition-all duration-300"
    >
      {label}
    </button>
  );
}

Мы получили стандартную синюю кнопку со стандартным CSS-переходом. Она выглядит плоско и обычно.

С использованием правил react-patterns + animate:

import { motion } from 'framer-motion';

interface ActionButtonProps {
  label: string;
  onClick: () => void;
}

export function ActionButton({ label, onClick }: ActionButtonProps) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{
        type: 'spring',
        stiffness: 400,
        damping: 15
      }}
      className="px-6 py-3 font-semibold text-white bg-gradient-to-r from-[hsl(220,90%,55%)] to-[hsl(240,90%,60%)] rounded-xl shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-[hsl(220,90%,55%)] focus:ring-offset-2"
    >
      {label}
    </motion.button>
  );
}

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

Открытый исходный код под лицензией MIT

Библиотека proagents полностью бесплатна и открыта для сообщества.

Ссылка на репозиторий: github.com/Arlandaren/proagents ^[4]

Если статья помогла вам улучшить визуальное качество ваших приложений, поддержите проект звездой на GitHub. Если вы хотите поделиться своими правилами визуального оформления интерфейсов, отправляйте пулреквесты в репозиторий.