Design for AI

Stil Industrial / Blaupause / Engineering: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für industrial / blaupause / engineering. Auch bekannt als Blaupausen-Design, Engineering-UI, technischer Zeichnungsstil, CAD-Ästhetik, Schaltplan-Web. Blaupausen der 1840er; Web-Nutzung ab 2016 (Hardware-Startups, Robotik, Developer-Tools).

Merkmale

  • Blaupausenblau oder Millimeterpapierweiß mit feinem Raster und Maßlinien
  • Monospace-Labels mit Maßen, Teilenummern, Revisionstags, Toleranzen
  • dünne 1px Linien, Fadenkreuze, Eckmarken, Passermarken
  • Explosions- oder Wireframe-Illustrationen von Produkten
  • kleine Versalien mit weitem Tracking; Titel in einer schmalen Grotesk
  • eine Signalfarbe (Sicherheitsorange oder Warngelb) für das aktive Element
  • Motion: Linien zeichnen sich, Werte zählen hoch, Fadenkreuz folgt dem Cursor

Palette

#0b2a4a Blaupausenblau (oder #f7f7f4 Papier), #dbe7f3 Linie auf Blau, #1c1c1c Tinte auf Papier, #ff6a00 Sicherheitsorange, #ffd400 Warngelb, #8a97a8 gedämpft

Schrift

JetBrains Mono, IBM Plex Mono oder Space Mono für Labels (11-13px Versalien 0.08em); Barlow Condensed, Archivo Narrow oder Oswald für Überschriften (600 bei 40-72px); IBM Plex Sans für Fließtext 16px

Do

  • zeichne das Raster mit zwei geschichteten repeating-linear-gradients (8px fein bei 5 % Alpha, 80px grob bei 12 %)
  • annotiere echte Elemente mit Maßlinien und Labels (SVG-Linien mit Endstrichen, Mono-Text)
  • nutze Eckklammern auf Karten statt voller Ränder

Don't

  • füge keine Schatten, Verläufe oder Radien hinzu; Zeichnungen sind flach
  • nutze keine dekorativen Fake-Daten; jede Zahl sollte echt oder klar als Platzhalter erkennbar sein
  • nutze nicht mehr als eine Signalfarbe

Bekannt dafür: Teenage Engineering, Framework-Laptop, Rivian (teilweise), Leica, Field Notes

CSS-Seed
: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

Baue die Seite im Blaupausen-Engineering-Stil. Hintergrund #0b2a4a mit einem zweistufigen Raster: repeating-linear-gradient-Linien alle 8px bei rgba(219,231,243,0.06) und alle 80px bei rgba(219,231,243,0.14), beide Achsen. Text #dbe7f3, gedämpft #8a97a8, eine Signalfarbe #ff6a00. Schriften: Barlow Condensed 600 Versalien für Überschriften bei 64/40/24px mit 0.02em Tracking, IBM Plex Sans 400 bei 16px für Fließtext, JetBrains Mono 12px Versalien 0.08em für Labels, Teilenummern und Maße. Karten: keine Füllung, nur Eckklammern (vier 16px L-förmige 1px Striche) plus ein Mono-Label oben links wie "FIG. 02 / REV B". Das Hero-Bild ist ein Wireframe- oder Explosions-SVG des Produkts mit Maßlinien (1px Linien, 6px Endstriche, Mono-Maße). Buttons: 1px #dbe7f3 Outline, Versalien-Mono-Text, Hover füllt #ff6a00 mit #0b2a4a Text. Motion: SVG-Linien zeichnen sich über 900ms per stroke-dashoffset; Zahlen zählen über 600ms hoch. Kein Radius, keine Schatten.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Blaupausen-Engineering-Stil. Hintergrund #0b2a4a mit einem zweistufigen Raster: repeating-linear-gradient-Linien alle 8px bei rgba(219,231,243,0.06) und alle 80px bei rgba(219,231,243,0.14), beide Achsen. Text #dbe7f3, gedämpft #8a97a8, eine Signalfarbe #ff6a00. Schriften: Barlow Condensed 600 Versalien für Überschriften bei 64/40/24px mit 0.02em Tracking, IBM Plex Sans 400 bei 16px für Fließtext, JetBrains Mono 12px Versalien 0.08em für Labels, Teilenummern und Maße. Karten: keine Füllung, nur Eckklammern (vier 16px L-förmige 1px Striche) plus ein Mono-Label oben links wie "FIG. 02 / REV B". Das Hero-Bild ist ein Wireframe- oder Explosions-SVG des Produkts mit Maßlinien (1px Linien, 6px Endstriche, Mono-Maße). Buttons: 1px #dbe7f3 Outline, Versalien-Mono-Text, Hover füllt #ff6a00 mit #0b2a4a Text. Motion: SVG-Linien zeichnen sich über 900ms per stroke-dashoffset; Zahlen zählen über 600ms hoch. Kein Radius, keine Schatten.

## 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 }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.