Design for AI

Estilo Retro pixel / 8 bits: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para retro pixel / 8 bits. También llamado UI de pixel art, diseño de 8 bits, estilo NES, 16 bits, UI de juego retro. consolas 1983-1995; revival web de 2014 en adelante (NES.css en 2018).

Rasgos

  • fuentes pixeladas y UI con bordes de píxel: botones con esquinas escalonadas dibujadas con box-shadow
  • paletas limitadas (54 colores de NES, 4 verdes de Game Boy, 16 colores de PICO-8)
  • image-rendering: pixelated en todos los sprites; todo escalado por múltiplos enteros (2x, 3x, 4x)
  • cajas de diálogo con bordes gruesos, flechas parpadeantes, "PRESS START"
  • barras de progreso robustas, corazones y monedas como metáforas de UI
  • movimiento en steps(), nunca con easing; animación por hoja de sprites
  • sensación de efecto de sonido en los estados hover (rebote de 1 frame)

Paleta

#212529 página (o #0f380f Game Boy), #f8f8f8 texto, #e76e55 rojo, #92cc41 verde, #209cee azul, #f7d51d amarillo

Tipografía

Press Start 2P (muy ruidosa, 8-12px), Silkscreen, VT323 (legible, 18-22px), Pixelify Sans para títulos; siempre tamaños enteros que encajen en la retícula de píxeles

Haz

  • ajusta todo a una retícula de 8px y escala los sprites por enteros con image-rendering: pixelated
  • dibuja bordes y esquinas con pilas de box-shadow o border-image, no con border-radius
  • elige una paleta de consola real y no te salgas de ella

Evita

  • no suavices: sin blur, sin sombras suaves, sin transiciones con easing
  • no compongas el cuerpo en Press Start 2P más allá de unas pocas líneas; usa VT323 o Silkscreen para leer
  • no mezcles escalas de píxel (un sprite a 2x junto a uno a 3x se ve mal)

Conocido por: NES.css, sitios de Celeste y Shovel Knight, páginas de aniversario de Nintendo, páginas de juegos en itch.io

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

Construye el sitio en estilo pixel de 8 bits. Fondo #212529, texto #f8f8f8, acentos únicamente #e76e55, #92cc41, #209cee, #f7d51d. Fuentes: Press Start 2P para títulos y botones a 24/16/12px, VT323 a 22px para el cuerpo (line-height 1.3). Todos los tamaños y espaciados en una retícula de 8px. Botones y tarjetas: sin border-radius; dibuja un borde de píxel de 4px con box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8) para que las esquinas queden dentadas. Hero como caja de diálogo con una flecha hacia abajo parpadeante (steps(2) 1s infinite) y una llamada a la acción "PRESS START". Barras de progreso como bloques segmentados de 8px. Cualquier imagen recibe image-rendering: pixelated y se escala 3x desde un origen pequeño. Hover: el elemento salta 4px hacia arriba sin transición; active: 4px hacia abajo. Los iconos son SVG de 16x16 píxeles. Sin gradientes, sin blur, sin easing en ningún sitio.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo pixel de 8 bits. Fondo #212529, texto #f8f8f8, acentos únicamente #e76e55, #92cc41, #209cee, #f7d51d. Fuentes: Press Start 2P para títulos y botones a 24/16/12px, VT323 a 22px para el cuerpo (line-height 1.3). Todos los tamaños y espaciados en una retícula de 8px. Botones y tarjetas: sin border-radius; dibuja un borde de píxel de 4px con box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8) para que las esquinas queden dentadas. Hero como caja de diálogo con una flecha hacia abajo parpadeante (steps(2) 1s infinite) y una llamada a la acción "PRESS START". Barras de progreso como bloques segmentados de 8px. Cualquier imagen recibe image-rendering: pixelated y se escala 3x desde un origen pequeño. Hover: el elemento salta 4px hacia arriba sin transición; active: 4px hacia abajo. Los iconos son SVG de 16x16 píxeles. Sin gradientes, sin blur, sin easing en ningún sitio.

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

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.

Snippets en este estilo