Japanese Mystery Website Mockup
Generates a responsive desktop and mobile UI mockup for an atmospheric Japanese mystery story or game website.
Prompt
Objetivo: Criar um mockup de site polido para um jogo ou arquivo de histórias de mistério japonês intitulado {argument name="site title" default="月蝕綺譚"}, exibido como uma prévia de design responsivo com uma janela de navegador desktop à esquerda e uma tela de smartphone à direita.
Canvas: Imagem de apresentação ampla em 16:9 sobre um fundo cinza claro. Coloque um mockup de navegador desktop grande ocupando cerca de 75% da largura à esquerda e um mockup de smartphone alto ocupando cerca de 22% da largura à direita. Use molduras de dispositivos realistas com sombras suaves.
Estilo visual: Horror literário japonês elegante, mistério silencioso, documentos de arquivo, escuridão sob o luar. Paleta de papel marfim, tinta preta, azul-marinho profundo, cinza suave e um forte destaque em vermelho vermelhão. Use tipografia japonesa serifada, linhas finas, bordas que lembram bilhetes, textura de papel sutil, imagens de manuscritos antigos e gráficos de linhas de órbita de lua crescente. O clima geral deve parecer um site oficial premium para um jogo narrativo.
Layout desktop: Mostre uma janela de navegador com uma barra superior escura e três pequenos pontos de janela. Dentro da página, use um cabeçalho marfim com o título do site {argument name="site title" default="月蝕綺譚"} à esquerda, um pequeno selo vermelho e exatamente 5 itens de navegação horizontais: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 e um botão azul-marinho escuro rotulado 「メールで会員になる」. A seção hero abaixo é um visual amplo de eclipse lunar escuro com o título vertical 「月蝕綺譚」 centralizado sobre uma lua crescente/eclipse brilhante. Sobreponha um cartão de interface de arquivo translúcido com documentos japoneses antigos e exatamente 5 pequenos cartões de colecionáveis/documentos ao longo da parte inferior dessa sobreposição. Ao longo da parte inferior da imagem hero, inclua exatamente 5 tiras de miniaturas horizontais mostrando: uma rua noturna, uma sala que lembra uma planta baixa, uma pasta ou objeto escuro, papéis antigos manuscritos e um mapa de mesa/espaço de trabalho.
Cartão de inscrição lateral (desktop): À direita do hero, coloque um grande cartão de membro em formato de bilhete cor creme com entalhes semicirculares e uma borda decorativa fina. Inclui o pequeno rótulo 「入会札」, um emblema de carimbo, manchete 「メールで会員になる」, um ícone de envelope, um pequeno texto explicativo, um campo de entrada de e-mail com o placeholder 「メールアドレスを入力」 e um botão CTA vermelho rotulado 「登録する」 com uma seta para a direita. Inclua um pequeno texto de política de privacidade abaixo.
Conteúdo inferior (desktop): Abaixo do hero, crie uma seção com aspecto de duas colunas. À esquerda, um grande slogan japonês {argument name="tagline text" default="物語の続きを、いちばん近くで。"} com uma linha vertical vermelha fina e um pequeno parágrafo descritivo. À direita, coloque exatamente 3 cartões de artigos em uma linha. Os 3 cartões são: 1) 「月蝕綺譚 最新便」 com uma imagem da lua, um pequeno rótulo vermelho NEW, título 「大型アップデート『○○』を公開しました」, data 2024.05.20; 2) 「開発記録」 com uma imagem de caderno e caneta, título 「開発記録 #12：環境音の調整について」, data 2024.05.18; 3) 「ご意見箱」 com uma imagem de caixa de correio escura, título 「ご意見・ご感想をお聞かせください」, data 2024.05.16. Cada cartão tem uma borda fina, uma pequena seta no cabeçalho e linhas de resumo cinzas como placeholder.
Rodapé (desktop): Adicione um rodapé azul-marinho escuro cobrindo a parte inferior com exatamente 6 links de rodapé: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Inclua um ícone de lua crescente e o copyright 「© 2024 月蝕綺譚」 à direita.
Layout mobile: No smartphone à direita, mostre o mesmo site adaptado para mobile. O horário da barra de status marca 9:41. O cabeçalho contém o título 「月蝕綺譚」 e um ícone de menu hambúrguer. Abaixo dele, mostre um hero escuro compacto com o eclipse e o título vertical, seguido por exatamente 5 miniaturas horizontais pequenas. Continue com o slogan 「物語の続きを、いちばん近くで。」, depois o mesmo cartão de inscrição de e-mail em formato de bilhete, e então o primeiro cartão de notícias 「月蝕綺譚 最新便」 com a imagem da lua e o rótulo vermelho NEW. A visualização mobile deve parecer rolável verticalmente, mas contida dentro da tela do telefone.
Restrições: Mantenha todo o texto da interface visível em japonês, conforme especificado. Use renderização de mockup de interface limpa e de alta fidelidade, tipografia nítida, sombras sutis e sem logotipos ou marcas d'água extras. O design deve parecer um mockup de site/aplicativo finalizado, gerado para planejamento de implementação.
Tradução automática — o prompt original é o que gerou este resultado.
Prompt original
Goal: Create a polished website mockup for a Japanese mystery game or story archive titled {argument name="site title" default="月蝕綺譚"}, shown as a responsive design preview with one desktop browser window on the left and one smartphone screen on the right.
Canvas: Wide 16:9 presentation image on a light gray background. Place a large desktop browser mockup occupying about 75% of the width on the left, and a tall smartphone mockup occupying about 22% of the width on the right. Use realistic device frames with soft shadows.
Visual style: Elegant Japanese literary horror, quiet mystery, archival documents, moonlit darkness. Palette of ivory paper, black ink, deep navy-black, muted gray, and one strong vermilion red accent. Use serif Japanese typography, thin ruled lines, ticket-like borders, subtle paper texture, old manuscript imagery, and faint crescent-orbit line graphics. The overall mood should feel like a premium official website for a narrative game.
Desktop layout: Show a browser window with a dark top bar and three small window dots. Inside the page, use an ivory header with the site title {argument name="site title" default="月蝕綺譚"} on the left, a small red seal mark, and exactly 5 horizontal navigation items: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, and a dark navy button labeled 「メールで会員になる」. The hero section below is a wide dark moon-eclipse visual with the vertical title 「月蝕綺譚」 centered over a glowing crescent/eclipse. Overlay a translucent archive UI card with old Japanese documents and exactly 5 small collectible/document cards along the bottom of that overlay. Along the very bottom of the hero image, include exactly 5 horizontal thumbnail strips showing: a night street, a blueprint-like room, a dark folder or object, old handwritten papers, and a desk/workspace map.
Desktop right signup card: To the right of the hero, place a large cream ticket-shaped membership card with clipped semicircle notches and a thin decorative border. It includes the small label 「入会札」, a stamp emblem, headline 「メールで会員になる」, an envelope icon, short explanatory text, one email input field with placeholder 「メールアドレスを入力」, and a red CTA button labeled 「登録する」 with a right arrow. Include tiny privacy-policy text beneath.
Desktop lower content: Under the hero, make a two-column-feeling section. On the left, a large Japanese tagline {argument name="tagline text" default="物語の続きを、いちばん近くで。"} with a thin vertical red line and a small descriptive paragraph. On the right, place exactly 3 article cards in a row. The 3 cards are: 1) 「月蝕綺譚 最新便」 with a moon image, a small red NEW label, title 「大型アップデート『○○』を公開しました」, date 2024.05.20; 2) 「開発記録」 with a notebook and pen image, title 「開発記録 #12：環境音の調整について」, date 2024.05.18; 3) 「ご意見箱」 with a dark mailbox image, title 「ご意見・ご感想をお聞かせください」, date 2024.05.16. Each card has a thin border, a small arrow in the header, and gray placeholder summary lines.
Desktop footer: Add a dark navy footer spanning the bottom with exactly 6 footer links: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Include a crescent moon icon and copyright 「© 2024 月蝕綺譚」 on the right.
Mobile layout: On the right smartphone, show the same site adapted to mobile. Status bar time reads 9:41. Header contains the title 「月蝕綺譚」 and a hamburger menu icon. Below it, show a compact dark hero with the eclipse and vertical title, then exactly 5 small horizontal thumbnails. Continue with the tagline 「物語の続きを、いちばん近くで。」, then the same ticket-shaped email signup card, then the first news card 「月蝕綺譚 最新便」 with moon image and red NEW label. The mobile view should be vertically scrollable-looking but contained within the phone screen.
Constraints: Keep all visible interface text in Japanese as specified. Use clean, high-fidelity UI mockup rendering, crisp typography, subtle shadows, and no extra logos or watermarks. The design should look like a finished web/app mock generated for implementation planning.✨ Gerar Salvar Publicação original Abrir no Hitboard