Design for AI

Estilo Industrial / blueprint / engenharia: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de industrial / blueprint / engenharia. Também chamado de design blueprint, UI de engenharia, estilo de desenho técnico, estética CAD, web esquemática. blueprints dos anos 1840; uso na web de 2016 em diante (startups de hardware, robótica, ferramentas de desenvolvedor).

Traços

  • azul blueprint ou branco de papel milimetrado com uma grade fina e linhas de cota
  • labels monospace com medidas, números de peça, tags de revisão, tolerâncias
  • linhas finas de 1px, miras, marcas de canto, marcas de registro
  • ilustrações de produto em vista explodida ou wireframe
  • texto pequeno em caixa alta com tracking largo; títulos numa grotesca condensada
  • uma cor de sinalização (laranja de segurança ou amarelo de aviso) para o elemento ativo
  • movimento: linhas se desenham, valores contam, a mira segue o cursor

Paleta

#0b2a4a azul blueprint (ou #f7f7f4 papel), #dbe7f3 linha sobre azul, #1c1c1c tinta sobre papel, #ff6a00 laranja de segurança, #ffd400 amarelo de aviso, #8a97a8 atenuado

Tipografia

JetBrains Mono, IBM Plex Mono ou Space Mono para labels (11-13px em caixa alta 0.08em); Barlow Condensed, Archivo Narrow ou Oswald para títulos (600 a 40-72px); IBM Plex Sans para o corpo a 16px

Faça

  • desenhe a grade com dois repeating-linear-gradients em camadas (menor de 8px a 5% de alpha, maior de 80px a 12%)
  • anote elementos reais com linhas de cota e labels (linhas SVG com tiques nas pontas, texto mono)
  • use colchetes de canto nos cards em vez de bordas completas

Evite

  • não adicione sombras, gradientes nem raio; desenhos são chapados
  • não use dados falsos decorativos; cada número deve ser real ou claramente um placeholder
  • não use mais de uma cor de sinalização

Conhecido por: Teenage Engineering, laptop Framework, Rivian (parcial), Leica, Field Notes

Semente 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

Construa o site em estilo engenharia blueprint. Fundo #0b2a4a com uma grade de dois níveis: linhas repeating-linear-gradient a cada 8px em rgba(219,231,243,0.06) e a cada 80px em rgba(219,231,243,0.14), nos dois eixos. Texto #dbe7f3, atenuado #8a97a8, uma cor de sinalização #ff6a00. Fontes: Barlow Condensed 600 em caixa alta para títulos a 64/40/24px com tracking 0.02em, IBM Plex Sans 400 a 16px para o corpo, JetBrains Mono 12px em caixa alta 0.08em para labels, números de peça e cotas. Cards: sem preenchimento, só colchetes de canto (quatro traços de 1px em L com 16px) mais um label mono no canto superior esquerdo como "FIG. 02 / REV B". A imagem do hero é um SVG em wireframe ou vista explodida do produto com linhas de cota (linhas de 1px, tiques de 6px nas pontas, medidas em mono). Botões: contorno 1px #dbe7f3, texto mono em caixa alta, o hover preenche com #ff6a00 e texto #0b2a4a. Movimento: as linhas SVG se desenham via stroke-dashoffset ao longo de 900ms; os números contam ao longo de 600ms. Sem raio, sem sombras.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo engenharia blueprint. Fundo #0b2a4a com uma grade de dois níveis: linhas repeating-linear-gradient a cada 8px em rgba(219,231,243,0.06) e a cada 80px em rgba(219,231,243,0.14), nos dois eixos. Texto #dbe7f3, atenuado #8a97a8, uma cor de sinalização #ff6a00. Fontes: Barlow Condensed 600 em caixa alta para títulos a 64/40/24px com tracking 0.02em, IBM Plex Sans 400 a 16px para o corpo, JetBrains Mono 12px em caixa alta 0.08em para labels, números de peça e cotas. Cards: sem preenchimento, só colchetes de canto (quatro traços de 1px em L com 16px) mais um label mono no canto superior esquerdo como "FIG. 02 / REV B". A imagem do hero é um SVG em wireframe ou vista explodida do produto com linhas de cota (linhas de 1px, tiques de 6px nas pontas, medidas em mono). Botões: contorno 1px #dbe7f3, texto mono em caixa alta, o hover preenche com #ff6a00 e texto #0b2a4a. Movimento: as linhas SVG se desenham via stroke-dashoffset ao longo de 900ms; os números contam ao longo de 600ms. Sem raio, sem 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 }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.