다크 모드 AI 뷰어 강의 웹사이트 목업

A realistic dark-mode desktop screenshot of a creative AI image viewer interface displaying a generated website design mockup. The canvas is sleek charcoal gray with a minimal modern application UI. • Top Left: Header text reads "[Thought for 2m 6s]" in a small white sans-serif font beside a subtle chevron icon. • Center Preview: A prominent rounded-rectangle frame showcasing a glossy black luxury editorial landing page for Japanese online courses. Inside the website hero section, elegant typography features the small English label "[ONLINE COURSES]" above a prominent Japanese headline: "[デザインとキャリアを、次のステージへ]", followed by a subtle Japanese subheading. Below the hero, exactly 6 course cards are arranged in a 3-column by 2-row grid. Each card is dark and cinematic with thin borders, gold-gray accents, a moody image, category tag, short description, tiny circular instructor portrait, and a "[詳しく見る →]" link: - Card 1: UI design visuals with title "[本質的なUIデザインの思考とプロセス]" - Card 2: Figma interface graphics with title "[Figmaマスター講座 実践編]" - Card 3: Notebook and pens with title "[伝わる構造をつくる 情報設計の技術]" - Card 4: Web design editor graphic with title "[STUDIOでつくる ノーコードWebデザイン]" - Card 5: Editorial book branding object with title "[ブランドの価値をつくる 設計と表現]" - Card 6: Portfolio print spread with title "[魅せ方で差がつく ポートフォリオ講座]" • Preview Overlay: A small white Japanese button labeled "[編集]" sits at the bottom-left inside the preview, and a delicate white share/export icon sits at the bottom-right. • Right Sidebar: Exactly 4 vertically stacked rounded-square variant thumbnails; the top three are light minimalist web pages, while the fourth matches the dark course grid and has a vibrant glowing blue selection outline. • Bottom Left: Crisp white interface icons showing a copy icon and a horizontal three-dots menu icon. Clean screen-capture realism, precise UI padding, subtle drop shadows, and high-end Japanese editorial aesthetic.