Design for AI

Estilo Pixel retrô / 8-bit: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de pixel retrô / 8-bit. Também chamado de UI pixel art, design 8-bit, estilo NES, 16-bit, UI de jogo retrô. consoles de 1983-1995; revival na web de 2014 em diante (NES.css em 2018).

Traços

  • fontes pixeladas e UI de bordas pixeladas: botões com cantos em degrau desenhados com box-shadow
  • paletas limitadas (54 cores do NES, 4 verdes do Game Boy, 16 cores do PICO-8)
  • image-rendering: pixelated em todos os sprites; tudo escalado por múltiplos inteiros (2x, 3x, 4x)
  • caixas de diálogo com bordas grossas, setas piscando, "PRESS START"
  • barras de progresso robustas, corações e moedas como metáforas de UI
  • movimento em steps(), nunca com easing; animação por sprite sheet
  • sensação de efeito sonoro nos estados de hover (pulo de 1 frame)

Paleta

#212529 página (ou #0f380f Game Boy), #f8f8f8 texto, #e76e55 vermelho, #92cc41 verde, #209cee azul, #f7d51d amarelo

Tipografia

Press Start 2P (muito chamativa, 8-12px), Silkscreen, VT323 (legível, 18-22px), Pixelify Sans para títulos; sempre tamanhos inteiros que batem com a grade de pixels

Faça

  • encaixe tudo numa grade de 8px e escale sprites por inteiros com image-rendering: pixelated
  • desenhe bordas e cantos com pilhas de box-shadow ou border-image, não border-radius
  • escolha uma paleta de console real e fique dentro dela

Evite

  • não suavize: sem blur, sem sombras suaves, sem transições com easing
  • não componha texto de corpo em Press Start 2P além de algumas linhas; use VT323 ou Silkscreen para leitura
  • não misture escalas de pixel (um sprite 2x ao lado de um 3x parece errado)

Conhecido por: NES.css, sites de Celeste e Shovel Knight, páginas de aniversário da Nintendo, páginas de jogos no itch.io

Semente CSS
:root {
  --bg: #212529;
   --fg: #f8f8f8;
   --accent: #e76e55;
   --accent2: #92cc41;
   --accent3: #209cee;
   --radius: 0;
   --border: 4px solid #f8f8f8;
   --font: 'Press Start 2P',monospace
}
Prompt

Construa o site em estilo pixel 8-bit. Fundo #212529, texto #f8f8f8, acentos #e76e55, #92cc41, #209cee, #f7d51d apenas. Fontes: Press Start 2P para títulos e botões a 24/16/12px, VT323 a 22px para o corpo (line-height 1.3). Todos os tamanhos e espaçamentos numa grade de 8px. Botões e cards: sem border-radius; desenhe uma borda pixelada de 4px com box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8) para os cantos ficarem recortados. Hero em caixa de diálogo com uma seta para baixo piscando (steps(2) 1s infinite) e uma chamada para ação "PRESS START". Barras de progresso como blocos segmentados de 8px. Qualquer imagem recebe image-rendering: pixelated e é escalada 3x a partir de uma fonte pequena. Hover: o elemento pula 4px para cima sem transição; active: 4px para baixo. Ícones são SVGs pixelados de 16x16. Sem gradientes, sem blur, sem easing em lugar nenhum.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo pixel 8-bit. Fundo #212529, texto #f8f8f8, acentos #e76e55, #92cc41, #209cee, #f7d51d apenas. Fontes: Press Start 2P para títulos e botões a 24/16/12px, VT323 a 22px para o corpo (line-height 1.3). Todos os tamanhos e espaçamentos numa grade de 8px. Botões e cards: sem border-radius; desenhe uma borda pixelada de 4px com box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8) para os cantos ficarem recortados. Hero em caixa de diálogo com uma seta para baixo piscando (steps(2) 1s infinite) e uma chamada para ação "PRESS START". Barras de progresso como blocos segmentados de 8px. Qualquer imagem recebe image-rendering: pixelated e é escalada 3x a partir de uma fonte pequena. Hover: o elemento pula 4px para cima sem transição; active: 4px para baixo. Ícones são SVGs pixelados de 16x16. Sem gradientes, sem blur, sem easing em lugar nenhum.

## Tokens
:root { --bg:#212529; --fg:#f8f8f8; --accent:#e76e55; --accent2:#92cc41; --accent3:#209cee; --radius:0; --border:4px solid #f8f8f8; --font:'Press Start 2P',monospace }

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

Snippets neste estilo

B 092Pixel 8 bits