Habilidade Magic Animator

Magic Animator permite que designers deem vida a designs estáticos em segundos usando movimento impulsionado por IA, transformando UX plana em experiências dinâmicas e de alta qualidade.

Contexto

Esta habilidade é essencial para melhorar a UX e o engajamento através de movimento de alta qualidade. Funciona melhor para animar ativos de marca, elementos de interface e microinterações.

Quando Usar

Acione esta habilidade quando:

• Der vida a um logo estático ou marca para torná-lo memorável.
• Aprimorar a UI de sites/aplicativos com loaders, widgets animados ou transições suaves.
• Animar ícones ou microinterações para guiar o comportamento do usuário com estilo.

Fluxo de Execução

1. Selecionar Ativo: Identifique o elemento de design estático (SVG, PNG ou camada Figma) a ser animado.
2. Escolher Preset/Categoria: Selecione o domínio apropriado (Logos, UI, Ícones, Mídias Sociais) para garantir que as curvas de movimento correspondam ao contexto.
3. Animar: Use o Assistente de Animação por IA através de prompts baseados em chat para solicitar movimento específico e premium (por exemplo, "Faça parecer uma revelação de marca de luxo de ponta" ou "Dê um toque cinético e elástico").
4. Refinar: Se disponível, edite keyframes para um polimento adicional, garantindo que as curvas de easing pareçam naturais e de alta qualidade.
5. Exportar e Integrar: Exporte a animação final como Lottie (JSON) para desempenho web/móvel, ou GIF/MP4 para mídias sociais.

Regras Estritas

• Use apenas quando o movimento servir ao produto solicitado e às ferramentas escolhidas; respeite as convenções de design existentes e as preferências de movimento reduzido. Não force geração hospedada, efeitos ou novos pacotes.
• Movimento Intencional: Toda animação deve parecer deliberada e premium. Evite movimento caótico ou excessivamente rápido que distraia da UX principal.
• Disciplina de Formato: Escolha um formato suportado com base no tamanho medido, compatibilidade do renderizador e acessibilidade; Lottie nem sempre é menor ou totalmente compatível.

Exemplo

Solicitação do usuário:

Dê vida a um logo estático ou marca para torná-lo memorável.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão especializada.
• Pare e peça esclarecimentos se os inputs, permissões, limites de segurança ou critérios de sucesso necessários estiverem ausentes.

Verifique a disponibilidade atual do produto/ferramenta/exportação, licenças de ativos e autorização de dados/custos do provedor. Inspecione o conteúdo SVG/Lottie gerado, o tamanho do ativo vinculado e teste o fallback, a interação do teclado e o movimento reduzido. Um serviço de animação não está incluído aqui e a qualidade da saída não é garantida pelo guia.