Design for AI

Estilo Retícula bento: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para retícula bento. También llamado layout de caja bento, UI bento, retícula de keynote de Apple, mosaico de funciones. 2022 en adelante (diapositivas de eventos de Apple, y después toda landing SaaS en 2023).

Rasgos

  • una sola retícula rectangular de mosaicos en tamaños mixtos (1x1, 2x1, 2x2) con medianiles iguales
  • cada mosaico es una función autocontenida: un titular, un visual, una cifra
  • radio uniforme (16-24px) y hueco uniforme (12-16px) mantienen el desorden bajo control
  • los mosaicos alternan entre oscuro, claro y un único relleno de acento
  • el contenido dentro de los mosaicos es grande y escaso: un número, un icono, un recorte de captura
  • la retícula es el hero; rara vez hay una imagen hero aparte
  • el hover eleva o escala ligeramente un mosaico; nada más se mueve

Paleta

#0b0b0f página (variante oscura) o #f5f5f7 (clara), #1c1c22 mosaico, #ffffff mosaico claro, #3b82f6 mosaico de acento, #a1a1aa texto apagado, #fafafa texto

Tipografía

Geist o Manrope; títulos de mosaico 600 a 20-24px, cifras grandes 700 a 48-72px con -0.03em, pies 400 a 14px

Haz

  • diseña la retícula a 4 o 6 columnas en escritorio y colápsala a 1-2 en móvil; mantén un orden de mosaicos con sentido
  • dale a cada mosaico exactamente un mensaje; si necesita dos, divídelo
  • usa el mismo radio, hueco y padding en todos los mosaicos sin excepción

Evita

  • no pongas mosaicos solo de texto por todas partes; al menos un tercio necesita un visual
  • no varíes medianiles ni radios entre mosaicos
  • no apiles dos retículas bento seguidas; una por sección de página

Conocido por: Páginas de producto de Apple, página de funciones de Linear, Vercel, navegador Arc

Semilla CSS
:root {
  --bg: #0b0b0f;
   --fg: #fafafa;
   --muted: #a1a1aa;
   --tile: #1c1c22;
   --accent: #3b82f6;
   --radius: 20px;
   --gap: 14px;
   --font: 'Geist',sans-serif
}
Prompt

Construye la página de inicio como una retícula bento. Fondo de página #0b0b0f, texto #fafafa, apagado #a1a1aa. Retícula: CSS grid con 6 columnas y gap 14px a 1200px, mosaicos que ocupan celdas 2x1, 2x2, 3x1 y 1x1, colapsando a 2 columnas a 768px y a 1 columna a 480px. Cada mosaico: background #1c1c22, borde 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Haz un mosaico #3b82f6 con texto blanco y otro blanco puro con texto #0b0b0f para contrastar. Contenido del mosaico: un título de 20px 600, una línea de pie a 14px, y o bien una cifra de 64px 700 (-0.03em) o bien una captura/ilustración recortada anclada abajo a la derecha y recortada por el radio del mosaico. Fuente Geist en todo. Hover: translateY(-2px) y el borde se aclara a rgba(255,255,255,0.14), 180ms ease-out. Ninguna otra sección puede reutilizar la retícula; debajo usa secciones de texto plano.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye la página de inicio como una retícula bento. Fondo de página #0b0b0f, texto #fafafa, apagado #a1a1aa. Retícula: CSS grid con 6 columnas y gap 14px a 1200px, mosaicos que ocupan celdas 2x1, 2x2, 3x1 y 1x1, colapsando a 2 columnas a 768px y a 1 columna a 480px. Cada mosaico: background #1c1c22, borde 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Haz un mosaico #3b82f6 con texto blanco y otro blanco puro con texto #0b0b0f para contrastar. Contenido del mosaico: un título de 20px 600, una línea de pie a 14px, y o bien una cifra de 64px 700 (-0.03em) o bien una captura/ilustración recortada anclada abajo a la derecha y recortada por el radio del mosaico. Fuente Geist en todo. Hover: translateY(-2px) y el borde se aclara a rgba(255,255,255,0.14), 180ms ease-out. Ninguna otra sección puede reutilizar la retícula; debajo usa secciones de texto plano.

## Tokens
:root { --bg:#0b0b0f; --fg:#fafafa; --muted:#a1a1aa; --tile:#1c1c22; --accent:#3b82f6; --radius:20px; --gap:14px; --font:'Geist',sans-serif }

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