Prompts para Criar Apps e Designs com IA

Tons neutros, muito espaço em branco, espaçamento funcional

Construa um navbar minimalista com altura fixa (64px), padding de 12px, labels sans-serif em minúsculas (#4A4A4A), e efeitos de hover sublinhados (2px sólido #000, transição: 200ms).

Crie um layout de dashboard em grid (12 colunas), cards modulares sem bordas, texto de métricas em negrito (font-size: 24px), texto cinza para labels (#9E9E9E), e zero decoração além do peso da fonte.

Tons azuis confiáveis, layout limpo, ícones funcionais

Projete um formulário de login profissional com labels de input alinhados à esquerda, espaçamento vertical consistente de 16px, cor azul da empresa (#0056D2) para CTA, e estados sutis de feedback de sucesso/erro (verde/vermelho com 80% de opacidade).

Gere uma tabela de preços corporativa com cards segmentados, cabeçalhos em negrito (18px, semibold), linha de acento azul no topo (altura 3px), e CTA Comparar Planos alinhado na parte inferior direita.

Bordas arredondadas, cores vibrantes, emojis, movimento

Crie uma notificação toast brincalhona com animação saltitante, ícone emoji (font-size: 28px), fundo pastel (#FFFAE5), e sombra projetada (rgba(0,0,0,0.15), blur: 12px).

Construa um grid de cards para app infantil usando cantos arredondados grandes (24px), botões CTA estilo bolha, ícones divertidos com efeito 3D, e cores de fundo vibrantes (ex: #FF4E00, #00C9A7).

Efeitos tech-glow, overlays HUD, acentos cyberpunk

Projete um monitor de estatísticas futurista com fundo escuro (#0A0A0A), linhas neon-azuis (#00F0FF), fonte digital segmentada (Orbitron), e pulsos de leitura de dados animados (frequência: 0.75s).

Crie um dashboard sci-fi com cards de vidro flutuantes (opacity: 0.4, blur-radius: 18px), bordas com brilho resplandecente (2px, efeito de brilho externo), e texto da UI em monospace (#33FFBD).

UI com pouca luz, fundos profundos, acentos de alto contraste

Projete um dashboard em modo escuro com cor de fundo #121212, texto branco a 90% de opacidade, texto secundário a 60%, e CTA primário em #1E88E5 com brilho no hover (box-shadow: 0 0 8px #1E88E5).

Crie um componente inspirado em terminal com fundo preto puro (#000000), texto monospace neon verde (#00FF41), cursor caret animado, e container de bloco de código com brilho interno de 1px.

Sistemas de layout rigorosos, blocos modulares, consistência de alinhamento

Construa um layout de grid responsivo de 12 colunas com gutters de 24px, cards modulares (min-width: 240px), e colapso de breakpoint em 768px. Use ritmo vertical uniforme (grid baseline: 8px).

Crie uma seção de visão geral de dados com um grid 4x4, módulos de card igualmente espaçados (padding: 16px), títulos em negrito (#333333), e valores alinhados à direita em #007ACC.

Tons terrosos, texturas naturais, formas orgânicas

Projete uma landing page com tema botânico: fundo com padrão de folhas (opacidade 15%), formas blob orgânicas enquadrando a seção hero, e paleta de tons terrosos (#8DA57B, #E6D3A3).

Crie um modal de configurações com fundo bege (#FAF8F3), botão CTA verde floresta (#3B6D57), raio de canto suave (12px), e uma ilustração tênue de folha desenhada à mão no rodapé (opacidade: 10%).

Clareza de elevação, hierarquia de informação

Construa um card de produto com miniatura no topo (altura fixa: 160px), título (font-size: 18px, font-weight: 600), descrição (limite de 3 linhas, cortar com reticências), e CTA alinhado na parte inferior.

Crie um card de estatística com container de proporção 1:1, métrica em fonte de 32px, label da unidade em 12px, e um indicador badge no canto superior direito com cor de status (#F44336 para perigo, #4CAF50 para sucesso).

Bolhas conversacionais, alinhamentos alternados

Crie uma interface de chat com mensagens alinhadas à esquerda em cinza (#F1F0F0), respostas alinhadas à direita em azul (#007AFF), espaçamento de 12px entre bolhas, e timestamp em cinza itálico de 10px abaixo de cada mensagem.

Projete uma janela de chat estilo Slack com largura da barra lateral: 240px, área de mensagem flex-grow, separadores de borda de 1px, e input de mensagem com botões de emoji e upload à direita (tamanho do ícone: 20px).

Gráficos funcionais e legíveis com hierarquia forte

Crie um card de gráfico de barras com fundo branco, barras azuis (#2196F3), labels X/Y em sans-serif de 12px, tooltips de hover com fundo de contraste (#333, texto branco), e linhas de grade com 20% de opacidade.

Construa uma linha de dashboard KPI com três blocos: métrica (font-size: 36px, font-weight: bold), label abaixo (font-size: 14px), ícones de seta para tendências (para cima/baixo, codificados por cor), e cor de fundo #F5F5F5.

Cards sobrepostos, assimetria, elementos com Z-index

Projete um dashboard em camadas com cards sobrepostos (Z-index 5, 10, 15), elevação no hover apenas no mais alto, elementos de fundo semi-transparentes (opacidade: 30%), e badge rotacionado no canto superior esquerdo (−10°).

Crie uma seção hero com painéis de grid inclinados (transform: skewX(-10deg)), texto de título grande de fundo (opacidade: 10%, posicionado absoluto), e CTA primário fixo no centro inferior (comportamento sticky).

Neon cyberpunk com texturas glitch e overlays de terminal

Projete um dashboard cyberpunk com fundo preto fosco (#0B0B0B), animação de overlay glitch (taxa de quadros: 12fps, opacidade: 5%), elementos de acento neon (#39FF14, #FF0055), cabeçalhos monospace, e layout de painel angular usando clip-path.

Construa uma landing page de casa assombrada com fundo preto texturizado (#111), tipografia serif em #F5F5F5, overlay de névoa animada (opacidade: 30%, blur-radius: 16px), e ícone de vela piscante (keyframes: 2s alternate).

Padrões específicos de SaaS, E-commerce, Fintech

Crie uma landing SaaS com fundo branco radiante (#FFFFFF), espaçamento ultra-amplo (padding: 96px), tipografia Inter (peso 300), botões lineares estilo vidro com blur (20px), e acentos de formas 3D flutuantes (WebGL, rotação lenta).

Projete um dashboard de trading com layout de três painéis: barra lateral (240px), gráfico central, e painel de negociação rápida (largura: 300px). Use atualizações de preço em tempo real (intervalo: 250ms), flashes de indicador de mercado vermelho/verde, e texto de métrica monospace (#E6E6E6, 18px).

Linha do tempo histórica com parallax de rolagem e encaixe suave

Construa uma linha do tempo horizontal estilo máquina do tempo com gradiente de fundo esmaecido (#FFF → #000), nós de data como círculos rotativos com sombras radiais, e pontos de snap de rolagem em intervalos de 100 anos. Adicione imagens de eventos parallax em profundidades variadas.

Crie um grid de blocos KPI em tempo real com quatro blocos de métrica por linha, texto de número grande (font-size: 36px, weight: bold), animação de contagem ao vivo (duração: 750ms), e badges de seta indicadora (verde para cima, vermelho para baixo).

UI de terminal para AGI com overlays neurais

Projete uma interface de terminal com tela preta (#0A0A0A), fonte monospace (JetBrains Mono, 14px), fundo hex-grid animado (opacidade: 3%), e links SVG neurais conectando nós no hover. Simule um pulso de cursor sincronizado com a digitação do usuário.

Construa um construtor de workflow baseado em tela: tela de largura total com zoom/arraste (escala: 0.5–1.5), nós de bloco com configurações em abas, linhas conectoras via caminhos SVG Bézier, e grid de encaixe (espaçamento de 8px).

Criador de moodboard com mídia arrastável e extração de paleta de cores

Projete uma interface de moodboard com tela de arrastar e soltar, camadas de imagem flutuantes, e amostras de cores auto-geradas abaixo (chips de tamanho 24px, detectados via amostragem de pixel). Adicione tags de "vibe" com hover, molduras de colagem rotacionadas (rotate: ±5°).

Crie um construtor de tira de quadrinhos: grid de quadros arrastáveis na proporção 3:4, ferramenta de balão de fala com cauda redimensionável (vetor de arraste), fonte cartoon em negrito (Bangers, 18px), e overlays de padrão halftone de fundo.

Explorador de museu virtual com seções parallax

Construa uma interface de tour de museu interativo com exibições de rolagem horizontal, camadas de fundo parallax (3 níveis, proporção de rolagem: 0.5/0.75/1), navegação de linha do tempo sticky, e fade de áudio ambiente baseado em seção (sincronização de volume com posição de rolagem).

Crie uma página de diretrizes da marca com grid de 8 colunas, botões de cópia de amostra de cor (hex/RGB), cards de uso de tipografia (blocos de preview ao vivo), e previews de diretrizes de movimento Lottie. Use fundo branco, linhas de grid cinza (#E0E0E0).