Habilidade Design Spells

Design Spells é uma coleção de detalhes de design excepcionais — microinterações, easter eggs e padrões de UX inteligentes — que transformam interfaces padrão em experiências digitais memoráveis.

Contexto

Use esta habilidade especificamente para elevar uma UI de algo meramente "funcional" ou "comum" para algo genuinamente "mágico". Ela foca nos detalhes minuciosos que surpreendem e encantam os usuários, estabelecendo uma personalidade de marca forte e premium.

Quando Usar

Acione esta habilidade quando:

• Estiver polindo um recurso finalizado para adicionar ativamente um fator "uau".
• Estiver projetando interações únicas para substituir comportamentos web padrão (por exemplo, estados de hover inteligentes, loaders criativos, transições surpreendentes).
• Estiver implementando "Easter Eggs" ou escolhas de design orientadas por personalidade para diferenciar o produto.
• Estiver buscando se afastar do desenvolvimento genérico e baseado em templates.

Fluxo de Execução

1. Identificar Oportunidade: Mire nas partes "chatas" ou "padrão" da interface (por exemplo, um botão de envio simples, uma foto de perfil, um indicador de rolagem, um alternador de preços).
2. Pesquisar Spells: Navegue pelo Design Spells em busca de padrões altamente criativos (por exemplo, "magnetic hover magic", "physics-based interactions", "fluid scroll surprises").
3. Adaptar Padrão: Adapte a interação para se encaixar perfeitamente na marca e no layout específicos do projeto. Use-a para aprimorar a narrativa central do aplicativo.
4. Implementar sem falhas: Use CSS, Anime.js ou Framer Motion para construir a microinteração específica com suavidade medida em dispositivos alvo; reivindicações de taxa de quadros exigem profiling em vez de uma garantia.

Regras Estritas

• Aprimoramento com escopo: Use uma microinteração apenas quando ela servir à experiência do produto solicitada. Respeite o design existente do usuário, as restrições de acessibilidade e desempenho; um comportamento claro e comum é válido, e esta habilidade é opcional.
• Encantar, Não Distrair: O detalhe deve ser um acréscimo à experiência, não uma barreira de usabilidade. Deve parecer caro e altamente elaborado.
• Execução de Qualidade: Um "spell" quebrado ou travado é pior do que nenhum. Garanta que a implementação tenha alto desempenho, aceleração por GPU e evite mudanças de layout inesperadas, suporte a teclado/toque e respeite prefers-reduced-motion.

Exemplo

Solicitação do usuário:

Polir um recurso finalizado para adicionar ativamente um fator "uau".

Limitações

• Designs de referência são inspiração, não permissão para copiar ativos protegidos ou adicionar pacotes automaticamente. Mantenha as ações principais utilizáveis sem animação/hover/easter eggs; não oculte affordances essenciais atrás de interações decorativas.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialistas.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem faltando.