Почему AI по умолчанию верстает плохо
Многие фронтенд-разработчики замечают закономерность: какой бы современной ни была языковая модель, сгенерированный ею дизайн интерфейса обычно выглядит устаревшим. По умолчанию вы получаете серые кнопки, стандартный Tailwind и резкие переходы.
Причина проста: нейросети обучались на гигантских массивах кода из открытых источников. В этих данных преобладают простые, утилитарные и зачастую серые интерфейсы. Модель выдает наиболее вероятный, то есть средний по качеству вариант.
Чтобы получить премиальный результат, нужно переопределить базовые стилистические паттерны модели. Для этого используются правила визуального вкуса.
Концепция taste rules в proagents
В библиотеке proagents под визуальные стандарты выделена отдельная папка rules/taste/. В ней содержатся инструкции, которые не меняют логику работы компонентов, но жестко регулируют их внешний вид и динамику.
Рассмотрим три ключевых правила из этого раздела с конкретными примерами кода, которые вы можете внедрить прямо сейчас:
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 требует точных расчетов. ИИ часто совершает ошибку, используя случайное размытие вроде 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 будет следовать заданным эстетическим гайдлайнам.
Сравнение результатов верстки
Параметр | Базовая генерация | Генерация по правилам taste |
|---|---|---|
Цветовые схемы | Случайные HEX-коды, плоский контраст | Динамические HSL-палитры с адаптацией |
Анимации | Стандартные CSS-переходы с задержкой | Spring physics (физика упругости и затухания) |
Эффекты | Простые тени и размытия наугад | Физически корректный Glassmorphism |
Шрифты | Системный стек по умолчанию | Контрастная иерархия без блеклых тонов |
Пример кода: до и после применения правил
Посмотрим на разницу в генерации интерактивной кнопки.
Без использования правил (базовый промпт):
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
Если статья помогла вам улучшить визуальное качество ваших приложений, поддержите проект звездой на GitHub. Если вы хотите поделиться своими правилами визуального оформления интерфейсов, отправляйте пулреквесты в репозиторий.
