YoRHa: Nier Automata — YoRHa UI Build Showcase: Ein interaktives Android-Oberflächenerlebnis | Jetzt online spielen
Endprodukt: YoRHa UI Build Showcase
Titelbild
Titelbild: YoRHa UI Build Showcase — ein 16:9-Key-Visual, erstellt mit GPT Image 2
Screenshot
Tatsächlicher Build: Der Asset-Worker zeichnet den Charakter-Sprite nach, während der UI-Worker die Authentifizierungs-Pille verbindet
Screenshot
Tatsächlicher Build: ui.speaker_plate wird im Kommunikationsprotokoll umrahmt und eingeblendet
Screenshot
Das fertige Terminal: HUD, Signalmonitor, 2B-Sprite, Auswahlliste, Kommunikationsprotokoll, Pager und Freie-Aktion-Eingabe
Sprite
2B — Ganzkörper-Runtime-Sprite, transparentes PNG (Hintergrund mit BiRefNet entfernt)
Sprite
9S — Runtime-Sprite der Scan-Einheit, transparentes PNG (Hintergrund mit BiRefNet entfernt)
Sprite
A2 — Runtime-Sprite der Prototyp-Deserteurin, transparentes PNG (Hintergrund mit BiRefNet entfernt)
YoRHa UI Build Showcase ist eine browser-native Rekonstruktion der Oberflächensprache von YoRHa — dem orbitalen Android-Kommandosystem, dem 2B, 9S und A2 unterstehen. Es ist kein statisches Mock-up. Du lädst die Seite und die Oberfläche wird noch aufgebaut: Ein autonomer Cursor fliegt über den Bildschirm, zieht einen Rahmen um jedes Element, benennt es und enthüllt es Schritt für Schritt. Zuerst Hintergrund und Beleuchtung, dann das Scanfeld und den Charakter-Sprite, dann das HUD, den Signalmonitor, die Authentifizierungs-Pille, das Dialogsystem, den Story-Text und schließlich die Auswahlliste.
Wenn das letzte Panel zur Ruhe kommt, bleibt ein funktionierendes YoRHa-Terminal zurück: ein Rettungssignal-Ziel, ein Monospace-Kommunikationsprotokoll mit Sprecherplatte und Pager, drei nummerierte Entscheidungen und ein Freie-Aktion-Feld, in das du deinen eigenen nächsten Zug schreiben kannst. Aschweiß, hauchdünne schwarze Rahmen und eine permanent driftende Scanline halten alles kalt, ruhig und unverkennbar android — dieselbe Zurückhaltung, die die ursprüngliche Oberfläche unvergesslich machte.
Jetzt spielen: Die live YoRHa-Oberfläche öffnen →
Funktionen
- Selbstmontierende Oberfläche — jede HUD-Ebene wird in einem inszenierten Build-Durchgang vor dir gezeichnet: Box-Draw-, Scanline-, Pop-, Panel- und Schreibmaschinen-Effekte, jeder mit seinem eigenen Runtime-Komponentennamen versehen, etwa ui.hud(), ui.signal_monitor oder ui.dialogue_system.
- Authentische YoRHa-Bildsprache — aschweiße Panels, hauchdünne schwarze Rahmen, harte Offset-Schatten und monochrome Typografie, zusammengehalten von einem driftenden Scanfeld. Die Zurückhaltung des ursprünglichen Android-Betriebssystems, neu aufgebaut als lebendige Webseite.
- Taktische Bühne & Sprite-Beleuchtung — eine Graustufen-Ruinenkulisse mit eigenem Scanfeld und einem Drop-Shadow-Staging-Durchgang hält den Ganzkörper-Charakter-Sprite zentriert, lesbar und wie eine Kommandoanzeige gerahmt.
- Kommunikationsprotokoll-Dialogsystem — eine Sprecherplatte, in Monospace Zeichen für Zeichen geschriebener Story-Text, eine pulsierende NEXT-Aufforderung und ein 1/3-Pager. Der klassische AVG-Gesprächsblock, der mit der Stimme von Pod 042 spricht.
- Verzweigende Auswahlliste — eine nummerierte Entscheidungsspalte (01–03) rahmt das Blackbox-Rettungssignal als spielbaren Visual-Novel-Moment und ist bereit, jede narrative Engine anzusteuern, die du anschließt.
- Freie-Aktion-Eingabe — tippe deinen eigenen nächsten Zug ein, schalte die Bildberechnung um und bestätige ihn mit dem Bestätigen-Button. Dasselbe Feld, mit dem die Oberfläche die Kontrolle an den Spieler zurückgibt.
- Browser-Runtime ohne Installation — reines HTML, CSS und JavaScript ohne Build-Schritt und ohne Download. Öffne den Link und das Terminal startet sich selbst.
Oberfläche
UI
Build-Phase 1 — die Ruinen-Bunker-Kulisse und der HUD-Rahmen werden enthüllt, bevor das Terminal gefüllt wird
UI
Build-Phase 2 — der Asset-Worker zeichnet asset.character_sprite nach, während der UI-Worker ui.auth_link verknüpft
UI
Build-Phase 3 — das Kommunikationsprotokoll tippt den Szenentext neben die Nummer-eins-Einheit
UI
Finaler Zustand — das vollständige YoRHa-Terminal, bereit für eine Entscheidung oder eine freie Aktion
BG
Bunker-Kommandodeck — die Welt-Kunst hinter der Terminal-Stimmung, erstellt für die Welt YoRHa: Nier Automata
BG
Stadtruinen in der Dämmerung — verlassene, von Vegetation durchzogene Türme, die Oberflächenwelt, die das Terminal beobachtet
Produktionsprozess
Phase 1: Weltaufbauclaude-opus-5
Ein einziger Satz erzeugt die Welt YoRHa: Nier Automata — 25 Atomkarten zu 7 Charakteren (2B, 9S, A2, Commander White, Pascal, Adam, Eve), 8 Schauplätzen (Bunker, Stadtruinen, Widerstandslager, Maschinendorf, Ruinen des Vergnügungsparks, Waldkönigreich, Kopierte Stadt, Der Turm), 3 Ereignissen, 4 Lore-Einträgen und 3 Geheimnissen, jedes mit eigener Titelkunst.
Ein einziger Satz erzeugt die Welt YoRHa: Nier Automata — 25 Atomkarten zu 7 Charakteren (2B, 9S, A2, Commander White, Pascal, Adam, Eve), 8 Schauplätzen (Bunker, Stadtruinen, Widerstandslager, Maschinendorf, Ruinen des Vergnügungsparks, Waldkönigreich, Kopierte Stadt, Der Turm), 3 Ereignissen, 4 Lore-Einträgen und 3 Geheimnissen, jedes mit eigener Titelkunst.
Phase 2: Asset-Erzeugunggpt-image-2
Ganzkörper-Charakterquellen, 16:9-Runtime-Hintergründe und die Titel-Key-Art werden mit GPT Image 2 erzeugt. Anschließend wird bei den Charakterquellen der Hintergrund mit BiRefNet entfernt, sodass saubere transparente PNGs entstehen, was der Bühne ein Sprite-Set ohne Resthintergrund gibt.
Ganzkörper-Charakterquellen, 16:9-Runtime-Hintergründe und die Titel-Key-Art werden mit GPT Image 2 erzeugt. Anschließend wird bei den Charakterquellen der Hintergrund mit BiRefNet entfernt, sodass saubere transparente PNGs entstehen, was der Bühne ein Sprite-Set ohne Resthintergrund gibt.
Phase 3: Oberflächen-Build & Veröffentlichungclaude-opus-5
Das YoRHa-HUD — Kopfleiste, Produkt-Badge, Signalmonitor, Auth-Pille, taktische Bühne, Auswahlliste, Kommunikationsprotokoll, Pager und Freie-Aktion-Eingabe — wird als statische HTML-, CSS- und JavaScript-App zusammengesetzt, mit einer inszenierten Build-Animation samt Komponenten-Labels verdrahtet und dann mit einem öffentlichen Spiel-Link veröffentlicht.
Das YoRHa-HUD — Kopfleiste, Produkt-Badge, Signalmonitor, Auth-Pille, taktische Bühne, Auswahlliste, Kommunikationsprotokoll, Pager und Freie-Aktion-Eingabe — wird als statische HTML-, CSS- und JavaScript-App zusammengesetzt, mit einer inszenierten Build-Animation samt Komponenten-Labels verdrahtet und dann mit einem öffentlichen Spiel-Link veröffentlicht.
Asset-Prompts
Asset-Prompts
Interface-Mock-Promptgpt-image-2
"Erstelle ein 16:9-Visual-Novel-UI-Mock zur Stilbestätigung. Motiv: eine defekte YoRHa-Intelligenzterminal-Oberfläche für ein tragisches Sci-Fi-Romance-AVG aus der Ego-Perspektive von 9S. Komposition: leere Hintergrundebene mit durchscheinender taktischer Dialogbox unten, Status-Widgets oben rechts für Wahrheits-Sync, Vertrauen, Alarm, dezente Options-Buttons, kein Charakter, keine großen lesbaren urheberrechtlich geschützten Logos. Stil: Schwarz, Weiß, Aschgrau, gedämpfte goldene hauchdünne Rahmen, blassblaues Scan-Raster, winzige rote Fehlercode-Akzente, postapokalyptisches Sci-Fi-HUD, elegante gotische militärische Zurückhaltung, beschädigtes Erinnerungsarchiv. Text: nur minimale generische UI-Labels, lange lesbare Absätze vermeiden. Einschränkungen: kein Wasserzeichen, keine echten Markenlogos, kein Durcheinander, Mitte frei lassen für Charakter-Sprites."
"Erstelle ein 16:9-Visual-Novel-UI-Mock zur Stilbestätigung. Motiv: eine defekte YoRHa-Intelligenzterminal-Oberfläche für ein tragisches Sci-Fi-Romance-AVG aus der Ego-Perspektive von 9S. Komposition: leere Hintergrundebene mit durchscheinender taktischer Dialogbox unten, Status-Widgets oben rechts für Wahrheits-Sync, Vertrauen, Alarm, dezente Options-Buttons, kein Charakter, keine großen lesbaren urheberrechtlich geschützten Logos. Stil: Schwarz, Weiß, Aschgrau, gedämpfte goldene hauchdünne Rahmen, blassblaues Scan-Raster, winzige rote Fehlercode-Akzente, postapokalyptisches Sci-Fi-HUD, elegante gotische militärische Zurückhaltung, beschädigtes Erinnerungsarchiv. Text: nur minimale generische UI-Labels, lange lesbare Absätze vermeiden. Einschränkungen: kein Wasserzeichen, keine echten Markenlogos, kein Durcheinander, Mitte frei lassen für Charakter-Sprites."
Sprite-Prompt (2B)gpt-image-2
"@2B / YoRHa No.2 Type B, Erstelle eine 3:4-freistellungsfreundliche Charakter-Sprite-Quelle für eine Visual-Novel-Runtime. Motiv: 2B stehend, Ganzkörper bis zu den Knien, zurückhaltender trauriger Ausdruck, eine Hand nahe dem Schwertgriff, kein Angriff, leicht zum Betrachter gewandt, wie von 9S gesehen. Komposition: zentrierter Charakter, schlichter hellgrauer nahtloser Hintergrund, vollständige Silhouette sichtbar ohne Beschnitt, kein Text. Stil: kalte Spielkonzeptkunst plus zarte tragische Romance-CG, schwarze gotische Kampfuniform, kurzes weißes Haar, taktisches Visier, schlanke Silhouette, monochrome Schwarz-Weiß-Grau-Details mit gedämpftem Gold. Einschränkungen: einfacher Hintergrund für die Freistellung, keine anderen Charaktere, kein Wasserzeichen, keine Logos, kein Gore, saubere Kanten für transparenten PNG-Ausschnitt."
"@2B / YoRHa No.2 Type B, Erstelle eine 3:4-freistellungsfreundliche Charakter-Sprite-Quelle für eine Visual-Novel-Runtime. Motiv: 2B stehend, Ganzkörper bis zu den Knien, zurückhaltender trauriger Ausdruck, eine Hand nahe dem Schwertgriff, kein Angriff, leicht zum Betrachter gewandt, wie von 9S gesehen. Komposition: zentrierter Charakter, schlichter hellgrauer nahtloser Hintergrund, vollständige Silhouette sichtbar ohne Beschnitt, kein Text. Stil: kalte Spielkonzeptkunst plus zarte tragische Romance-CG, schwarze gotische Kampfuniform, kurzes weißes Haar, taktisches Visier, schlanke Silhouette, monochrome Schwarz-Weiß-Grau-Details mit gedämpftem Gold. Einschränkungen: einfacher Hintergrund für die Freistellung, keine anderen Charaktere, kein Wasserzeichen, keine Logos, kein Gore, saubere Kanten für transparenten PNG-Ausschnitt."
Hintergrund-Prompt (Stadtruinen)gpt-image-2
"Erstelle einen sauberen 16:9-Hintergrund für eine Visual-Novel-Runtime. Szene: postapokalyptische Ruinenstadt in der Dämmerung nach dem Regen, verlassene Betontürme, von Vegetation gespalten, gebrochene Hochstraße, ferner Mondlicht-Dunst, ein kleiner Fleck weißer Blumen im Vordergrund, keine Charaktere. Komposition: Weitwinkelaufnahme, ruhiger lesbarer Mittelgrund, leeres unteres Drittel geeignet für die Dialog-UI, Mitte nicht zu belebt, filmische Tiefe. Stil: kalte, an NieR erinnernde postapokalyptische Sci-Fi-Spielkonzeptkunst-Atmosphäre, Aschgrau, Weiß, Schwarz, gedämpfte goldene Akzente, Staub und Nebel, melancholisch und einsam. Text: kein Text. Einschränkungen: keine Menschen, keine Roboter im Vordergrund, kein Wasserzeichen, keine Logos, runtime-freundlicher sauberer Hintergrund."
"Erstelle einen sauberen 16:9-Hintergrund für eine Visual-Novel-Runtime. Szene: postapokalyptische Ruinenstadt in der Dämmerung nach dem Regen, verlassene Betontürme, von Vegetation gespalten, gebrochene Hochstraße, ferner Mondlicht-Dunst, ein kleiner Fleck weißer Blumen im Vordergrund, keine Charaktere. Komposition: Weitwinkelaufnahme, ruhiger lesbarer Mittelgrund, leeres unteres Drittel geeignet für die Dialog-UI, Mitte nicht zu belebt, filmische Tiefe. Stil: kalte, an NieR erinnernde postapokalyptische Sci-Fi-Spielkonzeptkunst-Atmosphäre, Aschgrau, Weiß, Schwarz, gedämpfte goldene Akzente, Staub und Nebel, melancholisch und einsam. Text: kein Text. Einschränkungen: keine Menschen, keine Roboter im Vordergrund, kein Wasserzeichen, keine Logos, runtime-freundlicher sauberer Hintergrund."
Hintergrund-Prompt (Bunker-Kommandodeck)gpt-image-2
"Erstelle einen sauberen 16:9-Runtime-Hintergrund für eine Visual Novel. Szene: ein orbitales militärisches Android-Kommandodeck über der Erde, kaltes Schwarz-Weiß-Grau-Interieur, schwebende Datenpanels, Mond-Übertragungsterminal, keine Charaktere, keine Logos. Komposition: Weitwinkelaufnahme, unteres Drittel und Mitte lesbar für die Dialog-UI, starke Tiefe, zurückhaltende gotische Sci-Fi-Geometrie. Stil: Welt des defekten YoRHa-Intelligenzterminals, gedämpfte goldene hauchdünne Lichter, blassblauer Monitor-Schein, einsame postapokalyptische Militärstimmung. Text: kein Text. Einschränkungen: keine lesbaren Logos, keine Menschen, kein Wasserzeichen, runtime-freundlicher sauberer Hintergrund."
"Erstelle einen sauberen 16:9-Runtime-Hintergrund für eine Visual Novel. Szene: ein orbitales militärisches Android-Kommandodeck über der Erde, kaltes Schwarz-Weiß-Grau-Interieur, schwebende Datenpanels, Mond-Übertragungsterminal, keine Charaktere, keine Logos. Komposition: Weitwinkelaufnahme, unteres Drittel und Mitte lesbar für die Dialog-UI, starke Tiefe, zurückhaltende gotische Sci-Fi-Geometrie. Stil: Welt des defekten YoRHa-Intelligenzterminals, gedämpfte goldene hauchdünne Lichter, blassblauer Monitor-Schein, einsame postapokalyptische Militärstimmung. Text: kein Text. Einschränkungen: keine lesbaren Logos, keine Menschen, kein Wasserzeichen, runtime-freundlicher sauberer Hintergrund."
Hintergrund-Prompt (Ruinen des Vergnügungsparks)gpt-image-2
"Erstelle einen sauberen 16:9-Runtime-Hintergrund für eine tragische Sci-Fi-Visual-Novel. Szene: verlassene Hochzeitsbühne in einem Vergnügungspark, erbaut von Maschinenlebewesen, die Menschen imitieren, defekte Karusselllichter, Papierblumen, rissiger Mittelgang, unheimlicher Kapellenbogen, kein lesbarer Text, keine Charaktere im Vordergrund. Komposition: Weitwinkelaufnahme mit sauberem unteren Drittel für die Dialog-UI. Stil: postapokalyptische Maschinen-Melancholie, Aschgrau und kaltes Weiß mit gedämpfter Festlichkeit, Staub und Verfall. Text: kein Text. Einschränkungen: kein Wasserzeichen, keine Logos."
"Erstelle einen sauberen 16:9-Runtime-Hintergrund für eine tragische Sci-Fi-Visual-Novel. Szene: verlassene Hochzeitsbühne in einem Vergnügungspark, erbaut von Maschinenlebewesen, die Menschen imitieren, defekte Karusselllichter, Papierblumen, rissiger Mittelgang, unheimlicher Kapellenbogen, kein lesbarer Text, keine Charaktere im Vordergrund. Komposition: Weitwinkelaufnahme mit sauberem unteren Drittel für die Dialog-UI. Stil: postapokalyptische Maschinen-Melancholie, Aschgrau und kaltes Weiß mit gedämpfter Festlichkeit, Staub und Verfall. Text: kein Text. Einschränkungen: kein Wasserzeichen, keine Logos."
Hintergrund-Prompt (Kopierte Stadt)gpt-image-2
"Erstelle einen sauberen 16:9-Runtime-Hintergrund für eine Visual Novel. Szene: weiße kopierte Stadt, leere künstliche Menschenstadt-Hülle, karge minimalistische geometrische Gebäude, glänzender weißer Stein, endlose blasse Leere, schwache schwarze Risse und Datenrauschen, keine Charaktere. Komposition: Weitwinkelaufnahme mit sauberem unteren Drittel für die Dialog-UI, starker perspektivischer Fluchtpunkt. Stil: klinischer Sci-Fi-Minimalismus, Weiß und blasses Grau mit schwarzen hauchdünnen Rissen, still und verstörend. Text: kein Text. Einschränkungen: keine Menschen, kein Wasserzeichen, keine Logos, runtime-freundlicher sauberer Hintergrund."
"Erstelle einen sauberen 16:9-Runtime-Hintergrund für eine Visual Novel. Szene: weiße kopierte Stadt, leere künstliche Menschenstadt-Hülle, karge minimalistische geometrische Gebäude, glänzender weißer Stein, endlose blasse Leere, schwache schwarze Risse und Datenrauschen, keine Charaktere. Komposition: Weitwinkelaufnahme mit sauberem unteren Drittel für die Dialog-UI, starker perspektivischer Fluchtpunkt. Stil: klinischer Sci-Fi-Minimalismus, Weiß und blasses Grau mit schwarzen hauchdünnen Rissen, still und verstörend. Text: kein Text. Einschränkungen: keine Menschen, kein Wasserzeichen, keine Logos, runtime-freundlicher sauberer Hintergrund."
Warum Neta Studio wählen
Professionell — ein Cloud-Harness-System unterstützt den kompletten Workflow vom Weltaufbau über die Asset-Erzeugung bis zur Veröffentlichung, alles läuft in der Cloud ohne lokale Einrichtung. Stabiler Zugang zu den neuesten Modellen: Claude Opus 5, GPT Image 2, DeepSeek V3.
Ein-Klick-Generierung — offiziell abgestimmte Skills steuern jeden Schritt: Weltaufbau, Charakterdesign, Kunstgenerierung, Sprite-Freistellung und Verpackung. Welt-Fork-Ressourcenteilung ist integriert.
Community-zuerst — Nutzer bauen unbegrenzt viele Welten, und jede öffentliche Welt kann geforkt, neu gemischt und neu gedacht werden.
Studio-Interieur
‹
›
Studio
Studio
Studio
Jetzt erstellen
Diese Oberfläche wurde von Neta Studio AI aus einem einzigen Satz erzeugt. Die Welt dauerte Minuten, die Assets dauerten Minuten und der Build dauerte Minuten. Du kannst das auch — passe diese Welt an oder starte neu mit jeder beliebigen IP. Kein Programmieren erforderlich, kostenlos starten.
×