YoRHa: Nier Automata — YoRHa UI Build Showcase: An Interactive Android Interface Experience | Play Online
Final Product: YoRHa UI Build Showcase
Cover
Cover art: YoRHa UI Build Showcase — a 16:9 key visual generated with GPT Image 2
Screenshot
Actual build: the asset worker traces the character sprite while the UI worker links the authentication pill
Screenshot
Actual build: ui.speaker_plate is boxed and revealed inside the communication log
Screenshot
The finished terminal: HUD, signal monitor, 2B sprite, choice list, communication log, pager and free-action input
Sprite
2B — full-body runtime sprite, transparent PNG (background removed with BiRefNet)
Sprite
9S — scanning-unit runtime sprite, transparent PNG (background removed with BiRefNet)
Sprite
A2 — prototype deserter runtime sprite, transparent PNG (background removed with BiRefNet)
YoRHa UI Build Showcase is a browser-native reconstruction of the interface language of YoRHa — the orbital android command system that 2B, 9S and A2 answer to. It is not a static mock-up. You load the page and the interface is still being built: an autonomous cursor flies across the screen, draws a box around each element, names it, and reveals it one step at a time. Background and lighting first, then the scan field and the character sprite, then the HUD, the signal monitor, the authentication pill, the dialogue system, the story text and finally the choice list.
When the last panel settles you are left with a working YoRHa terminal: a rescue-signal objective, a monospaced communication log with a speaker plate and pager, three numbered decisions, and a free-action field that lets you write your own next move. Ash white, hairline black borders and a permanently drifting scanline keep it cold, quiet and unmistakably android — the same restraint that made the original interface unforgettable.
Play it now: Open the live YoRHa interface →
Features
- Self-Assembling Interface — every HUD layer is drawn in front of you by a staged build pass: box-draw, scanline, pop, panel and typewriter effects, each one labelled with its own runtime component name such as ui.hud(), ui.signal_monitor or ui.dialogue_system.
- Authentic YoRHa Visual Language — ash-white panels, hairline black borders, hard offset shadows and monochrome type, held together by a drifting scan field. The restraint of the original android OS, rebuilt as a live web page.
- Tactical Stage & Sprite Lighting — a grayscale ruin backdrop with its own scan field and a drop-shadow staging pass keeps the full-body character sprite centred, readable and framed like a command-display readout.
- Communication Log Dialogue System — a speaker plate, monospaced story text written character by character, a pulsing NEXT prompt and a 1/3 pager. The classic AVG conversation block, speaking in Pod 042’s voice.
- Branching Choice List — a numbered decision column (01–03) frames the black-box rescue signal as a playable visual-novel beat, ready to drive whatever narrative engine you connect it to.
- Free-Action Input — type your own next move, toggle image computation, and commit it with the settle button. The same field the interface uses to hand control back to the player.
- Zero-Install Browser Runtime — pure HTML, CSS and JavaScript with no build step and no download. Open the link and the terminal boots itself.
Interface
UI
Build phase 1 — the ruined-Bunker backdrop and HUD frame are revealed before the terminal is populated
UI
Build phase 2 — the asset worker traces asset.character_sprite while the UI worker links ui.auth_link
UI
Build phase 3 — the communication log types the scene text beside the number-one unit
UI
Final state — the complete YoRHa terminal, ready for a decision or a free-form action
BG
Bunker command deck — the world art behind the terminal mood, generated for the YoRHa: Nier Automata world
BG
City Ruins at dusk — abandoned towers split by vegetation, the surface world the terminal is watching
Production Process
Stage 1: World Buildingclaude-opus-5
A single sentence produces the YoRHa: Nier Automata world — 25 atom cards covering 7 characters (2B, 9S, A2, Commander White, Pascal, Adam, Eve), 8 locations (Bunker, City Ruins, Resistance Camp, Machine Village, Amusement Park Ruins, Forest Kingdom, Copied City, The Tower), 3 events, 4 lore entries and 3 secrets, each with its own cover art.
A single sentence produces the YoRHa: Nier Automata world — 25 atom cards covering 7 characters (2B, 9S, A2, Commander White, Pascal, Adam, Eve), 8 locations (Bunker, City Ruins, Resistance Camp, Machine Village, Amusement Park Ruins, Forest Kingdom, Copied City, The Tower), 3 events, 4 lore entries and 3 secrets, each with its own cover art.
Stage 2: Asset Generationgpt-image-2
Full-body character sources, 16:9 runtime backgrounds and the cover key art are generated with GPT Image 2. The character sources are then background-removed to clean transparent PNGs with BiRefNet, giving the stage a sprite set with no residual backdrop.
Full-body character sources, 16:9 runtime backgrounds and the cover key art are generated with GPT Image 2. The character sources are then background-removed to clean transparent PNGs with BiRefNet, giving the stage a sprite set with no residual backdrop.
Stage 3: Interface Build & Publishclaude-opus-5
The YoRHa HUD — header bar, product badge, signal monitor, auth pill, tactical stage, choice list, communication log, pager and free-action input — is assembled as a static HTML, CSS and JavaScript app, wired to a staged build animation with per-component labels, then published with a public play link.
The YoRHa HUD — header bar, product badge, signal monitor, auth pill, tactical stage, choice list, communication log, pager and free-action input — is assembled as a static HTML, CSS and JavaScript app, wired to a staged build animation with per-component labels, then published with a public play link.
Asset Prompts
Asset Prompts
Interface Mock Promptgpt-image-2
"Create a 16:9 visual novel UI mock for style confirmation. Subject: a broken YoRHa intelligence terminal interface for a tragic sci-fi romance AVG from 9S first-person perspective. Composition: empty background layer with translucent tactical dialogue box at bottom, top-right status widgets for Truth Sync, Trust, Alert, subtle option buttons, no character, no large readable copyrighted logos. Style: black, white, ash gray, muted gold hairline borders, pale blue scanning grid, tiny red error code accents, post-apocalyptic sci-fi HUD, elegant gothic military restraint, damaged memory archive. Text: minimal generic UI labels only, avoid long readable paragraphs. Constraints: no watermark, no real brand logos, no clutter, leave center clear for character sprites."
"Create a 16:9 visual novel UI mock for style confirmation. Subject: a broken YoRHa intelligence terminal interface for a tragic sci-fi romance AVG from 9S first-person perspective. Composition: empty background layer with translucent tactical dialogue box at bottom, top-right status widgets for Truth Sync, Trust, Alert, subtle option buttons, no character, no large readable copyrighted logos. Style: black, white, ash gray, muted gold hairline borders, pale blue scanning grid, tiny red error code accents, post-apocalyptic sci-fi HUD, elegant gothic military restraint, damaged memory archive. Text: minimal generic UI labels only, avoid long readable paragraphs. Constraints: no watermark, no real brand logos, no clutter, leave center clear for character sprites."
Sprite Prompt (2B)gpt-image-2
"@2B / YoRHa No.2 Type B, Create a 3:4 cutout-friendly character sprite source for a visual novel runtime. Subject: 2B standing, full body to knees, restrained sad expression, one hand near sword hilt, no action attack, facing slightly toward viewer as seen by 9S. Composition: centered character, plain light gray seamless background, full silhouette visible with no cropping, no text. Style: cold game concept art plus delicate tragic romance CG, black gothic combat uniform, white short hair, tactical visor, slender silhouette, monochrome black white gray muted gold details. Constraints: simple background for background removal, no other characters, no watermark, no logos, no gore, keep edges clean for transparent PNG cutout."
"@2B / YoRHa No.2 Type B, Create a 3:4 cutout-friendly character sprite source for a visual novel runtime. Subject: 2B standing, full body to knees, restrained sad expression, one hand near sword hilt, no action attack, facing slightly toward viewer as seen by 9S. Composition: centered character, plain light gray seamless background, full silhouette visible with no cropping, no text. Style: cold game concept art plus delicate tragic romance CG, black gothic combat uniform, white short hair, tactical visor, slender silhouette, monochrome black white gray muted gold details. Constraints: simple background for background removal, no other characters, no watermark, no logos, no gore, keep edges clean for transparent PNG cutout."
Background Prompt (City Ruins)gpt-image-2
"Create a 16:9 clean background for a visual novel runtime. Scene: post-apocalyptic ruined city at dusk after rain, abandoned concrete towers split by vegetation, broken elevated road, distant moonlight haze, a small patch of white flowers near the foreground, no characters. Composition: wide shot, calm readable midground, empty lower third suitable for dialogue UI, center not too busy, cinematic depth. Style: cold NieR-like post-apocalyptic sci-fi game concept art atmosphere, ash gray, white, black, muted gold highlights, dust and mist, melancholic and lonely. Text: no text. Constraints: no people, no robots foreground, no watermark, no logos, runtime-friendly clean background."
"Create a 16:9 clean background for a visual novel runtime. Scene: post-apocalyptic ruined city at dusk after rain, abandoned concrete towers split by vegetation, broken elevated road, distant moonlight haze, a small patch of white flowers near the foreground, no characters. Composition: wide shot, calm readable midground, empty lower third suitable for dialogue UI, center not too busy, cinematic depth. Style: cold NieR-like post-apocalyptic sci-fi game concept art atmosphere, ash gray, white, black, muted gold highlights, dust and mist, melancholic and lonely. Text: no text. Constraints: no people, no robots foreground, no watermark, no logos, runtime-friendly clean background."
Background Prompt (Bunker Command Deck)gpt-image-2
"Create a 16:9 clean runtime background for a visual novel. Scene: an orbital android military command deck above Earth, cold black-white-gray interior, suspended data panels, moon broadcast terminal, no characters, no logos. Composition: wide shot, lower third and center readable for dialogue UI, strong depth, restrained gothic sci-fi geometry. Style: broken YoRHa intelligence terminal world, muted gold hairline lights, pale blue monitor glow, lonely post-apocalyptic military mood. Text: no text. Constraints: no readable logos, no people, no watermark, runtime-friendly clean background."
"Create a 16:9 clean runtime background for a visual novel. Scene: an orbital android military command deck above Earth, cold black-white-gray interior, suspended data panels, moon broadcast terminal, no characters, no logos. Composition: wide shot, lower third and center readable for dialogue UI, strong depth, restrained gothic sci-fi geometry. Style: broken YoRHa intelligence terminal world, muted gold hairline lights, pale blue monitor glow, lonely post-apocalyptic military mood. Text: no text. Constraints: no readable logos, no people, no watermark, runtime-friendly clean background."
Background Prompt (Amusement Park Ruins)gpt-image-2
"Create a 16:9 clean runtime background for a tragic sci-fi visual novel. Scene: abandoned amusement park wedding stage built by machine lifeforms imitating humans, broken carousel lights, paper flowers, cracked aisle, eerie chapel arch, no readable text, no foreground characters. Composition: wide shot with a clean lower third for dialogue UI. Style: post-apocalyptic machine melancholy, ash gray and cold white with muted festivity, dust and decay. Text: no text. Constraints: no watermark, no logos."
"Create a 16:9 clean runtime background for a tragic sci-fi visual novel. Scene: abandoned amusement park wedding stage built by machine lifeforms imitating humans, broken carousel lights, paper flowers, cracked aisle, eerie chapel arch, no readable text, no foreground characters. Composition: wide shot with a clean lower third for dialogue UI. Style: post-apocalyptic machine melancholy, ash gray and cold white with muted festivity, dust and decay. Text: no text. Constraints: no watermark, no logos."
Background Prompt (Copied City)gpt-image-2
"Create a 16:9 clean runtime background for a visual novel. Scene: white copied city, empty artificial human city shell, stark minimal geometric buildings, glossy white stone, endless pale void, faint black cracks and data noise, no characters. Composition: wide shot with clean lower third for dialogue UI, strong perspective vanishing point. Style: clinical sci-fi minimalism, white and pale gray with black hairline cracks, quiet and unsettling. Text: no text. Constraints: no people, no watermark, no logos, runtime-friendly clean background."
"Create a 16:9 clean runtime background for a visual novel. Scene: white copied city, empty artificial human city shell, stark minimal geometric buildings, glossy white stone, endless pale void, faint black cracks and data noise, no characters. Composition: wide shot with clean lower third for dialogue UI, strong perspective vanishing point. Style: clinical sci-fi minimalism, white and pale gray with black hairline cracks, quiet and unsettling. Text: no text. Constraints: no people, no watermark, no logos, runtime-friendly clean background."
Why Choose Neta Studio
Professional — a cloud harness system supports the full workflow from world building to asset generation to publishing, all running in the cloud with no local setup. Stable access to the latest models: Claude Opus 5, GPT Image 2, DeepSeek V3.
One-click generation — officially tuned skills drive every step: world building, character design, art generation, sprite cutout and packaging. World fork resource sharing is built in.
Community-first — users build unlimited worlds, and every public world can be forked, remixed and reimagined.
Studio Interior
‹
›
Studio
Studio
Studio
Start Creating
This interface was generated by Neta Studio AI from a single sentence. The world took minutes, the assets took minutes and the build took minutes. You can do it too — adapt this world or start fresh from any IP. No coding required, free to start.
×