Charts & InfographicsGPT Image 2Thiết kế WebUI/UXHiện đạiKỹ thuật sốMockup giao diện

Giao diện trang chủ nền tảng xem video

Prompt chi tiết dùng để tạo mockup giao diện trang chủ nền tảng xem video trực tuyến tương tự YouTube trên trình duyệt web macOS. Bố cục bao gồm đầy đủ thanh điều hướng trên, thanh bên và lưới hiển thị các thẻ video kèm ảnh thu nhỏ và thông tin chi tiết.

Bản tiếng Anh

{
  "type": "web browser UI mockup",
  "platform": "{argument name="platform name" default="YouTube"}",
  "browser_window": {
    "style": "macOS light mode",
    "tab": "YouTube",
    "url_bar": "youtube.com"
  },
  "layout": {
    "header": {
      "components": ["hamburger menu", "platform logo", "search bar", "create video icon", "notifications bell", "user profile avatar"]
    },
    "sidebar": {
      "position": "left",
      "item_count": 11,
      "sections": [
        {
          "name": "Main",
          "items": ["Home", "Shorts", "Subscriptions", "Originals", "YouTube Music"]
        },
        {
          "name": "Explore",
          "items": ["Trending", "Shopping", "Music", "Movies", "Live", "Gaming"]
        }
      ]
    },
    "main_content": {
      "category_tags": {
        "count": 10,
        "labels": ["All", "Gaming", "Music", "Live", "Podcasts", "AI", "Cars", "Mixes", "News", "Recently uploaded"]
      },
      "video_grid": {
        "card_count": 5,
        "cards": [
          {
            "position": "top left",
            "size": "large",
            "thumbnail_description": "Sam Altman and Greg Brockman sitting on a stage next to a standing humanoid robot, text overlay 'OpenAI Introducing Our Humanoid Robot', LIVE badge",
            "video_title": "{argument name="featured live stream title" default="Introducing Our Humanoid Robot"}",
            "channel_name": "{argument name="featured live stream channel" default="OpenAI"}",
            "metadata": "482K watching now"
          },
          {
            "position": "top right",
            "size": "large",
            "thumbnail_description": "surprised man's face on the left, a large mansion hidden in a forest with an explosion on the right, bold yellow text overlay '{argument name="top right thumbnail text" default="TOTAL SECRECY"}'",
            "video_title": "{argument name="top right video title" default="I Bought 100 Million Dollar Secret House!"}",
            "channel_name": "MrBeast",
            "metadata": "4.1M views, 19 hours ago, 20:49 duration"
          },
          {
            "position": "bottom left",
            "size": "small",
            "thumbnail_description": "Steve Carell holding a laptop showing a scene from The Office",
            "video_title": "Steve Carell Breaks Down His Most Iconic Characters | GQ",
            "channel_name": "GQ",
            "metadata": "987K views, 2 days ago, 17:46 duration"
          },
          {
            "position": "bottom middle",
            "size": "small",
            "thumbnail_description": "man looking through a spyglass at a sailing ship on the ocean at sunset",
            "video_title": "Black Sails Is Beautiful!",
            "channel_name": "Savage Books",
            "metadata": "606K views, 2 days ago, 17:46 duration"
          },
          {
            "position": "bottom right",
            "size": "small",
            "thumbnail_description": "creepy masked killer character from a video game with text overlay 'DEAD OF DAYLIGHT'",
            "video_title": "Playing As The Seekers In Dead By Daylight",
            "channel_name": "Unknown",
            "metadata": "806K views, 1 day ago, 28:39 duration"
          }
        ]
      }
    }
  }
}

Bản tiếng Việt

{
  "type": "mockup giao diện trình duyệt web",
  "platform": "{argument name="platform name" default="YouTube"}",
  "browser_window": {
    "style": "macOS chế độ sáng",
    "tab": "YouTube",
    "url_bar": "youtube.com"
  },
  "layout": {
    "header": {
      "components": ["menu hamburger", "logo nền tảng", "thanh tìm kiếm", "biểu tượng tạo video", "chuông thông báo", "ảnh đại diện người dùng"]
    },
    "sidebar": {
      "position": "trái",
      "item_count": 11,
      "sections": [
        {
          "name": "Chính",
          "items": ["Home", "Shorts", "Subscriptions", "Originals", "YouTube Music"]
        },
        {
          "name": "Khám phá",
          "items": ["Trending", "Shopping", "Music", "Movies", "Live", "Gaming"]
        }
      ]
    },
    "main_content": {
      "category_tags": {
        "count": 10,
        "labels": ["All", "Gaming", "Music", "Live", "Podcasts", "AI", "Cars", "Mixes", "News", "Recently uploaded"]
      },
      "video_grid": {
        "card_count": 5,
        "cards": [
          {
            "position": "trên cùng bên trái",
            "size": "lớn",
            "thumbnail_description": "Sam Altman và Greg Brockman ngồi trên sân khấu cạnh một robot hình người đang đứng, lớp phủ văn bản 'OpenAI Giới thiệu Robot hình người của chúng tôi', huy hiệu TRỰC TIẾP",
            "video_title": "{argument name="featured live stream title" default="Introducing Our Humanoid Robot"}",
            "channel_name": "{argument name="featured live stream channel" default="OpenAI"}",
            "metadata": "482 nghìn người đang xem"
          },
          {
            "position": "trên cùng bên phải",
            "size": "lớn",
            "thumbnail_description": "khuôn mặt người đàn ông ngạc nhiên ở bên trái, một biệt thự lớn ẩn trong rừng với vụ nổ ở bên phải, lớp phủ văn bản chữ màu vàng đậm '{argument name="top right thumbnail text" default="TOTAL SECRECY"}'",
            "video_title": "{argument name="top right video title" default="I Bought 100 Million Dollar Secret House!"}",
            "channel_name": "MrBeast",
            "metadata": "4,1 triệu lượt xem, 19 giờ trước, thời lượng 20:49"
          },
          {
            "position": "dưới cùng bên trái",
            "size": "nhỏ",
            "thumbnail_description": "Steve Carell cầm máy tính xách tay hiển thị một cảnh trong The Office",
            "video_title": "Steve Carell phân tích những nhân vật mang tính biểu tượng nhất của mình | GQ",
            "channel_name": "GQ",
            "metadata": "987 nghìn lượt xem, 2 ngày trước, thời lượng 17:46"
          },
          {
            "position": "dưới cùng ở giữa",
            "size": "nhỏ",
            "thumbnail_description": "người đàn ông nhìn qua kính viễn vọng vào một con tàu buồm trên đại dương lúc hoàng hôn",
            "video_title": "Black Sails thật đẹp!",
            "channel_name": "Savage Books",
            "metadata": "606 nghìn lượt xem, 2 ngày trước, thời lượng 17:46"
          },
          {
            "position": "dưới cùng bên phải",
            "size": "nhỏ",
            "thumbnail_description": "nhân vật kẻ sát nhân đeo mặt nạ rùng rợn trong trò chơi điện tử với lớp phủ văn bản 'DEAD OF DAYLIGHT'",
            "video_title": "Chơi vai The Seekers trong Dead By Daylight",
            "channel_name": "Unknown",
            "metadata": "806 nghìn lượt xem, 1 ngày trước, thời lượng 28:39"
          }
        ]
      }
    }
  }
}

Mẹo sử dụng

Bạn có thể tùy chỉnh các giá trị bên trong JSON như tiêu đề video, ảnh thumbnail, tên kênh và số liệu để phù hợp với dự án hoặc thương hiệu của bạn. Giữ nguyên cấu trúc JSON để AI kết xuất giao diện chính xác và sắc nét nhất.

Nguồn và quyền sử dụng

Nguồn: https://x.com/AelionStellar/status/2043480770954645754#reversed-0
Tác giả gốc: Aelion
License prompt: CC-BY-4.0
License ảnh: CC-BY-4.0

Báo lỗi hoặc yêu cầu gỡ nội dung