Design for AI

Estilo HUD sci-fi: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de hud sci-fi. Também chamado de UI de HUD, FUI (UI fictícia), heads-up display, interface de nave espacial, UI do Homem de Ferro, UI holográfica. 2008 (Homem de Ferro), 2013 (Oblivion), em curso para jogos, defesa, drones, startups espaciais.

Traços

  • linhas finas em ciano ou âmbar sobre preto, com colchetes, retículas, arcos e marcas de tique
  • dados em todo lugar: leituras, coordenadas, porcentagens, logs rolando
  • medidores circulares e progresso radial; barras segmentadas
  • painéis em camadas com cantos cortados e preenchimentos semitransparentes (5-10%)
  • tipografia monospace e condensada, caixa alta, tamanhos minúsculos com tracking largo
  • movimento sutil constante: anéis girando, indicadores piscando, linhas de varredura
  • o brilho é fino e preciso, não grosso como neon

Paleta

#04070d preto, #00e5ff ciano, #ffb300 âmbar (alerta), #ff3d00 vermelho (crítico), #7fdbff texto ciano pálido, rgba(0,229,255,0.08) preenchimento de painel

Tipografia

Rajdhani, Orbitron, Michroma ou Exo 2 para títulos (500-600 em caixa alta 0.15em), Share Tech Mono ou JetBrains Mono para leituras (11-13px); corpo mantido mínimo

Faça

  • desenhe o chrome como SVG inline (colchetes, anéis, escalas de tique) para escalar nítido e animar por stroke
  • mantenha todo movimento decorativo abaixo de 0.3 de opacidade e lento (anéis a 30-60s por rotação) para nunca competir com o conteúdo
  • use âmbar e vermelho só para estados reais (aviso, erro), nunca como decoração

Evite

  • não coloque conteúdo de leitura de verdade num HUD; use para dashboards, jogos, demos e heros de landing apenas
  • não encha a tela de números falsos; cada leitura deve mapear para algo
  • não suavize com cantos arredondados; só ângulos e arcos

Conhecido por: Homem de Ferro (Jarvis), Oblivion, menus de Destiny 2, display da SpaceX Dragon, Anduril

Semente CSS
:root {
  --bg: #04070d;
   --fg: #7fdbff;
   --accent: #00e5ff;
   --warn: #ffb300;
   --alert: #ff3d00;
   --panel: rgba(0,229,255,0.08);
   --radius: 0;
   --font: 'Rajdhani',sans-serif;
   --font-mono: 'Share Tech Mono',monospace
}
Prompt

Construa o site como um HUD sci-fi. Fundo #04070d com uma vinheta radial tênue. Texto #7fdbff, cor de linha primária #00e5ff, âmbar #ffb300 só para avisos, vermelho #ff3d00 só para crítico. Fontes: Rajdhani 600 em caixa alta com tracking 0.15em para títulos a 40/24/16px, Share Tech Mono 12px para leituras e labels. Painéis: background rgba(0,229,255,0.08), borda 1px rgba(0,229,255,0.5), clip-path com dois cantos cortados (12px), e colchetes de canto em SVG inline com 20px de comprimento, traço de 1.5px. Hero: um grande medidor circular (SVG, 3 anéis concêntricos com marcas de tique a cada 6deg, anel externo girando 60s linear, anel interno girando ao contrário em 45s) com uma leitura central contando no load. Barra lateral: um log rolante de linhas mono surgindo com fade a cada 2s. Barras de progresso segmentadas (12 segmentos, gaps de 2px). Brilho fino: drop-shadow(0 0 2px #00e5ff) só nos traços. Uma linha de varredura de 1px desce a cada 8s a opacity 0.15. Sem raio. Sob prefers-reduced-motion pare todos os loops.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site como um HUD sci-fi. Fundo #04070d com uma vinheta radial tênue. Texto #7fdbff, cor de linha primária #00e5ff, âmbar #ffb300 só para avisos, vermelho #ff3d00 só para crítico. Fontes: Rajdhani 600 em caixa alta com tracking 0.15em para títulos a 40/24/16px, Share Tech Mono 12px para leituras e labels. Painéis: background rgba(0,229,255,0.08), borda 1px rgba(0,229,255,0.5), clip-path com dois cantos cortados (12px), e colchetes de canto em SVG inline com 20px de comprimento, traço de 1.5px. Hero: um grande medidor circular (SVG, 3 anéis concêntricos com marcas de tique a cada 6deg, anel externo girando 60s linear, anel interno girando ao contrário em 45s) com uma leitura central contando no load. Barra lateral: um log rolante de linhas mono surgindo com fade a cada 2s. Barras de progresso segmentadas (12 segmentos, gaps de 2px). Brilho fino: drop-shadow(0 0 2px #00e5ff) só nos traços. Uma linha de varredura de 1px desce a cada 8s a opacity 0.15. Sem raio. Sob prefers-reduced-motion pare todos os loops.

## Tokens
:root { --bg:#04070d; --fg:#7fdbff; --accent:#00e5ff; --warn:#ffb300; --alert:#ff3d00; --panel:rgba(0,229,255,0.08); --radius:0; --font:'Rajdhani',sans-serif; --font-mono:'Share Tech Mono',monospace }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.