Japanese Mystery Website Mockup
Generates a responsive desktop and mobile UI mockup for an atmospheric Japanese mystery story or game website.
Prompt
Goal: Create a polished website mockup for a Japanese mystery game or story archive titled 月蝕綺譚, 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 月蝕綺譚 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 物語の続きを、いちばん近くで。 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.
How to use this prompt
- 1
Copy the full prompt above.
- 2
Open a platform that supports GPT Image 2, such as YouMind, and paste the prompt in.
- 3
Swap the subject, style, or details to fit your idea, then generate.
This is a free AI prompt from YouMind's prompt library. Explore thousands more image prompts, all free to copy and adapt.
Explore more image promptsMore from GPT Image 2
All Image Categories
More Prompt Features
AI Library
AI prompt search
Let AI search through tens of thousands of prompts. Filter by model, time range, keywords, and sort by engagement — views, bookmarks, reposts and more.
Vision Tools
Image to Prompt
Turn any photo into a detailed AI image prompt. The free image to prompt converter analyzes composition, style, and lighting so you can recreate any look in seconds.
Other Prompt Features
Built for creators. Free forever.
YouMind is the AI creative copilot trusted by millions of creators worldwide. Every prompt here is curated to help you create better, faster.