Design for AI

Estilo Terminal / hacker: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para terminal / hacker. También llamado estética hacker, UI de CLI, web de línea de comandos, pantalla verde, estilo TUI. terminales de los 70 y 80; revival web de 2015 en adelante (portfolios de desarrolladores, herramientas de seguridad).

Rasgos

  • tipografía monospace para todo, títulos incluidos
  • fondo negro o muy oscuro con texto verde fósforo o ámbar
  • caracteres de prompt ($, >, ~) como marcadores de lista y títulos
  • caracteres de dibujo de cajas, logos en ASCII art, cursor de bloque parpadeante
  • efecto de texto tecleado en el hero, línea a línea
  • los bordes son ASCII de una línea o 1px en el color del texto
  • tablas alineadas en columnas fijas como un listado de directorio

Paleta

#0c0c0c página, #33ff33 verde primario (o #ffb000 ámbar), #1f7a1f verde apagado, #c8c8c8 secundario, #ff5555 rojo de error, #ffff55 aviso

Tipografía

JetBrains Mono, IBM Plex Mono, Fira Code o Commit Mono; un solo tamaño 14-16px, títulos al mismo tamaño en negrita o encajonados, line-height 1.5

Haz

  • usa un solo tamaño de fuente y marca la jerarquía con prompts, mayúsculas y filetes de dibujo de cajas
  • añade una capa de líneas de barrido (repeating-linear-gradient, 2px, opacity 0.06) y un leve resplandor en el texto
  • haz que el efecto de tecleo se pueda saltar y desactívalo bajo prefers-reduced-motion

Evita

  • no metas una sans-serif por "legibilidad"; rompe la ficción
  • no uses esquinas redondeadas, gradientes ni sombras
  • no lo conviertas en un sistema operativo falso con ventanas falsas; quédate en un solo terminal

Conocido por: Hack The Box, Hackaday (parcial), incontables portfolios de desarrolladores, páginas de marketing de Warp y Ghostty

Semilla CSS
:root {
  --bg: #0c0c0c;
   --fg: #33ff33;
   --dim: #1f7a1f;
   --muted: #c8c8c8;
   --alert: #ff5555;
   --radius: 0;
   --glow: 0 0 6px rgba(51,255,51,0.5);
   --font: 'JetBrains Mono',monospace
}
Prompt

Construye el sitio como un terminal. Fondo #0c0c0c, texto #33ff33, texto apagado #1f7a1f, secundario #c8c8c8, error #ff5555. Fuente JetBrains Mono 15px en todo, line-height 1.5; los títulos van al mismo tamaño en negrita, precedidos de "$ " o envueltos en caracteres de dibujo de cajas (┌─┐ │ └─┘). Ancho máximo 88 caracteres, padding 24px, alineado a la izquierda. La nav es una sola línea de rutas (~/home ~/work ~/about) con la activa en vídeo inverso (background #33ff33, texto #0c0c0c). Hero: una línea tecleada con cursor de bloque parpadeante (animación steps(), parpadeo de 1s), tecleando a 40ms por carácter, se puede saltar con un clic. Las listas usan marcadores "> "; los datos en columnas de ancho fijo. Enlaces subrayados en #33ff33, el hover invierte los colores. Añade text-shadow 0 0 6px rgba(51,255,51,0.5) y una capa de líneas de barrido de 2px a opacity 0.06. Sin radio, sin gradientes, sin imágenes salvo ASCII art. Bajo prefers-reduced-motion, muestra todo el texto al instante.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio como un terminal. Fondo #0c0c0c, texto #33ff33, texto apagado #1f7a1f, secundario #c8c8c8, error #ff5555. Fuente JetBrains Mono 15px en todo, line-height 1.5; los títulos van al mismo tamaño en negrita, precedidos de "$ " o envueltos en caracteres de dibujo de cajas (┌─┐ │ └─┘). Ancho máximo 88 caracteres, padding 24px, alineado a la izquierda. La nav es una sola línea de rutas (~/home ~/work ~/about) con la activa en vídeo inverso (background #33ff33, texto #0c0c0c). Hero: una línea tecleada con cursor de bloque parpadeante (animación steps(), parpadeo de 1s), tecleando a 40ms por carácter, se puede saltar con un clic. Las listas usan marcadores "> "; los datos en columnas de ancho fijo. Enlaces subrayados en #33ff33, el hover invierte los colores. Añade text-shadow 0 0 6px rgba(51,255,51,0.5) y una capa de líneas de barrido de 2px a opacity 0.06. Sin radio, sin gradientes, sin imágenes salvo ASCII art. Bajo prefers-reduced-motion, muestra todo el texto al instante.

## Tokens
:root { --bg:#0c0c0c; --fg:#33ff33; --dim:#1f7a1f; --muted:#c8c8c8; --alert:#ff5555; --radius:0; --glow:0 0 6px rgba(51,255,51,0.5); --font:'JetBrains Mono',monospace }

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

Snippets en este estilo

B 094CRT ámbar