Site

Design de site para passeio noturno em Kaifeng

Acompanhe um rio iluminado por lanternas ao longo de cinco capítulos de Bianjing After Dark, desde o portão da cidade e o mercado noturno até a poesia e a soltura de lanternas.

OpenDesignDesign e produção
Oficial
Narrativa cultural imersiva5 seções
Design de site para passeio noturno em Kaifeng: rio iluminado por lanternas e introdução ao passeio noturno
Kaifeng-1 · Sequência de cenas capturadasCaptura de tela 1 de 5

LLM Arena Set 2026

Notas do caso
Modelo
Claude Opus 5.5
Tarefa de design
Crie uma jornada interativa iluminada por lanternas através de uma Bianjing imaginada da era Song.
Saída
Site

Indicado para

  • Narrativa culturalConecte cenas, textos e pequenas ações em torno de um só lugar.
  • Exposições digitaisConduza os visitantes por uma sequência temática sem um funil de reservas.
  • Poesia interativaPermita que um verso selecionado se torne parte de uma cena posterior.

Principais destaques

  • Cinco capítulos ao longo de um único rioUma cena urbana persistente conecta o portão, a ponte, o mercado e o encerramento.
  • Um verso que percorre a jornadaA seleção do poema reaparece como uma mensagem pessoal na lanterna.
  • Uma mudança de ritmoOs efeitos do mercado dão lugar a uma leitura mais tranquila antes da ação final.

Um design de site para passeio noturno em Kaifeng narrado em cinco capítulos

Bianjing After Dark apresenta uma cidade imaginada como um rolo de pintura noturno. A abertura combina caracteres chineses de grandes dimensões à esquerda com um rio iluminado por lanternas, construções de madeira e reflexos. Detalhes dourados e janelas iluminadas se destacam contra o cenário azul-escuro. O convite principal é entrar na sequência, não procurar um destino nem reservar um passeio.

O mesmo universo de cidade fluvial continua ao fundo dos capítulos posteriores. A rolagem altera simultaneamente a câmera e o texto em primeiro plano, enquanto a navegação superior e a barra numerada de capítulos permanecem disponíveis. Isso cria continuidade entre o portão, a ponte, o mercado, a poesia e a cena final das lanternas, sem exigir uma página separada para cada parada.

A cena de abertura completa combina o título chinês de exibição com o rio, as luzes da cidade e a navegação de cinco capítulos.
A cena de abertura completa combina o título chinês de exibição com o rio, as luzes da cidade e a navegação de cinco capítulos.

Tipografia como parte da cena

Grandes títulos chineses são organizados em agrupamentos verticais compactos, deixando a parte mais ampla da tela para o rio e as construções. Uma identificação menor em inglês aparece abaixo do título de abertura. As diferentes escalas estabelecem uma ordem de leitura sem tentar dar a todos os idiomas o mesmo peso visual no mesmo espaço.

Duas maneiras de saber onde você está

A navegação superior nomeia as atividades, enquanto a barra à direita numera os cinco capítulos. Os nomes explicam o conteúdo de cada parada; os números indicam sua posição na sequência. A orientação repetida é útil porque o fundo visual é contínuo e, de outra forma, pode dificultar a identificação dos limites entre os capítulos.

A luz como motivo visual recorrente

Grades de janelas, lanternas suspensas e reflexos repetem pontos de luz quente por toda a cena. A ação final de soltura utiliza o mesmo objeto que esteve visível desde o início. Ela parece uma conclusão para a narrativa visual estabelecida, em vez de um efeito sem relação adicionado ao final.

Levando a seleção de um poema até a cena das lanternas

O capítulo de poesia muda o tipo de participação. Em vez de acionar outro espetáculo do mercado, o visitante escolhe um poema e depois um verso. O verso selecionado é repetido em uma área separada para a mensagem e levado à cena de encerramento. Esse pequeno estado conecta dois capítulos: a leitura produz uma consequência visível mais adiante no passeio.

A fonte apresenta uma atribuição de autoria e uma nota contextual ao lado do poema, não apenas em uma página de créditos. Ela explica que o verso da dinastia Song do Sul foi usado por suas imagens de uma noite de lanternas, e não apresentado como um registro histórico de Bianjing. Essa distinção permite que a experiência use uma escrita evocativa sem disfarçar uma associação artística como evidência documental.

A cena completa de poesia posiciona versos selecionáveis e seu contexto ao lado da apresentação da cidade fluvial.
A cena completa de poesia posiciona versos selecionáveis e seu contexto ao lado da apresentação da cidade fluvial.
  1. Ofereça uma escolha de leitura delimitada

    Duas abas de poemas mantêm a seleção pequena o bastante para ser compreendida de imediato. Cada poema tem sua própria atribuição de autoria e seu próprio contexto. O visitante não precisa pesquisar em um acervo nem abrir uma página de leitura separada para fazer uma escolha relevante para essa experiência breve.

  2. Repita o verso escolhido antes de continuar

    A área da mensagem repete o verso selecionado abaixo do poema. Essa é uma confirmação útil porque os próprios versos clicáveis continuam cercados por outros versos. A ação de continuar pode então levar ao capítulo das lanternas com um trecho específico já selecionado.

  3. Dê ao encerramento duas ações relacionadas

    O capítulo final oferece uma lanterna no céu e uma lanterna no rio ao lado da mensagem transportada. Ambas se encaixam no universo estabelecido, enquanto suas direções diferentes as tornam escolhas distintas. A ação de repetir fica separada, para que refazer a jornada pela cidade não seja confundido com soltar outra lanterna.

Definindo o ritmo do mercado noturno, da poesia e da cena de encerramento

O capítulo do mercado é a parada mais ativa. Ele oferece efeitos de flores de ferro e fogos de artifício, um controle de pregão de rua e histórias curtas associadas ao chá, à seda e a um barco. Nem todas essas interações são equivalentes: algumas alteram a atmosfera, enquanto outras mudam o texto. Agrupá-las sob o mercado dá à variedade um cenário reconhecível.

A cena do mercado reúne controles de atmosfera e pequenas histórias do cotidiano em uma visão completa do capítulo.
A cena do mercado reúne controles de atmosfera e pequenas histórias do cotidiano em uma visão completa do capítulo.
Como a sequência de capítulos muda o papel do visitante
CapítuloConvite principalPapel na sequência
Portão e ponteEntrar na cidade e descobrir um verso de poesiaEstabelecer o lugar e introduzir a interação de leitura posterior.
Mercado noturnoEscolher um espetáculo ou uma história do cotidianoAumentar a atividade, mantendo cada ação vinculada ao cenário da rua.
PoesiaLer, escolher e levar um versoDiminuir o ritmo e criar uma pequena escolha persistente.
Soltura de lanternasEnviar a mensagem escolhida para a cenaConcluir a seleção anterior por meio de uma ação final visível.

Um passeio noturno artístico, não uma reconstrução histórica

Esta é uma experiência digital fictícia inspirada por imagens de cidades fluviais, poesia e imaginação contemporânea. Suas cenas urbanas não constituem uma reconstrução precisa, e a fonte identifica suas ilustrações como criadas por IA. A prévia preserva as interações locais fornecidas; ela não adiciona venda de ingressos, um itinerário real nem um mapa histórico verificado. A galeria é um conjunto ordenado de cenas de rolagem renderizadas, e não uma única captura de tela convencional do documento completo.

Como criar um design de site para passeio noturno em Kaifeng no OpenDesign

  1. Baixar e instalar o OpenDesign

    Baixe o aplicativo desktop, instale-o e conclua a configuração. Crie um projeto para o seu design.

    Baixar OpenDesign
  2. Defina a jornada antes de adicionar efeitos

    Comece com cinco propósitos para os capítulos e um objeto que os conecte. Aqui, as lanternas aparecem ao longo de todo o cenário, enquanto um verso escolhido confere um significado específico ao encerramento. Deixe essas relações explícitas na primeira solicitação.

    Prompt sugerido

    Crie um design de site para passeio noturno em Kaifeng para uma experiência fictícia chamada Bianjing After Dark. Use uma cidade fluvial contínua iluminada por lanternas, com água azul-escura, construções de madeira em tons quentes e grandes títulos chineses para exibição. Organize cinco capítulos de rolagem: portão da cidade, ponte, mercado noturno, poesia e soltura de lanternas. Mantenha uma navegação com nomes na parte superior e uma barra lateral numerada de capítulos. Faça o mercado oferecer alguns efeitos visuais locais e histórias curtas sobre chá, seda e barcos. No capítulo de poesia, permita que o visitante selecione um verso com atribuição de autoria e volte a exibi-lo na mensagem final da lanterna. Adicione ações separadas para lanternas no céu e lanternas no rio, além de uma opção para repetir. Identifique claramente a obra como uma interpretação artística, não como uma reconstrução histórica nem como um serviço real de passeios. Preserve um percurso de leitura compreensível quando o movimento estiver reduzido.

  3. Acompanhe o verso selecionado entre os capítulos

    Escolha um verso diferente, avance até o encerramento e verifique se o mesmo texto aparece ali. Altere o poema e repita a verificação. Isso testa diretamente a conexão narrativa, em vez de tratar cada capítulo como um efeito visual independente.

  4. Verifique o texto em cada posição da câmera

    Analise as cenas da ponte, do mercado e da poesia com todo o texto e todos os controles visíveis. Janelas iluminadas e reflexos podem ficar atrás de diferentes versos conforme a câmera se move. Refine o fundo ou o enquadramento do texto sem achatar toda a cena com uma sobreposição escura.

  5. Exportar e obter um link de compartilhamento

    Exporte seu design finalizado e, em seguida, use Compartilhar no OpenDesign para obter um link de compartilhamento. Abra o link em uma janela separada do navegador e verifique se a versão desejada e seus assets estão disponíveis antes de enviá-lo.

OpenDesign Desktop

Um design system. Sua marca consistente em tudo

No Vibe Design Workspace completo, aplique as mesmas regras de marca a sites, apresentações, protótipos interativos, dashboards, imagens e vídeos HTML. Conecte Codex, Claude Code, Cursor e outros agentes de código locais e crie de graça.

  • Sites, apresentações, protótipos, dashboards, imagens e vídeo
  • Mais de 140 design systems e a biblioteca completa de templates e skills
  • Codex local e mais de 21 agentes de código · Grátis
Baixar grátis

Disponível para macOS e Windows