Design for AI

Stil Sci-Fi-HUD: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für sci-fi-hud. Auch bekannt als HUD-UI, FUI (fiktives UI), Head-up-Display, Raumschiff-Interface, Iron-Man-UI, holografisches UI. 2008 (Iron Man), 2013 (Oblivion), anhaltend für Games, Verteidigung, Drohnen, Raumfahrt-Startups.

Merkmale

  • dünne cyan- oder amberfarbene Linien auf Schwarz, mit Klammern, Fadenkreuzen, Bögen und Skalenstrichen
  • überall Daten: Anzeigen, Koordinaten, Prozentwerte, scrollende Logs
  • runde Messinstrumente und radialer Fortschritt; segmentierte Balken
  • geschichtete Panels mit abgeschnittenen Ecken und halbtransparenten Füllungen (5-10 %)
  • Monospace und schmale Schrift, Versalien, winzige Größen mit weitem Tracking
  • ständige dezente Motion: rotierende Ringe, blinkende Indikatoren, Scanlinien
  • Glow ist dünn und präzise, nicht neondick

Palette

#04070d Schwarz, #00e5ff Cyan, #ffb300 Amber (Alarm), #ff3d00 Rot (kritisch), #7fdbff blasser Cyan-Text, rgba(0,229,255,0.08) Panelfüllung

Schrift

Rajdhani, Orbitron, Michroma oder Exo 2 für Titel (500-600 Versalien 0.15em), Share Tech Mono oder JetBrains Mono für Anzeigen (11-13px); Fließtext minimal

Do

  • zeichne das Chrome als Inline-SVG (Klammern, Ringe, Skalen), damit es scharf skaliert und per Strich animiert
  • halte alle dekorative Motion unter 0.3 Opacity und langsam (Ringe 30-60s pro Umdrehung), damit sie nie mit dem Inhalt konkurriert
  • nutze Amber und Rot nur für echte Zustände (Warnung, Fehler), nie als Dekoration

Don't

  • setze keine echten Leseinhalte auf ein HUD; nutze es für Dashboards, Games, Demos und Landing-Heros
  • fülle den Screen nicht mit Fake-Zahlen; jede Anzeige sollte auf etwas verweisen
  • weiche es nicht mit runden Ecken auf; nur Winkel und Bögen

Bekannt dafür: Iron Man (Jarvis), Oblivion, Destiny-2-Menüs, SpaceX-Dragon-Display, Anduril

CSS-Seed
:root {
  --bg: #04070d;
   --fg: #7fdbff;
   --accent: #00e5ff;
   --warn: #ffb300;
   --alert: #ff3d00;
   --panel: rgba(0,229,255,0.08);
   --radius: 0;
   --font: 'Rajdhani',sans-serif;
   --font-mono: 'Share Tech Mono',monospace
}
Prompt

Baue die Seite als Sci-Fi-HUD. Hintergrund #04070d mit einer schwachen radialen Vignette. Text #7fdbff, primäre Linienfarbe #00e5ff, Amber #ffb300 nur für Warnungen, Rot #ff3d00 nur für Kritisches. Schriften: Rajdhani 600 Versalien mit 0.15em Tracking für Titel bei 40/24/16px, Share Tech Mono 12px für Anzeigen und Labels. Panels: background rgba(0,229,255,0.08), 1px Rand rgba(0,229,255,0.5), clip-path mit zwei abgeschnittenen Ecken (12px) und Inline-SVG-Eckklammern 20px lang, 1.5px Strich. Hero: ein großes rundes Messinstrument (SVG, 3 konzentrische Ringe mit Skalenstrichen alle 6deg, äußerer Ring rotiert 60s linear, innerer Ring gegenläufig 45s) mit einer zentralen Anzeige, die beim Laden hochzählt. Sidebar: ein scrollendes Log aus Mono-Zeilen, die alle 2s einblenden. Segmentierte Fortschrittsbalken (12 Segmente, 2px Lücken). Dünner Glow: drop-shadow(0 0 2px #00e5ff) nur auf Strichen. Eine 1px Scanlinie läuft alle 8s bei opacity 0.15 nach unten. Kein Radius. Unter prefers-reduced-motion alle Loops stoppen.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite als Sci-Fi-HUD. Hintergrund #04070d mit einer schwachen radialen Vignette. Text #7fdbff, primäre Linienfarbe #00e5ff, Amber #ffb300 nur für Warnungen, Rot #ff3d00 nur für Kritisches. Schriften: Rajdhani 600 Versalien mit 0.15em Tracking für Titel bei 40/24/16px, Share Tech Mono 12px für Anzeigen und Labels. Panels: background rgba(0,229,255,0.08), 1px Rand rgba(0,229,255,0.5), clip-path mit zwei abgeschnittenen Ecken (12px) und Inline-SVG-Eckklammern 20px lang, 1.5px Strich. Hero: ein großes rundes Messinstrument (SVG, 3 konzentrische Ringe mit Skalenstrichen alle 6deg, äußerer Ring rotiert 60s linear, innerer Ring gegenläufig 45s) mit einer zentralen Anzeige, die beim Laden hochzählt. Sidebar: ein scrollendes Log aus Mono-Zeilen, die alle 2s einblenden. Segmentierte Fortschrittsbalken (12 Segmente, 2px Lücken). Dünner Glow: drop-shadow(0 0 2px #00e5ff) nur auf Strichen. Eine 1px Scanlinie läuft alle 8s bei opacity 0.15 nach unten. Kein Radius. Unter prefers-reduced-motion alle Loops stoppen.

## Tokens
:root { --bg:#04070d; --fg:#7fdbff; --accent:#00e5ff; --warn:#ffb300; --alert:#ff3d00; --panel:rgba(0,229,255,0.08); --radius:0; --font:'Rajdhani',sans-serif; --font-mono:'Share Tech Mono',monospace }

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