Sitio web
Diseño de sitio web de tour nocturno por Kaifeng
Sigue un río iluminado por farolillos a través de cinco capítulos de Bianjing After Dark, desde la puerta de la ciudad y el mercado nocturno hasta la poesía y la liberación de farolillos.
LLM Arena sep. 2026
Notas del caso- Modelo
- Claude Opus 5.5
- Tarea de diseño
- Crea un recorrido interactivo iluminado por farolillos a través de una Bianjing imaginada de la era Song.
- Resultado
- Sitio web
Diseñado para
- Narrativa culturalConecta escenas, textos y pequeñas acciones alrededor de un mismo lugar.
- Exposiciones digitalesGuía a los visitantes por una secuencia temática sin un embudo de reservas.
- Poesía interactivaPermite que un verso seleccionado forme parte de una escena posterior.
Aspectos destacados
- Cinco capítulos a lo largo de un mismo ríoUna escena urbana persistente conecta la puerta, el puente, el mercado y el final.
- Un verso que viajaLa selección del poema reaparece como una nota personal en un farolillo.
- Un cambio de ritmoLos efectos del mercado dan paso a una lectura más pausada antes de la acción final.
Explora el tour nocturno de Bianjing
1 / 5
Un diseño de sitio web de tour nocturno por Kaifeng contado en cinco capítulos
Bianjing After Dark presenta una ciudad imaginada como un rollo horizontal nocturno. La apertura combina grandes caracteres chinos a la izquierda con un río iluminado por farolillos, edificios de madera y reflejos. Los acentos dorados y las ventanas iluminadas destacan sobre el entorno azul oscuro. La invitación principal es entrar en la secuencia, no buscar un destino ni reservar un tour.
El mismo mundo de ciudad ribereña continúa detrás de los capítulos posteriores. El desplazamiento cambia a la vez la cámara y el texto del primer plano, mientras la navegación superior y la guía lateral numerada siguen disponibles. Esto crea continuidad entre la puerta, el puente, el mercado, la poesía y la escena final de farolillos sin exigir una página independiente para cada parada.

La tipografía como parte de la escena
Los títulos chinos grandes se organizan en agrupaciones verticales compactas, dejando la parte más amplia de la pantalla para el río y los edificios. La marca en inglés, de menor tamaño, se sitúa debajo del título inicial. Sus escalas diferentes establecen un orden de lectura sin intentar dar a cada idioma el mismo peso visual en el mismo espacio.
Dos formas de saber dónde estás
La navegación superior nombra las actividades, mientras que la guía del lado derecho numera los cinco capítulos. Los nombres explican qué contiene una parada; los números explican su posición en la secuencia. Esta orientación repetida resulta útil porque el fondo visual es continuo y, de otro modo, los límites entre capítulos podrían ser difíciles de identificar.
La luz como motivo visual recurrente
Las cuadrículas de las ventanas, los farolillos colgantes y los reflejos repiten puntos cálidos de luz por toda la escena. La acción final de liberación utiliza el mismo objeto que ha estado visible desde el principio. Se percibe como una conclusión de la historia visual establecida, no como un efecto ajeno añadido al final.
Llevar una selección de poema a la escena de los farolillos
El capítulo de poesía cambia el tipo de participación. En lugar de activar otro espectáculo del mercado, el visitante elige un poema y después un verso. El verso seleccionado se repite en un área de notas independiente y se lleva a la escena final. Este pequeño fragmento de estado conecta dos capítulos: la lectura tiene una consecuencia visible más adelante en el recorrido.
La fuente coloca una atribución y una nota contextual junto al poema, no únicamente en una página de créditos. Explica que los versos de la época Song del Sur se toman prestados por sus imágenes de la noche de farolillos, en lugar de presentarse como un registro histórico de Bianjing. Esta distinción permite utilizar una escritura evocadora sin disfrazar una asociación artística de evidencia documental.

Ofrece una elección de lectura acotada
Dos pestañas de poemas mantienen la selección en un tamaño fácil de comprender de un vistazo. Cada poema tiene su propia atribución y contexto. El visitante no necesita buscar en un archivo ni abrir una página de lectura independiente para tomar una decisión relevante para esta breve experiencia.
Repite el verso elegido antes de continuar
El área de notas repite el verso seleccionado debajo del poema. Es una confirmación útil porque las líneas en las que se puede hacer clic permanecen rodeadas de otros versos. La acción de continuar puede conducir entonces al capítulo de los farolillos con un texto específico ya seleccionado.
Ofrece dos acciones relacionadas al final
El capítulo final ofrece un farolillo celeste y un farolillo fluvial junto a la nota trasladada. Ambos encajan en el mundo establecido, mientras que sus direcciones diferentes los convierten en opciones distintas. La acción de repetir está separada, de modo que repetir el recorrido por la ciudad no se confunde con liberar otro farolillo.
Marcar el ritmo del mercado nocturno, la poesía y la escena final
El capítulo del mercado es la parada más activa. Ofrece efectos de flores de hierro y fuegos artificiales, un control de pregón callejero y relatos breves asociados con el té, la seda y un barco. No son interacciones equivalentes: algunas cambian la atmósfera, mientras que otras cambian el texto. Agruparlas bajo el mercado da a la variedad un entorno reconocible.

| Capítulo | Invitación principal | Papel en la secuencia |
|---|---|---|
| Puerta y puente | Entra en la ciudad y descubre un verso de poesía | Establece el lugar e introduce la interacción de lectura posterior. |
| Mercado nocturno | Elige un espectáculo o un relato cotidiano | Aumenta la actividad manteniendo cada acción vinculada al entorno callejero. |
| Poesía | Lee, elige y conserva un verso | Ralentiza el ritmo y crea una pequeña elección persistente. |
| Liberación de farolillos | Envía la nota elegida a la escena | Resuelve la selección anterior mediante una acción final visible. |
Un tour nocturno artístico, no una reconstrucción histórica
Esta es una experiencia digital ficticia inspirada en imágenes de ciudades ribereñas, poesía e imaginación contemporánea. Sus escenas urbanas no son una reconstrucción precisa, y la fuente identifica sus ilustraciones como creadas con IA. La vista previa conserva las interacciones locales proporcionadas; no añade venta de entradas, un itinerario real ni un mapa histórico verificado. La galería es un conjunto ordenado de escenas de desplazamiento renderizadas, no una única captura de pantalla convencional del documento completo.
Cómo crear un diseño de sitio web de tour nocturno por Kaifeng en OpenDesign
Define el recorrido antes de añadir efectos
Empieza con cinco propósitos de capítulo y un objeto que los conecte. Aquí, los farolillos aparecen en todo el escenario, mientras que un verso elegido da al final un significado específico. Mantén estas relaciones explícitas en la primera solicitud.
Prompt sugeridoCrea un diseño de sitio web de tour nocturno por Kaifeng para una experiencia ficticia llamada Bianjing After Dark. Usa una ciudad ribereña continua iluminada por farolillos, con agua azul oscura, edificios de madera cálida y grandes títulos de exposición en chino. Organiza cinco capítulos de desplazamiento: puerta de la ciudad, puente, mercado nocturno, poesía y liberación de farolillos. Mantén la navegación con nombres en la parte superior y una guía lateral numerada de capítulos. Permite que el mercado ofrezca algunos efectos visuales locales y relatos breves sobre té, seda y barcos. En el capítulo de poesía, permite que el visitante seleccione un verso atribuido y muéstralo de nuevo en la nota final del farolillo. Añade acciones separadas para un farolillo celeste y un farolillo fluvial, además de repetir. Identifica claramente la obra como una recreación artística, no como una reconstrucción histórica ni un servicio turístico real. Conserva un recorrido legible por el texto cuando se reduzca el movimiento.
Sigue el verso seleccionado a través de los capítulos
Elige un verso diferente, ve al final y comprueba que el mismo texto aparece allí. Cambia el poema y repite la comprobación. Esto pone a prueba directamente la conexión narrativa, en lugar de tratar cada capítulo como un efecto visual independiente.
Comprueba el texto en cada posición de cámara
Revisa las escenas del puente, el mercado y la poesía con todo su texto y sus controles visibles. Las ventanas iluminadas y los reflejos pueden quedar detrás de distintas líneas mientras la cámara se mueve. Perfecciona el fondo o el encuadre del texto sin convertir toda la escena en una superposición oscura.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.



