Design for AI

Estilo Art Deco: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para art deco. También llamado web Art Deco, estilo Gatsby, lujo de los años 20, lujo geométrico, dorado deco. años 20 y 30; revival web para hostelería, licores, eventos, y la oleada de la película Gatsby de 2013.

Rasgos

  • simetría, rayos de sol, abanicos, chevrones, formas escalonadas (zigurats)
  • líneas metálicas doradas o de latón sobre negro profundo, azul marino o esmeralda
  • mayúsculas geométricas altas y condensadas con letter-spacing extremo
  • marcos ornamentales y corchetes de esquina alrededor del contenido
  • bordes finos de doble línea, patrones de líneas radiantes
  • composiciones lujosas, formales y centradas
  • movimiento contenido: fundidos lentos, un destello sobre el dorado

Paleta

#0d0d0d negro, #c9a227 dorado, #f3e9d2 texto champán, #14343b verde azulado profundo, #6e1423 burdeos

Tipografía

Poiret One, Limelight, Josefin Sans (300, mayúsculas, tracking 0.2-0.3em) para display; Cormorant Garamond o Cinzel para títulos; Josefin Sans o Lato para el cuerpo a 16px

Haz

  • construye un patrón de rayos de sol o abanico en SVG y reutilízalo como ornamento de cabecera de sección
  • usa líneas doradas dobles de 1px con un hueco de 4px para marcos y separadores
  • centra todo; el Deco es simétrico por naturaleza

Evita

  • no uses un dorado brillante (#ffd700); usa un latón apagado #c9a227 para evitar el look de casino
  • no añadas esquinas redondeadas; solo escalones y puntas
  • no uses más de un metálico; dorado o plateado, no ambos

Conocido por: Imaginería del edificio Chrysler y el Empire State, El gran Gatsby (2013), hoteles Ritz, campañas de Hendrick's y Bombay Sapphire

Semilla CSS
:root {
  --bg: #0d0d0d;
   --fg: #f3e9d2;
   --accent: #c9a227;
   --accent2: #14343b;
   --radius: 0;
   --frame: 1px solid #c9a227;
   --font: 'Josefin Sans',sans-serif;
   --font-display: 'Poiret One',sans-serif
}
Prompt

Construye el sitio en estilo Art Deco. Fondo #0d0d0d, texto #f3e9d2, dorado #c9a227, superficie secundaria #14343b. Todo centrado y simétrico. Fuentes: Poiret One para el título del hero a 72px en mayúsculas con letter-spacing 0.25em; Cinzel 600 para títulos de sección a 32px en mayúsculas 0.15em; Josefin Sans 300 a 16px para el cuerpo, line-height 1.7. Marcos: líneas doradas dobles (1px #c9a227, hueco de 4px, 1px #c9a227) alrededor del hero y de las tarjetas, con pequeños corchetes dorados en las esquinas. Separadores de sección: un SVG inline de rayos de sol con líneas doradas radiantes centrado sobre cada título. Botones: transparentes con borde dorado de 1px y texto dorado en mayúsculas, el hover rellena en dorado con texto #0d0d0d en 300ms. Usa un patrón SVG de chevrones o zigurat escalonado como banda de fondo sutil (opacity 0.08). Sin border-radius, sin sombras, sin dorado brillante. Movimiento: un fundido lento de 1.2s al cargar y un destello de 3s (barrido de gradiente) sobre los filetes dorados.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo Art Deco. Fondo #0d0d0d, texto #f3e9d2, dorado #c9a227, superficie secundaria #14343b. Todo centrado y simétrico. Fuentes: Poiret One para el título del hero a 72px en mayúsculas con letter-spacing 0.25em; Cinzel 600 para títulos de sección a 32px en mayúsculas 0.15em; Josefin Sans 300 a 16px para el cuerpo, line-height 1.7. Marcos: líneas doradas dobles (1px #c9a227, hueco de 4px, 1px #c9a227) alrededor del hero y de las tarjetas, con pequeños corchetes dorados en las esquinas. Separadores de sección: un SVG inline de rayos de sol con líneas doradas radiantes centrado sobre cada título. Botones: transparentes con borde dorado de 1px y texto dorado en mayúsculas, el hover rellena en dorado con texto #0d0d0d en 300ms. Usa un patrón SVG de chevrones o zigurat escalonado como banda de fondo sutil (opacity 0.08). Sin border-radius, sin sombras, sin dorado brillante. Movimiento: un fundido lento de 1.2s al cargar y un destello de 3s (barrido de gradiente) sobre los filetes dorados.

## Tokens
:root { --bg:#0d0d0d; --fg:#f3e9d2; --accent:#c9a227; --accent2:#14343b; --radius:0; --frame:1px solid #c9a227; --font:'Josefin Sans',sans-serif; --font-display:'Poiret One',sans-serif }

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