high-end-visual-design
Создавайте интерфейсы премиум-качества уровня агентства
Большинство ИИ-инструментов создают шаблонные,-generic UI-дизайны без полировки. Этот скилл предоставляет точные правила дизайна для шрифтов, отступов, теней, структуры карточек и анимаций, чтобы создавать интерфейсы, которые выглядят так, будто они вышли из дизайн-агентства высокого уровня.
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 "high-end-visual-design". Create a hero section for an AI startup with dark glassmorphism style
Résultat attendu:
- Вверху располагается плавающая навигационная панель в форме стеклянной капсулы с щедрыми отступами. Hero-секция использует глубокий OLED-чёрный фон с мягким радиальным градиентом фиолетового оттенка. Заголовок использует крупный шрифт Grotesk с бейджем-тегом над ним. Ниже расположена кнопка CTA с вложенной иконкой стрелки. Вся секция использует щедрые вертикальные отступы с плавными cubic-bezier переходами на интерактивных элементах.
Utilisation de "high-end-visual-design". Design a card component for a premium dashboard
Résultat attendu:
- Карточка использует паттерн double-bezel с внешней оболочкой, имеющей border-radius 1.5 rem и тонкую обводку-кольцо. Внутреннее ядро имеет собственный фоновый цвет с inset-подсветкой тени и рассчитанным меньшим радиусом для концентрических скруглений. Hover-состояния включают лёгкий масштаб и диагональное перемещение иконки. Карточка расположена на тёмном фоне с рассеянной тенью.
Audit de sécurité
SûrThe static analyzer flagged 107 patterns, but all are false positives. The 94 external_commands detections are markdown inline code backticks (e.g., `Vanguard_UI_Architect`, `backdrop-blur-2xl`), not shell execution. The 13 high-risk cryptographic detections are CSS hex color values (e.g., #050505, #FDFBF7) misidentified as weak algorithms. The 4 system reconnaissance detections are triggered by dollar signs in prices ($150k) and unrelated text. The file contains only markdown design guidance with no executable code, no network access, and no filesystem operations. Safe to publish.
Score de qualité
Ce que vous pouvez construire
Создание премиум-лендинга
Генерация высококонверсионного лендинга с эффектами глассморфизма, каскадными анимациями и асимметричной bento-сеткой.
Редизайн существующего дашборда
Преобразование базовой админ-панели в интерфейс агентского качества с вложенной архитектурой карточек и плавными hover-взаимодействиями.
Создание сайта-портфолио
Построение портфолио в редакционном стиле с масштабной типографикой, мягкими тенями и кинематографичными scroll-анимациями.
Essayez ces prompts
Create a hero section for a SaaS product using the ethereal glass archetype with an asymmetric bento layout.
Build a three-tier pricing card section with double-bezel nested architecture and magnetic hover effects on the primary call-to-action button.
Design a floating pill-shaped navigation bar with a morphing hamburger menu that expands into a full-screen overlay with staggered link reveals.
Create a testimonial section using the editorial luxury archetype with a z-axis cascade layout, serif typography, and scroll-triggered fade-up animations.
Bonnes pratiques
- Всегда выбирайте один vibe-архетип и один layout-архетип перед генерацией кода для обеспечения единого языка дизайна
- Используйте transform и opacity для всех анимаций, чтобы поддерживать GPU-производительность и избегать свойств, вызывающих перерасчёт layout
- Применяйте backdrop-blur фильтры только к фиксированным или липким элементам, никогда — к контейнерам с прокруткой
Éviter
- Никогда не используйте стандартные шрифты, такие как Inter, Roboto или Arial, в премиум-дизайне
- Никогда не применяйте linear или ease-in-out переходы, которые создают плоскую и безжизненную анимацию
- Никогда не используйте обработчики события window.scroll для scroll-анимаций — они вызывают постоянные рефлоу и снижают производительность на мобильных устройствах