Design for AI

Estilo Vaporwave: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para vaporwave. También llamado estética vaporwave, web a e s t h e t i c, cercano al synthwave, retro Windows 95. origen 2011-2016 (música y arte); uso web continuado en portfolios, música y merch.

Rasgos

  • gradientes de rosa a cian, bandas de atardecer, retículas en alambre que se alejan hacia el horizonte
  • chrome de Windows 95, bustos griegos, palmeras, delfines, tableros de ajedrez, líneas de barrido VHS
  • katakana japonés junto al inglés, letter-spacing amplio
  • tipografía serif o slab con efectos de cromo o contorno
  • texturas lo-fi: artefactos JPEG, resplandor de CRT, halos de color (aberración cromática)
  • ironía y nostalgia; UI deliberadamente anticuada
  • movimiento lento y soñador: gradientes a la deriva, flotación suave

Paleta

#ff71ce rosa, #01cdfe cian, #05ffa1 menta, #b967ff púrpura, #fffb96 amarillo pálido, #1a0b2e base púrpura profundo

Tipografía

Major Mono Display para cabeceras, Cormorant Garamond o Times para el contraste clásico, IBM Plex Mono para la UI; tracking amplio (0.2-0.4em) en los títulos

Haz

  • usa una retícula en perspectiva (repeating-linear-gradient sobre un plano con rotateX(60deg)) como suelo
  • empareja el rosa #ff71ce y el cian #01cdfe en cada gradiente; ese par es la firma
  • añade subtítulos en katakana o japonés bajo los títulos en inglés, pero que tengan sentido

Evita

  • no lo uses para un sitio de empresa; se lee como una broma salvo que la marca esté en el ajo
  • no lo hagas nítido y moderno; añade líneas de barrido y un ligero blur para mantenerlo lo-fi
  • no lo confundas con el cyberpunk; el vaporwave es suave, pastel y lento

Conocido por: La era de la portada de Macintosh Plus, Vapor95, Poolsuite, comunidades de Neocities

Semilla CSS
:root {
  --bg: #1a0b2e;
   --fg: #fffb96;
   --accent: #ff71ce;
   --accent2: #01cdfe;
   --accent3: #05ffa1;
   --radius: 0;
   --glow: 0 0 20px #ff71ce;
   --font: 'Major Mono Display',monospace
}
Prompt

Construye el sitio en estilo vaporwave. Base #1a0b2e con un gradiente de fondo en el hero de #ff71ce (arriba) pasando por #b967ff hasta #01cdfe (abajo) y un sol hecho de bandas horizontales (repeating-linear-gradient en #ff71ce y #fffb96). Debajo, un suelo de alambre cian: un plano con rotateX(60deg) y una retícula repetida de 40px en #01cdfe que se desplaza lentamente hacia el espectador (animación translateY, 4s linear infinite). Tipografía: Major Mono Display para títulos a 56px con letter-spacing 0.3em y text-shadow 0 0 20px #ff71ce; Cormorant Garamond cursiva a 28px para subtítulos; IBM Plex Mono 14px para la UI con subtítulos en katakana japonés bajo cada título. Paneles estilo Windows 95: #c0c0c0 con bordes biselados de 2px (claro arriba a la izquierda, oscuro abajo a la derecha) y una barra de título con gradiente de #000080 a #1084d0. Añade una capa de líneas de barrido CRT a opacity 0.08 y un efecto de aberración cromática de 1px en el texto del hero. Mantén todo lento: transiciones de 600ms ease.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo vaporwave. Base #1a0b2e con un gradiente de fondo en el hero de #ff71ce (arriba) pasando por #b967ff hasta #01cdfe (abajo) y un sol hecho de bandas horizontales (repeating-linear-gradient en #ff71ce y #fffb96). Debajo, un suelo de alambre cian: un plano con rotateX(60deg) y una retícula repetida de 40px en #01cdfe que se desplaza lentamente hacia el espectador (animación translateY, 4s linear infinite). Tipografía: Major Mono Display para títulos a 56px con letter-spacing 0.3em y text-shadow 0 0 20px #ff71ce; Cormorant Garamond cursiva a 28px para subtítulos; IBM Plex Mono 14px para la UI con subtítulos en katakana japonés bajo cada título. Paneles estilo Windows 95: #c0c0c0 con bordes biselados de 2px (claro arriba a la izquierda, oscuro abajo a la derecha) y una barra de título con gradiente de #000080 a #1084d0. Añade una capa de líneas de barrido CRT a opacity 0.08 y un efecto de aberración cromática de 1px en el texto del hero. Mantén todo lento: transiciones de 600ms ease.

## Tokens
:root { --bg:#1a0b2e; --fg:#fffb96; --accent:#ff71ce; --accent2:#01cdfe; --accent3:#05ffa1; --radius:0; --glow:0 0 20px #ff71ce; --font:'Major Mono Display',monospace }

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