Design for AI

Estilo Resplandor en gradiente de startup de IA: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para resplandor en gradiente de startup de ia. También llamado estilo de landing de IA, SaaS de gradiente púrpura, estética de IA genérica, resplandor en gradiente en modo oscuro, look por defecto de v0, diseño AI slop. 2022-2025 (oleada de ChatGPT; toda landing de wrapper de IA).

Rasgos

  • página azul marino oscuro o negra con un resplandor en gradiente de púrpura a azul o de púrpura a rosa detrás del hero
  • texto en gradiente en el titular ("Supercharge your workflow"), emoji de destello o iconos de estrella
  • tarjetas de cristal con bordes de gradiente de 1px, un patrón de retícula o puntos que se desvanece en el fondo
  • tarjetas de funciones a tres columnas con insignias de icono en gradiente, un muro de logos, una tabla de precios con un resplandor "popular"
  • Inter en todas partes, titular de 48-64px, botón píldora "Get started for free" con un gradiente
  • orbes flotantes, manchas desenfocadas, retícula animada sutil, una captura de producto falsa con un resplandor
  • es lo que genera cualquier herramienta de IA cuando no se especifica un estilo

Paleta

#0a0a1a página, #ffffff texto, #a1a1aa apagado, #7c3aed violeta, #3b82f6 azul, #ec4899 rosa, rgba(255,255,255,0.05) cristal

Tipografía

Geist (siempre), títulos 700 a 56-64px con -0.02em, rellenos con gradiente; cuerpo 400 a 18px; botones 600 a 16px en píldoras

Haz

  • reconócelo: si la página tiene un resplandor púrpura, texto de titular en gradiente, tres tarjetas de cristal y un icono de destello, es este estilo
  • para evitarlo, cambia al menos tres de estas cosas: la fuente (usa una serif o una grotesk con carácter), el fondo (claro, cálido o un color de verdad), el gradiente (elimínalo), la retícula de tarjetas (usa una lista, una tabla o prosa), el acento (un color plano)
  • si un cliente insiste, al menos aterrízalo: capturas reales, números reales, un resplandor, un gradiente, sin destellos

Evita

  • no lo publiques por defecto; a cualquiera que haya visto diez landings de IA le dice "sin diseñador, sin decisiones"
  • no uses texto en gradiente en más de una palabra; perjudica la legibilidad y envejece al instante
  • no añadas iconos de destello o estrella junto a "IA"; la palabra ya lo dice

Conocido por: Miles de landings de wrappers de IA 2023-2025, salidas por defecto de v0 y Lovable, la mayoría de plantillas "Launch your SaaS"

Semilla CSS
:root {
  --bg: #0a0a1a;
   --fg: #ffffff;
   --muted: #a1a1aa;
   --accent: #7c3aed;
   --accent2: #3b82f6;
   --glass: rgba(255,255,255,0.05);
   --radius: 16px;
   --glow: 0 0 80px rgba(124,58,237,0.4);
   --font: 'Geist',sans-serif
}
Prompt

Construye el sitio en el estilo de resplandor en gradiente de startup de IA, pero a propósito y con contención (es el look por defecto que producen la mayoría de herramientas de IA; úsalo solo si el brief lo exige). Fondo #0a0a1a con un único resplandor radial detrás del hero (rgba(124,58,237,0.35), 70vw, blur(120px)) y una retícula de puntos de 32px al 4% de blanco que se desvanece por debajo del pliegue. Texto #ffffff, apagado #a1a1aa. Fuente Geist: h1 700 a 60px con -0.02em, texto en gradiente (linear-gradient(90deg, #7c3aed, #3b82f6)) en una sola palabra; cuerpo 400 a 18px. Botón primario: píldora, gradiente de #7c3aed a #3b82f6, texto blanco, 48px de alto; secundario: contorno 1px rgba(255,255,255,0.15). Tarjetas: relleno rgba(255,255,255,0.05), borde 1px rgba(255,255,255,0.1), radio 16px, sin bordes en gradiente, sin destellos. Una captura de producto real con borde de 1px y el mismo resplandor violeta al 20%. Precios: tres columnas, la central con un borde violeta, sin resplandor. Movimiento: fade-up de 400ms al hacer scroll. Límite: un resplandor, un gradiente, cero emoji.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en el estilo de resplandor en gradiente de startup de IA, pero a propósito y con contención (es el look por defecto que producen la mayoría de herramientas de IA; úsalo solo si el brief lo exige). Fondo #0a0a1a con un único resplandor radial detrás del hero (rgba(124,58,237,0.35), 70vw, blur(120px)) y una retícula de puntos de 32px al 4% de blanco que se desvanece por debajo del pliegue. Texto #ffffff, apagado #a1a1aa. Fuente Geist: h1 700 a 60px con -0.02em, texto en gradiente (linear-gradient(90deg, #7c3aed, #3b82f6)) en una sola palabra; cuerpo 400 a 18px. Botón primario: píldora, gradiente de #7c3aed a #3b82f6, texto blanco, 48px de alto; secundario: contorno 1px rgba(255,255,255,0.15). Tarjetas: relleno rgba(255,255,255,0.05), borde 1px rgba(255,255,255,0.1), radio 16px, sin bordes en gradiente, sin destellos. Una captura de producto real con borde de 1px y el mismo resplandor violeta al 20%. Precios: tres columnas, la central con un borde violeta, sin resplandor. Movimiento: fade-up de 400ms al hacer scroll. Límite: un resplandor, un gradiente, cero emoji.

## Tokens
:root { --bg:#0a0a1a; --fg:#ffffff; --muted:#a1a1aa; --accent:#7c3aed; --accent2:#3b82f6; --glass:rgba(255,255,255,0.05); --radius:16px; --glow:0 0 80px rgba(124,58,237,0.4); --font:'Geist',sans-serif }

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