Design for AI

Estilo Industrial / blueprint / ingeniería: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para industrial / blueprint / ingeniería. También llamado diseño blueprint, UI de ingeniería, estilo de dibujo técnico, estética CAD, web esquemática. cianotipos de 1840; uso web de 2016 en adelante (startups de hardware, robótica, herramientas de desarrollo).

Rasgos

  • azul blueprint o blanco de papel milimetrado con una retícula fina y líneas de cota
  • etiquetas monospace con medidas, números de pieza, marcas de revisión, tolerancias
  • trazos finos de 1px, retículas de puntería, marcas de esquina, marcas de registro
  • ilustraciones en vista explosionada o en alambre de los productos
  • texto pequeño en mayúsculas con tracking amplio; títulos en una grotesk condensada
  • un color de señal (naranja de seguridad o amarillo de advertencia) para el elemento activo
  • movimiento: las líneas se dibujan, los valores cuentan hacia arriba, la retícula sigue al cursor

Paleta

#0b2a4a azul blueprint (o #f7f7f4 papel), #dbe7f3 línea sobre azul, #1c1c1c tinta sobre papel, #ff6a00 naranja de seguridad, #ffd400 amarillo de advertencia, #8a97a8 apagado

Tipografía

JetBrains Mono, IBM Plex Mono o Space Mono para etiquetas (11-13px en mayúsculas 0.08em); Barlow Condensed, Archivo Narrow u Oswald para títulos (600 a 40-72px); IBM Plex Sans para el cuerpo a 16px

Haz

  • dibuja la retícula con dos repeating-linear-gradient en capas (menor de 8px al 5% de alfa, mayor de 80px al 12%)
  • anota elementos reales con líneas de cota y etiquetas (líneas SVG con marcas en los extremos, texto mono)
  • usa corchetes de esquina en las tarjetas en lugar de bordes completos

Evita

  • no añadas sombras, gradientes ni radio; los planos son planos
  • no uses datos falsos decorativos; cada número debería ser real o claramente un placeholder
  • no uses más de un color de señal

Conocido por: Teenage Engineering, portátil Framework, Rivian (parcial), Leica, Field Notes

Semilla CSS
:root {
  --bg: #0b2a4a;
   --fg: #dbe7f3;
   --muted: #8a97a8;
   --accent: #ff6a00;
   --grid: rgba(219,231,243,0.08);
   --radius: 0;
   --stroke: 1px;
   --font: 'IBM Plex Sans',sans-serif;
   --font-mono: 'JetBrains Mono',monospace
}
Prompt

Construye el sitio en estilo de ingeniería blueprint. Fondo #0b2a4a con una retícula de dos niveles: líneas con repeating-linear-gradient cada 8px a rgba(219,231,243,0.06) y cada 80px a rgba(219,231,243,0.14), en ambos ejes. Texto #dbe7f3, apagado #8a97a8, un color de señal #ff6a00. Fuentes: Barlow Condensed 600 en mayúsculas para títulos a 64/40/24px con tracking 0.02em, IBM Plex Sans 400 a 16px para el cuerpo, JetBrains Mono 12px en mayúsculas 0.08em para etiquetas, números de pieza y cotas. Tarjetas: sin relleno, solo corchetes de esquina (cuatro trazos de 1px en forma de L de 16px) más una etiqueta mono arriba a la izquierda tipo "FIG. 02 / REV B". La imagen del hero es un SVG en alambre o en vista explosionada del producto con líneas de cota (líneas de 1px, marcas de 6px en los extremos, medidas en mono). Botones: contorno 1px #dbe7f3, texto mono en mayúsculas, el hover rellena en #ff6a00 con texto #0b2a4a. Movimiento: las líneas SVG se dibujan mediante stroke-dashoffset durante 900ms; los números cuentan hacia arriba durante 600ms. Sin radio, sin sombras.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo de ingeniería blueprint. Fondo #0b2a4a con una retícula de dos niveles: líneas con repeating-linear-gradient cada 8px a rgba(219,231,243,0.06) y cada 80px a rgba(219,231,243,0.14), en ambos ejes. Texto #dbe7f3, apagado #8a97a8, un color de señal #ff6a00. Fuentes: Barlow Condensed 600 en mayúsculas para títulos a 64/40/24px con tracking 0.02em, IBM Plex Sans 400 a 16px para el cuerpo, JetBrains Mono 12px en mayúsculas 0.08em para etiquetas, números de pieza y cotas. Tarjetas: sin relleno, solo corchetes de esquina (cuatro trazos de 1px en forma de L de 16px) más una etiqueta mono arriba a la izquierda tipo "FIG. 02 / REV B". La imagen del hero es un SVG en alambre o en vista explosionada del producto con líneas de cota (líneas de 1px, marcas de 6px en los extremos, medidas en mono). Botones: contorno 1px #dbe7f3, texto mono en mayúsculas, el hover rellena en #ff6a00 con texto #0b2a4a. Movimiento: las líneas SVG se dibujan mediante stroke-dashoffset durante 900ms; los números cuentan hacia arriba durante 600ms. Sin radio, sin sombras.

## Tokens
:root { --bg:#0b2a4a; --fg:#dbe7f3; --muted:#8a97a8; --accent:#ff6a00; --grid:rgba(219,231,243,0.08); --radius:0; --stroke:1px; --font:'IBM Plex Sans',sans-serif; --font-mono:'JetBrains Mono',monospace }

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