AIKraft/AI/Войти
AIKraft/Skills/design-taste-frontend-v1

design-taste-frontend-v1

Оригинальный навык v1 для оценки дизайна фронтенда. Сохранён для обратной совместимости. Используйте design-taste-frontend-v1, если требуется точное поведение старой версии, в отличие от экспериментального v2.

OPOpenDesign official Дизайн ★ 99.7k

Что делает навык

Навык для оценки и генерации высококачественного фронтенд-дизайна с использованием React, Next.js и Tailwind CSS. Он обеспечивает премиальный визуальный стиль, избегая типичных для ИИ клише, и управляет параметрами вариативности, анимации и плотности интерфейса.

Когда применять

  • Генерация сложных UI-компонентов с продвинутыми микро-анимациями и физикой (Magnetic Micro-physics, Liquid Glass).
  • Создание адаптивных макетов с асимметричной сеткой, требующих строгой мобильной оптимизации (Mobile Override).
  • Разработка дашбордов или плотных интерфейсов (Cockpit Mode) с использованием моноширинных шрифтов и специфической типографики.
  • Реализация интерактивных состояний (загрузка, ошибки, пустые состояния) с тактильной обратной связью.

Как работает

  1. Проверить package.json на наличие зависимостей (framer-motion, lucide-react, zustand) и выдать команду установки, если они отсутствуют.
  2. Определить глобальные переменные DESIGN_VARIANCE, MOTION_INTENSITY и VISUAL_DENSITY (по умолчанию 8, 6, 4) или адаптировать их по запросу пользователя.
  3. Выбрать стек: React/Next.js с Server Components, изолировав интерактивные части в 'use client' компоненты.
  4. Применить стилизацию через Tailwind CSS, соблюдая ограничения по цветам (запрет на фиолетовый/синий 'AI Purple'), шрифтам (Geist, Satoshi, Outfit) и отсутствию эмодзи.
  5. Реализовать анимации и переходы с использованием Framer Motion (spring physics, layoutId, staggerChildren) или CSS, избегая анимации свойств top/left/width/height.
  6. Обеспечить корректную работу с состояниями (loading, empty, error) и тактильной обратной связью (active states), используя Grid для макетов и min-h-[100dvh] для высоты.

Примеры запросов агенту

Создай компонент карточки товара с эффектом Liquid Glass и магнитной анимацией кнопки при наведении, используя Tailwind CSS и Framer Motion.
Разверни асимметричный лендинг с высокой плотностью данных (VISUAL_DENSITY 9), используя моноширинные шрифты для цифр и строгую сетку без карточных контейнеров.
Сгенерируй форму входа с валидацией, состояниями ошибок и загрузки, избегая стандартных спиннеров и используя тактильную обратную связь при нажатии.

Что понадобится

  • React или Next.js (предпочтительно Server Components)
  • Tailwind CSS (v3 или v4)
  • Зависимости: framer-motion, lucide-react, zustand (проверка через package.json)

Описание составлено по SKILL.md навыка, сверено 07.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «nexu-io-design-taste-frontend-v1» из репозитория: # https://github.com/nexu-io/open-design
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r nexu-io-design-taste-frontend-v1/ ~/.claude/skills/nexu-io-design-taste-frontend-v1/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.