frontend-design
Crie interfaces frontend distintas com design ousado
Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics
Esta habilidade ajuda você a criar interfaces web de qualidade de produção com estética memorável. Ela orienta escolhas criativas para tipografia, cor, movimento e layout para evitar designs genéricos gerados por IA.
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 um painel de configurações com alternância de modo escuro
Résultat attendu:
- Componente React completo com interruptor animado
- Transição suave de tema usando propriedades CSS personalizadas
- Atributos de acessibilidade para navegação por teclado e leitores de tela
- Persistencia de configurações usando local storage
- Layout responsivo para celular e desktop
Utilisation de "frontend-design". Construa uma seção hero para uma página de destino de startup de tecnologia
Résultat attendu:
- Tipografia ousada com combinação de fontes distinta
- Fundo gradiente animado com movimento sutil
- Revelação de texto escalonada ao carregar a página
- Botões de chamada para ação com efeitos de hover
- Layout de grid responsivo com assimetria criativa
Utilisation de "frontend-design". Projete um componente de cartão para uma galeria de produtos
Résultat attendu:
- Layout de cartão com imagem, título, descrição e preço
- Animação de hover com efeito de elevação e escala da sombra
- Tags coloridas com estilo personalizado
- Transições suaves entre estados
- Sistema de grid para layout de galeria responsivo
Audit de sécurité
SûrThis is a prompt-based skill containing design guidelines and documentation. Static analysis flagged 66 findings, all of which are false positives from pattern matching in documentation text. The JavaScript plugin file contains only basic logging template code with no network, filesystem, or command execution capabilities. No actual security risks identified.
Facteurs de risque
⚙️ Commandes externes (1)
🌐 Accès réseau (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
Construa componentes UI de produção rapidamente
Gere componentes React ou Vue polidos com estética distinta, animações e suporte completo de acessibilidade
Prototipe conceitos visuais rapidamente
Crie protótipos de alta fidelidade com direções de design ousadas e elementos interativos para testar ideias
Crie páginas de destino e interfaces
Construa páginas de destino completas ou interfaces de aplicação com layouts responsivos a partir de descrições em linguagem natural
Essayez ces prompts
Crie um componente de botão com animação de hover, estados de foco e efeito ripple ao clicar
Construa uma página de destino para uma cafeteria sustentável com tons terrosos quentes, animações de rolagem suaves e formas orgânicas
Crie um dashboard de análise em modo escuro com gráficos animados, filtros de dados em tempo real, tooltips de hover e animações de revelação escalonadas
Construa um player de streaming de música com carrossel de capas de álbuns, controles de reprodução, gerenciamento de playlist, ordenação por arrastar e soltar e animações sincronizadas com a reprodução de áudio
Bonnes pratiques
- Forneça contexto claro sobre propósito, público-alvo e restrições técnicas para melhores decisões de design
- Especifique a direção estética desejada como minimalista, brutalista, retrô, orgânica ou luxuosa
- Mencione frameworks específicos como React ou Vue e quaisquer bibliotecas necessárias para obter código otimizado
Éviter
- Pedir componentes genéricos sem especificar direção de design ou personalidade de marca
- Solicitar designs excessivamente complexos com muitas animações sem considerar o impacto de performance
- Ignorar requisitos de acessibilidade para elementos interativos como formulários, botões e navegação
Foire aux questions
Quais frameworks esta habilidade suporta?
Pode criar aplicações web completas?
Ela lida com design responsivo automaticamente?
Meu código e dados do projeto são mantidos seguros?
Por que meu design parece diferente cada vez?
Como isso é diferente da geração de código padrão?
Détails du développeur
Structure de fichiers