YoRHa: Nier Automata — Vitrina de Construcción de UI YoRHa: Una Experiencia de Interfaz Android Interactiva | Juega en Línea
Producto Final: Vitrina de Construcción de UI YoRHa
Portada
Arte de portada: Vitrina de Construcción de UI YoRHa — un visual clave en 16:9 generado con GPT Image 2
Captura de pantalla
Construcción real: el trabajador de assets traza el sprite del personaje mientras el trabajador de UI enlaza la píldora de autenticación
Captura de pantalla
Construcción real: ui.speaker_plate se encuadra y se revela dentro del registro de comunicaciones
Captura de pantalla
El terminal terminado: HUD, monitor de señal, sprite de 2B, lista de opciones, registro de comunicaciones, buscapersonas y entrada de acción libre
Sprite
2B — sprite de cuerpo completo para tiempo de ejecución, PNG transparente (fondo eliminado con BiRefNet)
Sprite
9S — sprite de unidad de escaneo para tiempo de ejecución, PNG transparente (fondo eliminado con BiRefNet)
Sprite
A2 — sprite de desertora prototipo para tiempo de ejecución, PNG transparente (fondo eliminado con BiRefNet)
Vitrina de Construcción de UI YoRHa es una reconstrucción nativa del navegador del lenguaje de interfaz de YoRHa — el sistema de mando orbital de androides al que responden 2B, 9S y A2. No es una maqueta estática. Cargas la página y la interfaz todavía se está construyendo: un cursor autónomo vuela por la pantalla, dibuja un recuadro alrededor de cada elemento, lo nombra y lo revela paso a paso. Primero el fondo y la iluminación, luego el campo de escaneo y el sprite del personaje, después el HUD, el monitor de señal, la píldora de autenticación, el sistema de diálogo, el texto de la historia y por último la lista de opciones.
Cuando el último panel se asienta, te queda un terminal YoRHa funcional: un objetivo de señal de rescate, un registro de comunicaciones monoespaciado con una placa de hablante y un buscapersonas, tres decisiones numeradas y un campo de acción libre que te permite escribir tu propio siguiente movimiento. El blanco ceniza, los bordes negros finísimos y una línea de escaneo que se desplaza permanentemente lo mantienen frío, silencioso e inconfundiblemente android — la misma sobriedad que hizo inolvidable la interfaz original.
Júgalo ahora: Abrir la interfaz YoRHa en vivo →
Características
- Interfaz Autoensamblable — cada capa del HUD se dibuja frente a ti mediante una pasada de construcción por etapas: efectos de dibujo de recuadros, línea de escaneo, aparición, panel y máquina de escribir, cada uno etiquetado con su propio nombre de componente en tiempo de ejecución, como ui.hud(), ui.signal_monitor o ui.dialogue_system.
- Auténtico Lenguaje Visual YoRHa — paneles blanco ceniza, bordes negros finísimos, sombras de desplazamiento duras y tipografía monocromática, unidos por un campo de escaneo a la deriva. La sobriedad del sistema operativo android original, reconstruida como una página web en vivo.
- Escenario Táctico e Iluminación de Sprites — un fondo de ruinas en escala de grises con su propio campo de escaneo y una pasada de montaje con sombra proyectada mantiene el sprite de cuerpo completo del personaje centrado, legible y enmarcado como una lectura de pantalla de mando.
- Sistema de Diálogo con Registro de Comunicaciones — una placa de hablante, texto de la historia monoespaciado escrito carácter por carácter, un indicador NEXT palpitante y un buscapersonas 1/3. El clásico bloque de conversación AVG, hablando con la voz de Pod 042.
- Lista de Opciones Ramificada — una columna de decisiones numeradas (01–03) enmarca la señal de rescate de la caja negra como una secuencia jugable de novela visual, lista para impulsar cualquier motor narrativo al que la conectes.
- Entrada de Acción Libre — escribe tu propio siguiente movimiento, activa o desactiva el cálculo de imagen y confírmalo con el botón de asentar. El mismo campo que la interfaz usa para devolver el control al jugador.
- Ejecución en Navegador Sin Instalación — HTML, CSS y JavaScript puros, sin paso de compilación ni descarga. Abre el enlace y el terminal se inicia solo.
Interfaz
UI
Fase de construcción 1 — el fondo del Búnker en ruinas y el marco del HUD se revelan antes de poblar el terminal
UI
Fase de construcción 2 — el trabajador de assets traza asset.character_sprite mientras el trabajador de UI enlaza ui.auth_link
UI
Fase de construcción 3 — el registro de comunicaciones escribe el texto de la escena junto a la unidad número uno
UI
Estado final — el terminal YoRHa completo, listo para una decisión o una acción de forma libre
Fondo
Cubierta de mando del Búnker — el arte del mundo que respalda el ambiente del terminal, generado para el mundo YoRHa: Nier Automata
Fondo
Ruinas de la Ciudad al atardecer — torres abandonadas divididas por la vegetación, el mundo de la superficie que el terminal observa
Proceso de Producción
Etapa 1: Construcción del Mundoclaude-opus-5
Una sola frase produce el mundo YoRHa: Nier Automata — 25 tarjetas átomo que cubren 7 personajes (2B, 9S, A2, la Comandante White, Pascal, Adam, Eve), 8 ubicaciones (Búnker, Ruinas de la Ciudad, Campamento de la Resistencia, Aldea de las Máquinas, Ruinas del Parque de Atracciones, Reino del Bosque, Ciudad Copiada, La Torre), 3 eventos, 4 entradas de lore y 3 secretos, cada uno con su propio arte de portada.
Una sola frase produce el mundo YoRHa: Nier Automata — 25 tarjetas átomo que cubren 7 personajes (2B, 9S, A2, la Comandante White, Pascal, Adam, Eve), 8 ubicaciones (Búnker, Ruinas de la Ciudad, Campamento de la Resistencia, Aldea de las Máquinas, Ruinas del Parque de Atracciones, Reino del Bosque, Ciudad Copiada, La Torre), 3 eventos, 4 entradas de lore y 3 secretos, cada uno con su propio arte de portada.
Etapa 2: Generación de Assetsgpt-image-2
Las fuentes de personajes de cuerpo completo, los fondos en 16:9 para tiempo de ejecución y el arte clave de portada se generan con GPT Image 2. Después se elimina el fondo de las fuentes de personajes para obtener PNG transparentes limpios con BiRefNet, lo que da al escenario un conjunto de sprites sin fondo residual.
Las fuentes de personajes de cuerpo completo, los fondos en 16:9 para tiempo de ejecución y el arte clave de portada se generan con GPT Image 2. Después se elimina el fondo de las fuentes de personajes para obtener PNG transparentes limpios con BiRefNet, lo que da al escenario un conjunto de sprites sin fondo residual.
Etapa 3: Construcción y Publicación de la Interfazclaude-opus-5
El HUD de YoRHa — barra de encabezado, insignia de producto, monitor de señal, píldora de autenticación, escenario táctico, lista de opciones, registro de comunicaciones, buscapersonas y entrada de acción libre — se ensambla como una aplicación estática de HTML, CSS y JavaScript, se conecta a una animación de construcción por etapas con etiquetas por componente y luego se publica con un enlace público para jugar.
El HUD de YoRHa — barra de encabezado, insignia de producto, monitor de señal, píldora de autenticación, escenario táctico, lista de opciones, registro de comunicaciones, buscapersonas y entrada de acción libre — se ensambla como una aplicación estática de HTML, CSS y JavaScript, se conecta a una animación de construcción por etapas con etiquetas por componente y luego se publica con un enlace público para jugar.
Prompts de Assets
Prompts de Assets
Prompt de Maqueta de Interfazgpt-image-2
"Crea una maqueta de interfaz de novela visual en 16:9 para confirmar el estilo. Sujeto: una interfaz de terminal de inteligencia YoRHa averiada para una AVG de romance sci-fi trágico desde la perspectiva en primera persona de 9S. Composición: capa de fondo vacía con un cuadro de diálogo táctico translúcido en la parte inferior, widgets de estado en la esquina superior derecha para Sincronización de Verdad, Confianza y Alerta, botones de opciones sutiles, sin personajes, sin logotipos con derechos de autor grandes y legibles. Estilo: negro, blanco, gris ceniza, bordes finísimos en dorado apagado, cuadrícula de escaneo azul pálido, pequeños acentos rojos de códigos de error, HUD sci-fi post-apocalíptico, elegante sobriedad militar gótica, archivo de memoria dañado. Texto: solo etiquetas de interfaz genéricas y mínimas, evita párrafos largos y legibles. Restricciones: sin marca de agua, sin logotipos de marcas reales, sin desorden, deja el centro despejado para los sprites de personajes."
"Crea una maqueta de interfaz de novela visual en 16:9 para confirmar el estilo. Sujeto: una interfaz de terminal de inteligencia YoRHa averiada para una AVG de romance sci-fi trágico desde la perspectiva en primera persona de 9S. Composición: capa de fondo vacía con un cuadro de diálogo táctico translúcido en la parte inferior, widgets de estado en la esquina superior derecha para Sincronización de Verdad, Confianza y Alerta, botones de opciones sutiles, sin personajes, sin logotipos con derechos de autor grandes y legibles. Estilo: negro, blanco, gris ceniza, bordes finísimos en dorado apagado, cuadrícula de escaneo azul pálido, pequeños acentos rojos de códigos de error, HUD sci-fi post-apocalíptico, elegante sobriedad militar gótica, archivo de memoria dañado. Texto: solo etiquetas de interfaz genéricas y mínimas, evita párrafos largos y legibles. Restricciones: sin marca de agua, sin logotipos de marcas reales, sin desorden, deja el centro despejado para los sprites de personajes."
Prompt de Sprite (2B)gpt-image-2
"@2B / YoRHa No.2 Type B, crea una fuente de sprite de personaje apta para recorte en 3:4 para el tiempo de ejecución de una novela visual. Sujeto: 2B de pie, cuerpo completo hasta las rodillas, expresión triste y contenida, una mano cerca de la empuñadura de la espada, sin ataque de acción, mirando ligeramente hacia el espectador tal como la ve 9S. Composición: personaje centrado, fondo liso de color gris claro sin costuras, silueta completa visible sin recortes, sin texto. Estilo: arte conceptual de juego frío más CG de romance trágico delicado, uniforme de combate gótico negro, cabello corto blanco, visor táctico, silueta esbelta, detalles monocromáticos en negro, blanco, gris y dorado apagado. Restricciones: fondo simple para eliminar el fondo, sin otros personajes, sin marca de agua, sin logotipos, sin gore, mantén los bordes limpios para el recorte en PNG transparente."
"@2B / YoRHa No.2 Type B, crea una fuente de sprite de personaje apta para recorte en 3:4 para el tiempo de ejecución de una novela visual. Sujeto: 2B de pie, cuerpo completo hasta las rodillas, expresión triste y contenida, una mano cerca de la empuñadura de la espada, sin ataque de acción, mirando ligeramente hacia el espectador tal como la ve 9S. Composición: personaje centrado, fondo liso de color gris claro sin costuras, silueta completa visible sin recortes, sin texto. Estilo: arte conceptual de juego frío más CG de romance trágico delicado, uniforme de combate gótico negro, cabello corto blanco, visor táctico, silueta esbelta, detalles monocromáticos en negro, blanco, gris y dorado apagado. Restricciones: fondo simple para eliminar el fondo, sin otros personajes, sin marca de agua, sin logotipos, sin gore, mantén los bordes limpios para el recorte en PNG transparente."
Prompt de Fondo (Ruinas de la Ciudad)gpt-image-2
"Crea un fondo limpio en 16:9 para el tiempo de ejecución de una novela visual. Escena: ciudad en ruinas post-apocalíptica al atardecer después de la lluvia, torres de hormigón abandonadas divididas por la vegetación, carretera elevada rota, bruma de luz de luna en la distancia, un pequeño grupo de flores blancas cerca del primer plano, sin personajes. Composición: plano general, plano medio tranquilo y legible, tercio inferior vacío apto para la interfaz de diálogo, centro no demasiado recargado, profundidad cinematográfica. Estilo: atmósfera de arte conceptual de juego sci-fi post-apocalíptico frío al estilo NieR, gris ceniza, blanco, negro, reflejos dorados apagados, polvo y niebla, melancólico y solitario. Texto: sin texto. Restricciones: sin personas, sin robots en primer plano, sin marca de agua, sin logotipos, fondo limpio y apto para tiempo de ejecución."
"Crea un fondo limpio en 16:9 para el tiempo de ejecución de una novela visual. Escena: ciudad en ruinas post-apocalíptica al atardecer después de la lluvia, torres de hormigón abandonadas divididas por la vegetación, carretera elevada rota, bruma de luz de luna en la distancia, un pequeño grupo de flores blancas cerca del primer plano, sin personajes. Composición: plano general, plano medio tranquilo y legible, tercio inferior vacío apto para la interfaz de diálogo, centro no demasiado recargado, profundidad cinematográfica. Estilo: atmósfera de arte conceptual de juego sci-fi post-apocalíptico frío al estilo NieR, gris ceniza, blanco, negro, reflejos dorados apagados, polvo y niebla, melancólico y solitario. Texto: sin texto. Restricciones: sin personas, sin robots en primer plano, sin marca de agua, sin logotipos, fondo limpio y apto para tiempo de ejecución."
Prompt de Fondo (Cubierta de Mando del Búnker)gpt-image-2
"Crea un fondo limpio para tiempo de ejecución en 16:9 para una novela visual. Escena: una cubierta de mando militar de androides orbital sobre la Tierra, interior frío en negro, blanco y gris, paneles de datos suspendidos, terminal de transmisión lunar, sin personajes, sin logotipos. Composición: plano general, tercio inferior y centro legibles para la interfaz de diálogo, gran profundidad, geometría sci-fi gótica y sobria. Estilo: mundo de terminal de inteligencia YoRHa averiado, luces finísimas en dorado apagado, resplandor de monitor azul pálido, ambiente militar post-apocalíptico solitario. Texto: sin texto. Restricciones: sin logotipos legibles, sin personas, sin marca de agua, fondo limpio y apto para tiempo de ejecución."
"Crea un fondo limpio para tiempo de ejecución en 16:9 para una novela visual. Escena: una cubierta de mando militar de androides orbital sobre la Tierra, interior frío en negro, blanco y gris, paneles de datos suspendidos, terminal de transmisión lunar, sin personajes, sin logotipos. Composición: plano general, tercio inferior y centro legibles para la interfaz de diálogo, gran profundidad, geometría sci-fi gótica y sobria. Estilo: mundo de terminal de inteligencia YoRHa averiado, luces finísimas en dorado apagado, resplandor de monitor azul pálido, ambiente militar post-apocalíptico solitario. Texto: sin texto. Restricciones: sin logotipos legibles, sin personas, sin marca de agua, fondo limpio y apto para tiempo de ejecución."
Prompt de Fondo (Ruinas del Parque de Atracciones)gpt-image-2
"Crea un fondo limpio para tiempo de ejecución en 16:9 para una novela visual sci-fi trágica. Escena: escenario de boda de un parque de atracciones abandonado construido por formas de vida máquina que imitan a los humanos, luces de carrusel rotas, flores de papel, pasillo agrietado, arco de capilla inquietante, sin texto legible, sin personajes en primer plano. Composición: plano general con un tercio inferior limpio para la interfaz de diálogo. Estilo: melancolía máquina post-apocalíptica, gris ceniza y blanco frío con festividad apagada, polvo y decadencia. Texto: sin texto. Restricciones: sin marca de agua, sin logotipos."
"Crea un fondo limpio para tiempo de ejecución en 16:9 para una novela visual sci-fi trágica. Escena: escenario de boda de un parque de atracciones abandonado construido por formas de vida máquina que imitan a los humanos, luces de carrusel rotas, flores de papel, pasillo agrietado, arco de capilla inquietante, sin texto legible, sin personajes en primer plano. Composición: plano general con un tercio inferior limpio para la interfaz de diálogo. Estilo: melancolía máquina post-apocalíptica, gris ceniza y blanco frío con festividad apagada, polvo y decadencia. Texto: sin texto. Restricciones: sin marca de agua, sin logotipos."
Prompt de Fondo (Ciudad Copiada)gpt-image-2
"Crea un fondo limpio para tiempo de ejecución en 16:9 para una novela visual. Escena: ciudad copiada blanca, envoltura vacía de una ciudad humana artificial, edificios geométricos minimalistas y severos, piedra blanca brillante, vacío pálido e interminable, tenues grietas negras y ruido de datos, sin personajes. Composición: plano general con un tercio inferior limpio para la interfaz de diálogo, fuerte punto de fuga en perspectiva. Estilo: minimalismo sci-fi clínico, blanco y gris pálido con grietas negras finísimas, silencioso e inquietante. Texto: sin texto. Restricciones: sin personas, sin marca de agua, sin logotipos, fondo limpio y apto para tiempo de ejecución."
"Crea un fondo limpio para tiempo de ejecución en 16:9 para una novela visual. Escena: ciudad copiada blanca, envoltura vacía de una ciudad humana artificial, edificios geométricos minimalistas y severos, piedra blanca brillante, vacío pálido e interminable, tenues grietas negras y ruido de datos, sin personajes. Composición: plano general con un tercio inferior limpio para la interfaz de diálogo, fuerte punto de fuga en perspectiva. Estilo: minimalismo sci-fi clínico, blanco y gris pálido con grietas negras finísimas, silencioso e inquietante. Texto: sin texto. Restricciones: sin personas, sin marca de agua, sin logotipos, fondo limpio y apto para tiempo de ejecución."
Por Qué Elegir Neta Studio
Profesional — un sistema de arnés en la nube admite el flujo de trabajo completo, desde la construcción del mundo hasta la generación de assets y la publicación, todo ejecutándose en la nube sin configuración local. Acceso estable a los últimos modelos: Claude Opus 5, GPT Image 2, DeepSeek V3.
Generación con un clic — las habilidades ajustadas oficialmente impulsan cada paso: construcción del mundo, diseño de personajes, generación de arte, recorte de sprites y empaquetado. El uso compartido de recursos con fork de mundos viene integrado.
Primero la comunidad — los usuarios crean mundos ilimitados y cada mundo público puede bifurcarse, remezclarse y reimaginar.
Interior del Estudio
‹
›
Estudio
Estudio
Estudio
Empieza a Crear
Esta interfaz fue generada por Neta Studio AI a partir de una sola frase. El mundo tomó minutos, los assets tomaron minutos y la construcción tomó minutos. Tú también puedes hacerlo — adapta este mundo o empieza desde cero con cualquier IP. No se requiere programar, es gratis para empezar.
×