Проектируйте премиум-интерфейсы без AI-клише

Taste-Skill: высокоуровневая дизайн-система фронтенда

Источник: https://github.com/Leonxlnx/taste-skill

1. БАЗОВАЯ КОНФИГУРАЦИЯ (АКТИВНАЯ)

• DESIGN_VARIANCE: 8 (1 = абсолютная симметрия, 10 = артистичный хаос)
• MOTION_INTENSITY: 6 (1 = статика, 10 = кинематографичная физика)
• VISUAL_DENSITY: 4 (1 = галерея / много воздуха, 10 = приборная панель)

2. АРХИТЕКТУРА И КОНВЕНЦИИ ПО УМОЛЧАНИЮ

Если пользователь явно не указал другой стек — придерживайся следующих структурных ограничений:

3. DESIGN ENGINEERING: КОРРЕКЦИЯ БАЙАСОВ

LLM склонны к одним и тем же клише. Проактивно конструируй премиальный интерфейс по этим инженерным правилам:

Правило 4. Материальность, тени и «anti-card overuse»

• DASHBOARD HARDENING: при VISUAL_DENSITY > 7 generic card-контейнеры ЗАПРЕЩЕНЫ. Группируй логически через border-t, divide-y или чистое негативное пространство. Метрики должны дышать, а не быть заключены в коробку — кроме случаев, когда elevation (z-index) функционально необходим.
• Исполнение: карточки — ТОЛЬКО когда тень коммуницирует иерархию. Если тень используется — тонируй её в тон фона.

Правило 6. Данные и формы

• Формы. Лейбл ОБЯЗАН быть над инпутом. Helper-текст опционален, но должен быть в разметке. Текст ошибки — под инпутом. Стандартный gap-2 между блоками.

4. CREATIVE PROACTIVITY (Anti-Slop)

Чтобы активно бороться с generic-дизайном — применяй продвинутые техники по умолчанию:

5. ГАРАНТИИ ПРОИЗВОДИТЕЛЬНОСТИ

• DOM-стоимость. Grain / noise фильтры — ТОЛЬКО на фиксированных, pointer-events-none псевдо-элементах (fixed inset-0 z-50 pointer-events-none). НИКОГДА на скроллируемых контейнерах — иначе непрерывные GPU-repaints и просад мобильных.
• Аппаратное ускорение. Никогда не анимируй top, left, width, height. Только transform и opacity.
• Z-index дисциплина. Не спамь z-50/z-10 без причины. Только для системных слоёв (Sticky Navbars, Modals, Overlays).

6. ТЕХНИЧЕСКИЙ СПРАВОЧНИК (что означают метрики)

DESIGN_VARIANCE (1–10)

• 1–3 (предсказуемый): flexbox justify-center, строгие 12-колоночные симметричные сетки, равные паддинги.
• 4–7 (offset): margin-top: -2rem для перекрытий, разные соотношения сторон (4:3 рядом с 16:9), left-aligned заголовки над центрированными данными.
• 8–10 (ассиметричный): masonry-лейауты, CSS Grid с дробными единицами (grid-template-columns: 2fr 1fr 1fr), массивные пустые зоны (padding-left: 20vw).
• MOBILE OVERRIDE: для 4–10 любой ассиметричный лейаут выше md: ОБЯЗАН агрессивно схлопываться в строгую single-column (w-full, px-4, py-8) на вьюпортах < 768px — чтобы не было горизонтального скролла и ломки.

VISUAL_DENSITY (1–10)

• 1–3 (Art Gallery): много белого, большие гэпы между секциями, дорого и чисто.
• 4–7 (Daily App): обычный spacing для типовых web-приложений.
• 8–10 (Cockpit): крошечные паддинги, никаких карточных коробок — только 1-px разделители. Обязательно: moнospace (font-mono) для всех чисел.

7. AI TELLS (ЗАПРЕЩЁННЫЕ ПАТТЕРНЫ)

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

8. CREATIVE ARSENAL (high-end вдохновение)

Не скатывайся в generic UI. Вытаскивай идеи из этой библиотеки, чтобы результат был визуально сильным. Где уместно — используй GSAP (ScrollTrigger / Parallax) для сложных scroll-историй или ThreeJS / WebGL для 3D/canvas-анимаций, а не базовый CSS. КРИТИЧЕСКИ: никогда не смешивай GSAP/ThreeJS с Framer Motion в одном дереве компонентов. По умолчанию — Framer Motion для UI и Bento. GSAP/ThreeJS — ТОЛЬКО для изолированных full-page scrolltelling или canvas-фонов, обёрнутых в строгий useEffect cleanup.

Standard Hero Paradigm

• Перестань делать центрированный текст поверх тёмной картинки. Делай ассиметричные Hero: текст чисто выровнен слева или справа. Фон — качественное релевантное изображение с мягким стилистическим затемнением/просветлением, уходящим в фон страницы (в зависимости от light/dark режима).

Navigation & Menus

• Mac OS Dock Magnification — навбар у края, иконки плавно масштабируются на hover.
• Magnetic Button — кнопки физически тянутся к курсору.
• Gooey Menu — sub-items «отрываются» от основной кнопки как вязкая жидкость.
• Dynamic Island — pill-компонент, морфящийся для статусов/алертов.
• Contextual Radial Menu — круговое меню, раскрывающееся точно в точке клика.
• Floating Speed Dial — FAB, разворачивающийся в дугу вторичных действий.
• Mega Menu Reveal — full-screen дропдауны с stagger-fade сложного контента.

Layouts & Grids

• Bento Grid — ассиметричные плиточные группировки (например, Apple Control Center).
• Masonry Layout — staggered-сетка без фиксированной высоты строк (Pinterest).
• Chroma Grid — границы/плитки с тонко анимированными градиентами.
• Split Screen Scroll — две половины экрана, едущие в противоположные стороны на скролле.
• Curtain Reveal — Hero раздвигается по середине как занавес на скролле.

Cards & Containers

• Parallax Tilt Card — 3D-наклоны по мыши.
• Spotlight Border Card — борта карточки подсвечиваются под курсором.
• Glassmorphism Panel — настоящее frosted-стекло с inner refraction border.
• Holographic Foil Card — иридесцентные радужные отражения на hover.
• Tinder Swipe Stack — физическая стопка карт со свайпом.
• Morphing Modal — кнопка, бесшовно разворачивающаяся в свой же full-screen диалог.

Scroll-анимации

• Sticky Scroll Stack — карточки «прилипают» сверху и физически стекуются.
• Horizontal Scroll Hijack — вертикальный скролл превращается в плавный горизонтальный пан.
• Locomotive Scroll Sequence — video/3D последовательности, привязанные к скроллбару.
• Zoom Parallax — центральное изображение плавно зумится на скролле.
• Scroll Progress Path — SVG-линии сами рисуются по мере скролла.
• Liquid Swipe Transition — переходы страниц как вязкая жидкость.

Галереи и медиа

• Dome Gallery — 3D-галерея в форме панорамного купола.
• Coverflow Carousel — 3D-карусель с центральным фокусом и наклонёнными краями.
• Drag-to-Pan Grid — бесконечная сетка, которую можно таскать в любую сторону.
• Accordion Image Slider — узкие вертикальные/горизонтальные полосы, разворачивающиеся на hover.
• Hover Image Trail — мышь оставляет след из всплывающих и затухающих изображений.
• Glitch Effect Image — короткий RGB-сдвиг на hover.

Типографика и текст

• Kinetic Marquee — бесконечные текстовые ленты, меняющие направление/скорость на скролле.
• Text Mask Reveal — массивная типографика как окно в видеофон.
• Text Scramble Effect — matrix-style декодирование символов на load/hover.
• Circular Text Path — текст по кругу, вращающийся.
• Gradient Stroke Animation — контурный текст с градиентом, бегущим по обводке.
• Kinetic Typography Grid — сетка букв, разбегающихся от курсора.

Микро-интеракции и эффекты

• Particle Explosion Button — CTA, разлетающийся в частицы при успехе.
• Liquid Pull-to-Refresh — мобильный индикатор загрузки как отрывающаяся капля.
• Skeleton Shimmer — мерцающий блик по плейсхолдерам.
• Directional Hover Aware Button — заливка идёт ровно с той стороны, откуда зашла мышь.
• Ripple Click Effect — волны расходятся строго из точки клика.
• Animated SVG Line Drawing — вектора рисуют свои контуры в реальном времени.
• Mesh Gradient Background — органичные lava-lamp-подобные цветовые пятна.
• Lens Blur Depth — динамическое размытие фона для акцента на foreground.

9. «MOTION-ENGINE» BENTO PARADIGM

A. Базовая дизайн-философия

• Эстетика. High-end, минимально, функционально.
• Палитра. Фон — #f9fafb. Карточки — чисто белые (#ffffff) с 1-px бордером border-slate-200/50.
• Поверхности. Все крупные контейнеры — rounded-[2.5rem]. Добавляй «diffusion shadow» (лёгкую широкую тень, например shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]) для глубины без визуального шума.
• Типографика. Строго Geist, Satoshi или Cabinet Grotesk. Лёгкий tracking-tight на заголовках.
• Подписи. Заголовки и описания карточек — снаружи и под карточкой (gallery-style презентация).

B. Пять архетипов анимированных карточек

1. Intelligent List — умный список с приходящими/уходящими элементами через Framer layout.
2. Command Input — командный ввод с live suggestions и scramble-текстом.
3. Live Status — пульсирующий статус-индикатор с реальным временем.
4. Data Stream — непрерывный поток метрик с плавным обновлением цифр.
5. Contextual UI — адаптивный блок, меняющий содержимое по контексту пользователя.