Design for AI

Estilo Bauhaus: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para bauhaus. También llamado diseño Bauhaus, web Bauhaus, modernismo geométrico, diseño de colores primarios. 1919-1933 (Weimar, Dessau, Berlín); revival web cíclico, fuerte en el centenario de 2019.

Rasgos

  • solo colores primarios (rojo, amarillo, azul) más negro y blanco roto
  • círculo, cuadrado y triángulo como todo el vocabulario visual
  • sans geométrica en minúsculas, a menudo con letras de trazo circular
  • asimétrico pero alineado con rigor; filetes horizontales y verticales fuertes
  • contraste fuerte entre formas enormes y texto pequeño
  • diagonales y formas solapadas que dan movimiento sin animación
  • la función primero: cada elemento tiene un propósito, la decoración es estructura

Paleta

#f2efe6 blanco roto, #111111 negro, #d62828 rojo, #f7b801 amarillo, #1d4e89 azul

Tipografía

Las fuentes de linaje Bauhaus son comerciales; libres: Josefin Sans, Jost, Spartan, Kanit o Poppins; títulos 700 en minúsculas a 48-96px, cuerpo 400 a 16-18px; de vez en cuando una fuente display estarcida para una sola palabra

Haz

  • restringe las formas a círculo, cuadrado y triángulo en los tres primarios; combínalas en logos y separadores de sección
  • usa filetes negros gruesos (4-8px) como esqueleto de la retícula, visibles en la página
  • compón los títulos en minúsculas; en mayúsculas se lee como Art Deco, no como Bauhaus

Evita

  • no añadas colores secundarios, gradientes ni fotografía
  • no redondees las esquinas de las tarjetas; las formas son primitivas geométricas, no tarjetas de UI
  • no centres el texto del cuerpo

Conocido por: Bauhaus-Archiv Berlín, Fundación Bauhaus Dessau, carteles de Kandinsky y Moholy-Nagy, revista Wallpaper* (parcial)

Semilla CSS
:root {
  --bg: #f2efe6;
   --fg: #111111;
   --accent: #d62828;
   --accent2: #f7b801;
   --accent3: #1d4e89;
   --radius: 0;
   --rule: 6px solid #111;
   --font: 'Jost',sans-serif
}
Prompt

Construye el sitio en estilo Bauhaus. Fondo #f2efe6, texto #111111, exactamente tres acentos: rojo #d62828, amarillo #f7b801, azul #1d4e89. Fuente Jost: títulos 700 en minúsculas a 88/48/28px con tracking -0.01em y line-height 1.0, cuerpo 400 a 18px, line-height 1.5, alineado a la izquierda. Layout sobre una retícula de 12 columnas con estructura visible: filetes horizontales 6px solid #111 entre secciones y un filete vertical que recorre el lado izquierdo de la columna de contenido. Hero: un gran círculo rojo (40vw) solapando un cuadrado azul y un triángulo amarillo (formas CSS o SVG inline), con el titular cruzando por encima. Los botones son rectángulos, border-radius 0, #111 sólido con texto #f2efe6, el hover cambia a #d62828. Los separadores de sección usan una fila de cuadrados alternando los colores primarios. Sin sombras, sin gradientes, sin fotos, sin iconos; usa las tres formas como pictogramas. Movimiento: una única entrada deslizante de 800ms de las formas del hero al cargar, nada más.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo Bauhaus. Fondo #f2efe6, texto #111111, exactamente tres acentos: rojo #d62828, amarillo #f7b801, azul #1d4e89. Fuente Jost: títulos 700 en minúsculas a 88/48/28px con tracking -0.01em y line-height 1.0, cuerpo 400 a 18px, line-height 1.5, alineado a la izquierda. Layout sobre una retícula de 12 columnas con estructura visible: filetes horizontales 6px solid #111 entre secciones y un filete vertical que recorre el lado izquierdo de la columna de contenido. Hero: un gran círculo rojo (40vw) solapando un cuadrado azul y un triángulo amarillo (formas CSS o SVG inline), con el titular cruzando por encima. Los botones son rectángulos, border-radius 0, #111 sólido con texto #f2efe6, el hover cambia a #d62828. Los separadores de sección usan una fila de cuadrados alternando los colores primarios. Sin sombras, sin gradientes, sin fotos, sin iconos; usa las tres formas como pictogramas. Movimiento: una única entrada deslizante de 800ms de las formas del hero al cargar, nada más.

## Tokens
:root { --bg:#f2efe6; --fg:#111111; --accent:#d62828; --accent2:#f7b801; --accent3:#1d4e89; --radius:0; --rule:6px solid #111; --font:'Jost',sans-serif }

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