UI Nativa de IA

"Fluida, adaptativa e conversacional. A interface se transforma para servir ao conteúdo."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Conversacional Primeiro: A entrada de chat ou o prompt de voz é o método de navegação principal, não uma barra lateral de links.
2. Estados Gerativos: Estados de carregamento não são spinners; são textos cintilantes, gradientes em transformação ou layouts esqueléticos que se resolvem suavemente em conteúdo.
3. Componentes Adaptativos: Cartões e blocos dimensionam-se dinamicamente com base no comprimento do conteúdo gerado.

DNA Visual

• Cores: Slate Minimalista combinado com gradientes Electric Indigo ou Neon Pulse para os elementos de IA. O fundo é limpo (branco ou cinza escuro), enquanto a "presença" da IA é representada por um gradiente iridescente e mutável.
• Tipografia: Fontes de sistema altamente legíveis (Inter, SF Pro).
• Estilização: Bordas sutis e brilhantes para indicar a geração de IA em andamento.

Implementação Web

• Exemplo de CSS:

body {
  background-color: #FAFAFA;
  color: #1A1A1A;
  font-family: 'Inter', sans-serif;
}

/* The AI Chat Input */
.ai-prompt-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 16px 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  border: 1px solid transparent;
  
  /* AI Glow Border */
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: 
    linear-gradient(#ffffff, #ffffff), 
    linear-gradient(90deg, #8A2387, #E94057, #F27121);
    
  transition: all 0.3s ease;
}

.ai-prompt-box:focus-within {
  box-shadow: 0 12px 40px rgba(233, 64, 87, 0.15);
}

/* Generative Shimmer Text */
.ai-generating-text {
  background: linear-gradient(90deg, #aaa 0%, #333 50%, #aaa 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  animation: shine 1.5s linear infinite;
}

@keyframes shine {
  to { background-position: 200% center; }
}

Implementação de Aplicativo

SwiftUI

struct AINativeInput: View {
    @State private var isGenerating = true
    @State private var gradientOffset = 0.0
    
    var body: some View {
        VStack {
            // Generative Text Shimmer
            if isGenerating {
                Text("Synthesizing response...")
                    .font(.headline)
                    .foregroundStyle(
                        LinearGradient(
                            colors: [.gray.opacity(0.3), .gray, .gray.opacity(0.3)],
                            startPoint: UnitPoint(x: gradientOffset - 1, y: 0),
                            endPoint: UnitPoint(x: gradientOffset + 1, y: 0)
                        )
                    )
                    .onAppear {
                        withAnimation(.linear(duration: 1.5).repeatForever(autoreverses: false)) {
                            gradientOffset = 1.0
                        }
                    }
            }
            
            // AI Input Box
            HStack {
                TextField("Ask anything...", text: .constant(""))
                Image(systemName: "sparkles")
                    .foregroundColor(.purple)
            }
            .padding()
            .background(Color.white)
            .cornerRadius(24)
            .overlay(
                RoundedRectangle(cornerRadius: 24)
                    .stroke(
                        LinearGradient(colors: [.purple, .pink, .orange], startPoint: .topLeading, endPoint: .bottomTrailing),
                        lineWidth: 2
                    )
            )
            .shadow(color: .pink.opacity(0.15), radius: 20)
        }
        .padding()
    }
}

• Uma máscara LinearGradient em movimento sobre o texto cria um belo estado de "pensando".
• Use um gradiente .stroke em uma sobreposição RoundedRectangle para criar a borda brilhante de IA característica em torno dos campos de entrada.

Flutter

import 'package:shimmer/shimmer.dart';

class AINativeInput extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // Shimmer Gerativo
          Shimmer.fromColors(
            baseColor: Colors.grey[300]!,
            highlightColor: Colors.grey[600]!,

…