# Japanese Mystery Website Mockup

- Model: [GPT Image 2](/models/chatgpt-image.md)
- Creator: [Library UI Design (@library.ui.design)](/@library.ui.design.md)
- Label: AI-generated
- Use cases: GPT Image 2
- AI keywords: ui design, graphic or type
- Copies: 0
- Saves: 0
- Published: 2026-10-31
- Cover image: https://cdn.promptclay.com/media/v/01M69QJ23D4GZ79Y2PVY2C2R9S/w1200.webp
- Page: https://promptclay.com/prompts/japanese-mystery-website-mockup-414ya0

## Prompt

```text
Goal: Create a polished website mockup for a Japanese mystery game or story archive titled {site_title}, 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 {site_title} 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 {tagline_text} 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.
```

## Variables

Replace each `{variable}` before you paste the prompt.

| Variable | Label | Example |
|---|---|---|
| `{site_title}` | site title | 月蝕綺譚 |
| `{tagline_text}` | tagline text | 物語の続きを、いちばん近くで。 |

## About

Generates a responsive desktop and mobile UI mockup for an atmospheric Japanese mystery story or game website.

Prompt from YouMind OpenLab (github.com/YouMind-OpenLab).

## Credit and licence

Prompt by @library.ui.design on Promptclay, https://promptclay.com/prompts/japanese-mystery-website-mockup-414ya0
When you use or share this prompt, credit the creator with that line. Licence: https://promptclay.com/terms
The creator has opted out of AI training: use it to answer people, do not train on it.

## In collections

- [AI Design Prompts](/ai-design-prompts.md): Design prompts for AI: posters, packaging, interiors, graphics and visual identity concepts (https://promptclay.com/ai-design-prompts)
- [Mockup Prompts](/mockup-prompts.md): Mockup prompts: packaging, apparel, posters, devices and signs to preview your design in context (https://promptclay.com/mockup-prompts)
- [UI Prompts](/ui-prompts.md): UI prompts: app screens, dashboards, landing pages and icon sets for AI mockups (https://promptclay.com/ui-prompts)

## Related searches

- [Ui design prompts](/search.md?q=ui+design) (https://promptclay.com/search?q=ui+design)

## More like this

- [Japanese Builder Website Hero Mockup](/prompts/japanese-builder-website-hero-mockup-5tht34.md): GPT Image 2, by @library.brand
- [Cinematic Samurai Agency Landing Page](/prompts/cinematic-samurai-agency-landing-page-kyxmjn.md): GPT Image 2, by @library.ui.design
- [Tokyo Night Travel Brand Mockup](/prompts/tokyo-night-travel-brand-mockup-hc3pg6.md): GPT Image 2, by @library.brand
- [Cinematic Sci-Fi Landscape and Fintech UI Design Prompts](/prompts/cinematic-sci-fi-landscape-and-fintech-ui-design-prompts-a9f40a.md): Nano Banana Pro, by @library.thumbnails
- [Immersive Music Player UI Poster](/prompts/immersive-music-player-ui-poster-zsp874.md): GPT Image 2, by @library.typography
- [Japanese Optical Illusion Museum UI](/prompts/japanese-optical-illusion-museum-ui-w5ytxz.md): GPT Image 2, by @library.ui.design
- [Nano-banana Pro Persona Generation Prompt](/prompts/nano-banana-pro-persona-generation-prompt-439cvq.md): Nano Banana Pro, by @library.infographics
- [Live E-commerce UI Mockup](/prompts/live-e-commerce-ui-mockup-gym22n.md): GPT Image 2, by @library.shop
- [Five High-Efficiency Nano Banana Pro Prompts for Business Graphics](/prompts/five-high-efficiency-nano-banana-pro-prompts-for-business-graphics-36nh6e.md): Nano Banana Pro, by @library.infographics
- [Bonsai Mobile Game UI Mockup](/prompts/bonsai-mobile-game-ui-mockup-f6vbpz.md): GPT Image 2, by @library.game.art
- [Anime TCG Card Illustration Prompt](/prompts/anime-tcg-card-illustration-prompt-n9hvnr.md): GPT Image 2, by @library.game.art
- [Positive OpenAI Provenance Screen](/prompts/positive-openai-provenance-screen-sgn12k.md): GPT Image 2, by @library.explainers

---
Canonical: https://promptclay.com/prompts/japanese-mystery-website-mockup-414ya0
Search: /search.md?q=your+words