LanceSkill - UI/UX e Design de Jogos Premium

Guia de Design UI/UX e de Jogos Premium

Este skill orienta o agente de IA a produzir designs profissionais para websites, aplicativos e jogos, com visual moderno, hierarquia visual refinada e microinterações suaves.

---

1. Especificações de Estética Visual e Design System

🎨 Paleta de Cores Sofisticada

• Evitar Cores Puras: Nunca use #FF0000 (vermelho puro), #00FF00 (verde puro), #0000FF (azul puro), #FFFF00 (amarelo puro).
• Cores Semânticas:
  • Fundo e Texto: Use cinza-ardósia escuro (Deep Slate, ex.: #0B0F19, #1E293B) ou preto fosco extremo, combinado com um branco cremoso de alto contraste (#F8FAFC).
  • Cor Primária: Use índigo (#6366F1), verde aurora (#10B981), violeta (#8B5CF6), ou gradientes rosa-avermelhados.
  • Cores de Estado: Erros com coral suave (#EF4444), sucesso com verde jade (#34D399).

✍️ Tipografia Moderna e Hierarquia

• Carregamento de Fontes: Carregue fontes modernas do Google Fonts:
  • UI/Corpo: Inter ou Plus Jakarta Sans.
  • Títulos/Números: Outfit ou Cabinet Grotesk.
• Contraste de Pesos: Títulos com peso 700 ou 800, subtítulos 500/600, corpo 400. Crie hierarquia visual através do peso da fonte, não apenas do tamanho.

🔮 Profundidade Espacial e Efeito Glassmorphism

• Cantos Arredondados: Botões com 8px a 12px; cartões com 16px a 24px.
• Glassmorphism (Vidro Fosco):

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  

• Sombras Suaves: Use múltiplas sombras sutis para criar sensação de elevação, evitando sombras escuras únicas:

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03), 
              0 1px 3px rgba(0, 0, 0, 0.02);
  

---

2. Microinterações e Movimento Fluido

O refinamento da UI vem de feedback e animação. Interfaces sem animações de transição parecem rígidas.

✨ Animações de Botões e Componentes Interativos

• Transições Suaves: Adicione transições suaves para todos os estados Hover/Focus/Active:

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  

• Elevação e Brilho no Hover: Cartões devem subir levemente com sombras mais profundas ao passar o mouse, ou a borda deve acender.

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(99, 102, 241, 0.4);
  }
  

• Feedback de Pressão (Clique):

  .button:active {
    transform: scale(0.96);
  }
  

🌀 Carregamento e Transições

• Tela Esqueleto: Para dados carregados de forma assíncrona, sempre use telas esqueleto com brilho suave, em vez de texto estático "Carregando...".
• Animações SVG Sofisticadas: Para Spinners, use ícones SVG leves com rotação CSS e efeitos gradientes.

---

3. Diretrizes Específicas para UI/UX de Jogos

⏱️ Game Loop e Controles Fluidos

• Separação Física e Renderização: Use requestAnimationFrame para renderizar e um passo de tempo fixo para a lógica.
• Suavização de Controles: Se usar sensores (acelerômetro), aplique filtro passa-baixa ou interpolação para evitar oscilações.

💥 Feedback Tátil e "Juice" (Suco do Jogo)

• Feedback de Pontuação/Sucesso:
  • Aumentar fonte e aplicar bounce (transform: scale(1.2) com animação de quique).
  • Efeito de partículas.
  • Números flutuando para cima e desaparecendo.
• Feedback de Dano/Falha:
  • Tela Treme (Screen Shake).
  • Flash Vermelho.
  • Animação de balanço (Shake) no cartão.

📺 Configuração de Interface e HUD

• Layout responsivo sem barras de rolagem desnecessárias.
• Máscara semitransparente escurecendo o fundo para menus pop-up; exibir escalando (Scale-up) ou deslizando (Slide-in).

---

4. Fluxo de Trabalho de Desenvolvimento e Práticas

1. Design antes de codificar: Desenhe um layout ASCII/Markdown antes de escrever código.
2. Sem placeholders: Não use "Lorem Ipsum"; use ícones SVG (como Lucide icons).
3. Variáveis CSS: Gerencie cores do tema centralizadamente com variáveis CSS.