design-taste-frontend
Создавайте премиальные интерфейсы с дизайн-ограничениями
ИИ-ассистенты для написания кода по умолчанию создают_genericкие, предсказуемые интерфейсы. Этот навык применяет строгие правила дизайна, архитектуру компонентов и стандарты производительности для генерации профессионального фронтенд-кода.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "design-taste-frontend". Создайте hero-секцию с асимметричной раскладкой и премиальной типографикой
Résultat attendu:
Hero-секция с выравниванием по левому краю, использующая min-h-[100dvh] с заголовком text-6xl в шрифте Geist, абзацем text-gray-600 с max-w-[65ch] и кнопкой призыва к действию с обратной связью active scale-[0.98]. Правая половина содержит фоновое изображение с градиентом затухания.
Utilisation de "design-taste-frontend". Постройте bento-grid с пятью анимированными карточками
Résultat attendu:
Адаптивная сетка с пятью карточками: список задач с автоматической сортировкой и swaps layoutId, строка поиска с циклическим печатанием, панель статуса с дышащими индикаторами, бесконечная карусель данных и режим фокусировки с каскадными подсветками. Все карточки используют spring-физику Framer Motion и мемоизированы для производительности.
Audit de sécurité
SûrAll 161 static analysis findings were evaluated and determined to be false positives. The external_commands pattern (125 locations) is markdown inline code formatting, not shell execution. The blocker weak-crypto findings (16 locations) are misidentified hex color values in CSS. The system-reconnaissance findings (20 locations) are legitimate AI coding instructions for dependency verification. The single network finding is a placeholder image URL for UI mockups. The skill is a markdown instruction document for AI coding assistants with no executable code, no network calls, and no security risks.
Score de qualité
Ce que vous pouvez construire
Профессиональная разработка SaaS-дашбордов
Фронтенд-разработчик использует этот навык с Claude Code для создания отполированного SaaS-дашборда с раскладками bento-grid, правильными состояниями загрузки и плавными переходами макета без ручных дизайн-решений.
Единообразие дизайн-системы в командах
Дизайн-инженер делится этим навыком со своей командой, чтобы все сгенерированные ИИ компоненты следовали единой шкале типографики, калибровке цветов и правилам адаптивных контрольных точек.
Маркетинговые лендинги высокого уровня
Соло-основатель использует этот навык с Codex для создания асимметричной hero-секции, кинетической типографики и анимаций на основе скролла, избегая.genericэстетики ИИ.
Essayez ces prompts
Создайте hero-секцию для SaaS-продукта с выровненным по левому краю заголовком, поддерживающим абзацем и кнопкой призыва к действию. Используйте базовые настройки дизайна из этого навыка.
Сгенерируйте секцию с функциями, используя асимметричную двухколоночную зигзаг-раскладку. Чередуйте текстовый контент с плейсхолдерами изображений. Следуйте правилам смещения от центра и использования grid вместо flex-математики.
Постройте bento-grid из пяти карточек с постоянными микро-взаимодействиями. Каждая карточка должна иметь бесконечную анимацию с использованием spring-физики Framer Motion. Включите переходы макета и каскадную оркестровку для элементов списка.
Создайте панель гласморфизма с преломлением внутренних границ и тонированными тенями. Применяйте зернистый фильтр только к фиксированному псевдоэлементу. Убедитесь, что все анимации используют исключительно transform и opacity для аппаратного ускорения.
Bonnes pratiques
- Всегда проверяйте package.json перед предложением команд установки сторонних библиотек.
- Используйте min-h-[100dvh] вместо h-screen для секций на полную высоту, чтобы предотвратить скачки макета на мобильных устройствах.
- Изолируйте интерактивные компоненты как leaf-компоненты с use client в начале. Серверные компоненты должны оставаться статичными.
- Анимируйте только свойства transform и opacity. Никогда не анимируйте top, left, width или height.
Éviter
- Использование центрированных hero-секций с фиолетовыми градиентами. Это самый распространённый клише ИИ-дизайна.
- Создание сложных раскладок на основе процентов с flexbox-математикой вместо CSS Grid.
- Размещение бесконечных анимаций внутри родительских компонентов. Это вызывает ненужные ре-рендеры и снижение производительности.