Design for AIStil Retro-Pixel / 8-Bit: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für retro-pixel / 8-bit. Auch bekannt als Pixel-Art-UI, 8-Bit-Design, NES-Stil, 16-Bit, Retro-Game-UI. Konsolen 1983-1995; Web-Revival ab 2014 (NES.css 2018).
Merkmale
- Pixelschriften und pixelkantiges UI: Buttons mit gestuften Ecken, per box-shadow gezeichnet
- begrenzte Paletten (NES 54 Farben, Game Boy 4 Grüntöne, PICO-8 16 Farben)
- image-rendering: pixelated auf allen Sprites; alles in ganzzahligen Vielfachen skaliert (2x, 3x, 4x)
- Dialogboxen mit dicken Rändern, blinkende Pfeile, "PRESS START"
- klobige Fortschrittsbalken, Herzen und Münzen als UI-Metaphern
- Motion in steps(), nie geeased; Sprite-Sheet-Animation
- Soundeffekt-Gefühl in Hover-Zuständen (1 Frame Bounce)
Palette
#212529 Seite (oder #0f380f Game Boy), #f8f8f8 Text, #e76e55 Rot, #92cc41 Grün, #209cee Blau, #f7d51d Gelb
Schrift
Press Start 2P (sehr laut, 8-12px), Silkscreen, VT323 (lesbar, 18-22px), Pixelify Sans für Überschriften; immer ganzzahlige Größen, die zum Pixelraster passen
Do
- snappe alles auf ein 8px-Raster und skaliere Sprites ganzzahlig mit image-rendering: pixelated
- zeichne Ränder und Ecken mit box-shadow-Stapeln oder border-image, nicht mit border-radius
- wähle eine echte Konsolenpalette und bleib darin
Don't
- kein Anti-Aliasing: kein Blur, keine weichen Schatten, keine geeasten Transitions
- setze Fließtext nicht über ein paar Zeilen hinaus in Press Start 2P; nutze VT323 oder Silkscreen zum Lesen
- misch keine Pixelskalen (ein 2x-Sprite neben einem 3x-Sprite sieht falsch aus)
Bekannt dafür: NES.css, Seiten von Celeste und Shovel Knight, Nintendo-Jubiläumsseiten, itch.io-Spieleseiten
CSS-Seed
:root {
--bg: #212529;
--fg: #f8f8f8;
--accent: #e76e55;
--accent2: #92cc41;
--accent3: #209cee;
--radius: 0;
--border: 4px solid #f8f8f8;
--font: 'Press Start 2P',monospace
}
Prompt
Baue die Seite im 8-Bit-Pixelstil. Hintergrund #212529, Text #f8f8f8, Akzente nur #e76e55, #92cc41, #209cee, #f7d51d. Schriften: Press Start 2P für Überschriften und Buttons bei 24/16/12px, VT323 bei 22px für Fließtext (line-height 1.3). Alle Größen und Abstände auf einem 8px-Raster. Buttons und Karten: kein border-radius; zeichne einen 4px Pixelrand mit box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8), damit die Ecken ausgekerbt bleiben. Dialogbox-Hero mit blinkendem Pfeil nach unten (steps(2) 1s infinite) und einem "PRESS START"-Call-to-Action. Fortschrittsbalken als segmentierte 8px-Blöcke. Jedes Bild bekommt image-rendering: pixelated und wird 3x aus einer kleinen Quelle skaliert. Hover: Element springt ohne Transition 4px nach oben; aktiv: 4px nach unten. Icons sind 16x16 Pixel-SVGs. Keine Verläufe, kein Blur, nirgends Easing.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im 8-Bit-Pixelstil. Hintergrund #212529, Text #f8f8f8, Akzente nur #e76e55, #92cc41, #209cee, #f7d51d. Schriften: Press Start 2P für Überschriften und Buttons bei 24/16/12px, VT323 bei 22px für Fließtext (line-height 1.3). Alle Größen und Abstände auf einem 8px-Raster. Buttons und Karten: kein border-radius; zeichne einen 4px Pixelrand mit box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8), damit die Ecken ausgekerbt bleiben. Dialogbox-Hero mit blinkendem Pfeil nach unten (steps(2) 1s infinite) und einem "PRESS START"-Call-to-Action. Fortschrittsbalken als segmentierte 8px-Blöcke. Jedes Bild bekommt image-rendering: pixelated und wird 3x aus einer kleinen Quelle skaliert. Hover: Element springt ohne Transition 4px nach oben; aktiv: 4px nach unten. Icons sind 16x16 Pixel-SVGs. Keine Verläufe, kein Blur, nirgends Easing.
## Tokens
:root { --bg:#212529; --fg:#f8f8f8; --accent:#e76e55; --accent2:#92cc41; --accent3:#209cee; --radius:0; --border:4px solid #f8f8f8; --font:'Press Start 2P',monospace }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.