Design for AI

Estilo Cyberpunk / neón: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para cyberpunk / neón. También llamado UI cyberpunk, UI neón, synthwave, diseño glitch, ciudad nocturna. visuales de Blade Runner en 1982; oleadas web en 2017 (synthwave) y 2020 (marketing de Cyberpunk 2077).

Rasgos

  • fondos casi negros con neón saturado: magenta, cian, amarillo, verde ácido
  • resplandor mediante text-shadows y box-shadows en capas del mismo tono de neón
  • esquinas recortadas (polígonos con clip-path), cortes diagonales, franjas de advertencia
  • efectos glitch: separación RGB, temblor con skew, líneas de escaneo
  • tipografía monospace o condensada en mayúsculas con tracking amplio, códigos numéricos por todas partes
  • elementos de HUD: corchetes, retículas de puntería, lecturas de estado
  • movimiento rápido y seco con parpadeos ocasionales

Paleta

#050507 página, #f0f0f0 texto, #ff2a6d magenta, #05d9e8 cian, #f9f002 amarillo, #d1f7ff cian pálido para el tinte del resplandor

Tipografía

Orbitron o Rajdhani para títulos (700, mayúsculas, tracking 0.1em), Share Tech Mono o JetBrains Mono para datos, Barlow Condensed para el cuerpo; títulos a 40-80px

Haz

  • limita el neón a dos tonos más un amarillo de advertencia; tres resplandores como máximo en pantalla
  • construye el resplandor con 3 sombras apiladas (2px, 8px, 24px) del mismo color con alfa decreciente
  • recorta una esquina de las tarjetas con clip-path: polygon() para la forma característica

Evita

  • no pongas resplandor al texto del cuerpo; el resplandor es solo para títulos, bordes y botones
  • no ejecutes las animaciones glitch de forma continua; dispáralas en hover o una vez al cargar
  • no uses esquinas redondeadas; solo ángulos y cortes

Conocido por: Cyberpunk 2077, Razer, colaboraciones de Ghost in the Shell, Corsair iCUE

Semilla CSS
:root {
  --bg: #050507;
   --fg: #f0f0f0;
   --accent: #ff2a6d;
   --accent2: #05d9e8;
   --warn: #f9f002;
   --radius: 0;
   --glow: 0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6);
   --font: 'Orbitron',sans-serif
}
Prompt

Construye el sitio en estilo neón cyberpunk. Fondo #050507 con una retícula tenue de 48px (líneas rgba(5,217,232,0.06)). Texto #f0f0f0, magenta neón #ff2a6d, cian neón #05d9e8, amarillo de advertencia #f9f002. Fuentes: Orbitron 700 en mayúsculas con tracking 0.1em para títulos a 64/40/24px, Barlow Condensed 400 a 18px para el cuerpo, Share Tech Mono 13px para códigos, marcas de tiempo y etiquetas. Tarjetas: background #0b0b12, borde 1px #05d9e8, una esquina recortada con clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Botón primario #ff2a6d con la misma receta de resplandor en magenta y una franja diagonal de advertencia amarilla y negra en su borde izquierdo. Los títulos llevan text-shadow 0 0 8px currentColor. El título del hero ejecuta un glitch único de 600ms al cargar (temblor skewX y separación RGB de 2px mediante pseudoelementos) y lo repite en hover. Sin border-radius en ningún sitio. Movimiento rápido: transiciones de 120ms.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo neón cyberpunk. Fondo #050507 con una retícula tenue de 48px (líneas rgba(5,217,232,0.06)). Texto #f0f0f0, magenta neón #ff2a6d, cian neón #05d9e8, amarillo de advertencia #f9f002. Fuentes: Orbitron 700 en mayúsculas con tracking 0.1em para títulos a 64/40/24px, Barlow Condensed 400 a 18px para el cuerpo, Share Tech Mono 13px para códigos, marcas de tiempo y etiquetas. Tarjetas: background #0b0b12, borde 1px #05d9e8, una esquina recortada con clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Botón primario #ff2a6d con la misma receta de resplandor en magenta y una franja diagonal de advertencia amarilla y negra en su borde izquierdo. Los títulos llevan text-shadow 0 0 8px currentColor. El título del hero ejecuta un glitch único de 600ms al cargar (temblor skewX y separación RGB de 2px mediante pseudoelementos) y lo repite en hover. Sin border-radius en ningún sitio. Movimiento rápido: transiciones de 120ms.

## Tokens
:root { --bg:#050507; --fg:#f0f0f0; --accent:#ff2a6d; --accent2:#05d9e8; --warn:#f9f002; --radius:0; --glow:0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6); --font:'Orbitron',sans-serif }

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

Snippets en este estilo

Ver todos: botones neón