Design for AIStil Terminal / Hacker: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für terminal / hacker. Auch bekannt als Hacker-Ästhetik, CLI-UI, Kommandozeilen-Website, Green Screen, TUI-Stil. Terminals der 1970er-80er; Web-Revival ab 2015 (Entwickler-Portfolios, Security-Tools).
Merkmale
- Monospace für alles, auch Überschriften
- schwarzer oder sehr dunkler Hintergrund mit Phosphorgrün oder Amber-Text
- Prompt-Zeichen ($, >, ~) als Listenmarker und Überschriften
- Box-Drawing-Zeichen, ASCII-Art-Logos, blinkender Blockcursor
- Tipp-Effekt im Hero, eine Zeile nach der anderen
- Ränder sind einzeilige ASCII-Linien oder 1px in der Textfarbe
- Tabellen in festen Spalten ausgerichtet wie Verzeichnislistings
Palette
#0c0c0c Seite, #33ff33 Primärgrün (oder #ffb000 Amber), #1f7a1f gedämpftes Grün, #c8c8c8 Sekundär, #ff5555 Fehlerrot, #ffff55 Warnung
Schrift
JetBrains Mono, IBM Plex Mono, Fira Code oder Commit Mono; eine Größe 14-16px, Überschriften in derselben Größe fett oder eingerahmt, line-height 1.5
Do
- nutze eine Schriftgröße und baue Hierarchie mit Prompts, Versalien und Box-Drawing-Linien
- ergänze ein Scanline-Overlay (repeating-linear-gradient, 2px, opacity 0.06) und einen leichten Text-Glow
- mach den Tipp-Effekt überspringbar und deaktiviere ihn unter prefers-reduced-motion
Don't
- misch keine Sans-Serif "für die Lesbarkeit" hinein; das bricht die Fiktion
- nutze keine runden Ecken, Verläufe oder Schatten
- mach daraus kein Fake-OS mit Fake-Fenstern; bleib in einem Terminal
Bekannt dafür: Hack The Box, Hackaday (teilweise), unzählige Entwickler-Portfolios, Marketingseiten von Warp und Ghostty
CSS-Seed
:root {
--bg: #0c0c0c;
--fg: #33ff33;
--dim: #1f7a1f;
--muted: #c8c8c8;
--alert: #ff5555;
--radius: 0;
--glow: 0 0 6px rgba(51,255,51,0.5);
--font: 'JetBrains Mono',monospace
}
Prompt
Baue die Seite als Terminal. Hintergrund #0c0c0c, Text #33ff33, gedämpfter Text #1f7a1f, Sekundär #c8c8c8, Fehler #ff5555. Schrift JetBrains Mono 15px überall, line-height 1.5; Überschriften in derselben Größe fett, mit "$ " vorangestellt oder in Box-Drawing-Zeichen eingerahmt (┌─┐ │ └─┘). Maximalbreite 88 Zeichen, Padding 24px, linksbündig. Die Nav ist eine einzelne Zeile aus Pfaden (~/home ~/work ~/about) mit dem aktiven in inverser Darstellung (background #33ff33, Text #0c0c0c). Hero: eine getippte Zeile mit blinkendem Blockcursor (steps()-Animation, 1s Blinken), 40ms pro Zeichen, per Klick überspringbar. Listen nutzen "> "-Marker; Daten in Spalten fester Breite. Links unterstrichen in #33ff33, Hover invertiert die Farben. Ergänze text-shadow 0 0 6px rgba(51,255,51,0.5) und ein 2px Scanline-Overlay bei opacity 0.06. Kein Radius, keine Verläufe, keine Bilder außer ASCII-Art. Unter prefers-reduced-motion allen Text sofort anzeigen.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite als Terminal. Hintergrund #0c0c0c, Text #33ff33, gedämpfter Text #1f7a1f, Sekundär #c8c8c8, Fehler #ff5555. Schrift JetBrains Mono 15px überall, line-height 1.5; Überschriften in derselben Größe fett, mit "$ " vorangestellt oder in Box-Drawing-Zeichen eingerahmt (┌─┐ │ └─┘). Maximalbreite 88 Zeichen, Padding 24px, linksbündig. Die Nav ist eine einzelne Zeile aus Pfaden (~/home ~/work ~/about) mit dem aktiven in inverser Darstellung (background #33ff33, Text #0c0c0c). Hero: eine getippte Zeile mit blinkendem Blockcursor (steps()-Animation, 1s Blinken), 40ms pro Zeichen, per Klick überspringbar. Listen nutzen "> "-Marker; Daten in Spalten fester Breite. Links unterstrichen in #33ff33, Hover invertiert die Farben. Ergänze text-shadow 0 0 6px rgba(51,255,51,0.5) und ein 2px Scanline-Overlay bei opacity 0.06. Kein Radius, keine Verläufe, keine Bilder außer ASCII-Art. Unter prefers-reduced-motion allen Text sofort anzeigen.
## Tokens
:root { --bg:#0c0c0c; --fg:#33ff33; --dim:#1f7a1f; --muted:#c8c8c8; --alert:#ff5555; --radius:0; --glow:0 0 6px rgba(51,255,51,0.5); --font:'JetBrains Mono',monospace }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.