frontend-design
Crie interfaces frontend distintivas prontas para produção
Également disponible depuis: 7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics
Interfaces de usuário genéricas geradas por IA carecem de identidade visual e memorabilidade. Esta habilidade aplica o framework DFII para criar interfaces intencionais de alta qualidade com estética coesa que se destacam.
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 "frontend-design". Crie uma seção hero com estética retro-futurista para uma startup de turismo espacial
Résultat attendu:
Seção hero apresentando: background gradient mesh com transição de roxo profundo para teal, fonte display personalizada (Orbitron) para headline, layout de texto assimétrico com elementos sobrepostos, textura de overlay de grão, animação flutuante de alto impacto única no botão CTA, efeito de partículas starfield usando apenas CSS. Pontuação DFII: 13 (Excelente execução com forte coesão estética).
Utilisation de "frontend-design". Crie um componente de card de preços com estética minimalista de luxo
Résultat attendu:
Cards de preços em três níveis com: whitespace generoso (unidade base de 48px), fonte serif display refinada (Playfair Display) combinada com sans geométrica (Jost), base monocromática com acento dourado apenas no CTA primário, box-shadow sutil com 20% de opacidade, transformação de escala suave no hover, ícones de marcação como SVG. Evita gradientes roxos genéricos e layouts simétricos.
Audit de sécurité
SûrAll 36 static analysis findings are false positives. The skill contains only markdown documentation describing a frontend design methodology (DFII framework). No executable code, network calls, or command execution present. The LICENSE.txt is standard Apache 2.0 text. Safe for publication.
Score de qualité
Ce que vous pouvez construire
Design de Landing Page
Crie uma landing page memorável com estética de brutalismo editorial, incluindo hierarquia tipográfica personalizada, layout assimétrico e animações de entrada de alto impacto.
Biblioteca de Componentes de Dashboard
Construa um conjunto coeso de componentes de dashboard com estética minimalista de luxo, usando paleta de cores contida, espaçamento preciso e microinterações refinadas.
Redesign de Site de Marca
Redesenhe um site existente com direção estética retro-futurista, implementando gradient mesh personalizados, translucidez em camadas e padrões de movimento distintos.
Essayez ces prompts
Crie um componente de formulário de cadastro usando estética minimalista de luxo. Inclua escolhas tipográficas intencionais, uma paleta de cores dominante com um acento e whitespace proposital. Forneça HTML e CSS completos.
Crie uma landing page de produto. Primeiro, avalie a direção de design usando o framework DFII em todas as cinco dimensões. Almeje uma pontuação de 12 ou superior. Use estética utilitária industrial com composição assimétrica intencional.
Defina um design system completo para um dashboard fintech. Especifique: pares de fontes display e corpo com justificativa, sistema de cores com variáveis CSS com um tom dominante e um acento, ritmo de espaçamento e filosofia de movimento. Então implemente um componente de card de exemplo.
Transforme este componente de botão genérico em algo memorável usando estética de brutalismo editorial. Explique o que o torna distintivo de UIs típicas geradas por IA. Inclua estados de hover e estilos de foco para acessibilidade.
Bonnes pratiques
- Sempre declare explicitamente a direção estética antes de escrever código
- Use o framework DFII para validar que decisões de design alcançam uma pontuação de 8 ou superior
- Inclua pelo menos um âncora de design memorável que diferencie de templates genéricos
Éviter
- Usar fontes do sistema ou padrões de IA como Inter, Roboto ou Arial sem justificativa intencional
- Aplicar gradientes SaaS genéricos de roxo para branco sem justificativa estética
- Criar layouts de seção simétricos e previsíveis que poderiam ser qualquer template