Design for AIStil Cyberpunk / Neon: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für cyberpunk / neon. Auch bekannt als Cyberpunk-UI, Neon-UI, Synthwave, Glitch-Design, Night City. Blade-Runner-Optik 1982; Web-Wellen 2017 (Synthwave) und 2020 (Cyberpunk-2077-Marketing).
Merkmale
- fast schwarze Hintergründe mit gesättigtem Neon: Magenta, Cyan, Gelb, Acid Green
- Glow über geschichtete text-shadows und box-shadows im selben Neonton
- abgeschnittene Ecken (clip-path-Polygone), diagonale Schnitte, Warnstreifen
- Glitch-Effekte: RGB-Split, Skew-Jitter, Scanlines
- Monospace oder schmale Versalien mit weitem Tracking, überall Zahlencodes
- HUD-Elemente: Klammern, Fadenkreuze, Statusanzeigen
- schnelle, scharfe Motion mit gelegentlichem Flackern
Palette
#050507 Seite, #f0f0f0 Text, #ff2a6d Magenta, #05d9e8 Cyan, #f9f002 Gelb, #d1f7ff blasses Cyan als Glow-Ton
Schrift
Orbitron oder Rajdhani für Überschriften (700, Versalien, 0.1em Tracking), Share Tech Mono oder JetBrains Mono für Daten, Barlow Condensed für Fließtext; Überschriften 40-80px
Do
- beschränke Neon auf zwei Töne plus ein Warngelb; maximal drei Glows pro Screen
- baue den Glow aus 3 gestapelten Schatten (2px, 8px, 24px) in derselben Farbe mit fallendem Alpha
- schneide eine Ecke der Karten mit clip-path: polygon() ab für die Signaturform
Don't
- lass Fließtext nicht glühen; Glow ist nur für Überschriften, Ränder und Buttons
- lass Glitch-Animationen nicht dauerhaft laufen; bei Hover oder einmal beim Laden auslösen
- nutze keine runden Ecken; nur Winkel und Schnitte
Bekannt dafür: Cyberpunk 2077, Razer, Ghost-in-the-Shell-Tie-ins, Corsair iCUE
CSS-Seed
:root {
--bg: #050507;
--fg: #f0f0f0;
--accent: #ff2a6d;
--accent2: #05d9e8;
--warn: #f9f002;
--radius: 0;
--glow: 0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6);
--font: 'Orbitron',sans-serif
}
Prompt
Baue die Seite im Cyberpunk-Neon-Stil. Hintergrund #050507 mit einem schwachen 48px Raster (rgba(5,217,232,0.06) Linien). Text #f0f0f0, Neon-Magenta #ff2a6d, Neon-Cyan #05d9e8, Warngelb #f9f002. Schriften: Orbitron 700 Versalien mit 0.1em Tracking für Überschriften bei 64/40/24px, Barlow Condensed 400 bei 18px für Fließtext, Share Tech Mono 13px für Codes, Zeitstempel und Labels. Karten: background #0b0b12, 1px Rand #05d9e8, eine Ecke abgeschnitten mit clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Primärbutton #ff2a6d mit demselben Glow-Rezept in Magenta und einem diagonalen gelb-schwarzen Warnstreifen an der linken Kante. Überschriften bekommen text-shadow 0 0 8px currentColor. Der Hero-Titel läuft beim Laden einmalig 600ms als Glitch (skewX-Jitter und 2px RGB-Split über Pseudo-Elemente) und wiederholt ihn bei Hover. Nirgends border-radius. Motion schnell: 120ms Transitions.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Cyberpunk-Neon-Stil. Hintergrund #050507 mit einem schwachen 48px Raster (rgba(5,217,232,0.06) Linien). Text #f0f0f0, Neon-Magenta #ff2a6d, Neon-Cyan #05d9e8, Warngelb #f9f002. Schriften: Orbitron 700 Versalien mit 0.1em Tracking für Überschriften bei 64/40/24px, Barlow Condensed 400 bei 18px für Fließtext, Share Tech Mono 13px für Codes, Zeitstempel und Labels. Karten: background #0b0b12, 1px Rand #05d9e8, eine Ecke abgeschnitten mit clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Primärbutton #ff2a6d mit demselben Glow-Rezept in Magenta und einem diagonalen gelb-schwarzen Warnstreifen an der linken Kante. Überschriften bekommen text-shadow 0 0 8px currentColor. Der Hero-Titel läuft beim Laden einmalig 600ms als Glitch (skewX-Jitter und 2px RGB-Split über Pseudo-Elemente) und wiederholt ihn bei Hover. Nirgends border-radius. Motion schnell: 120ms Transitions.
## Tokens
:root { --bg:#050507; --fg:#f0f0f0; --accent:#ff2a6d; --accent2:#05d9e8; --warn:#f9f002; --radius:0; --glow:0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6); --font:'Orbitron',sans-serif }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.