社区案例

YouTube 深色模式桌面 UI 原型

一个详细的桌面操作系统深色模式视频流媒体主页 UI 原型，适用于网页设计参考和布局生成。

Ivan Davila · 2026-04-14 · 约 7 分钟

参考效果：YouTube 深色模式桌面 UI 原型 — 社区作者发布的参考画面 · Ivan Davila

编辑提示词

完整提示词

{
  "type": "桌面网页浏览器 UI 截图",
  "environment": "{argument name=\"os environment\" default=\"Windows 11 桌面\"}",
  "theme": "{argument name=\"ui theme\" default=\"深色模式\"}",
  "browser_window": {
    "tabs": ["YouTube", "新标签页"],
    "url_bar": "youtube.com",
    "profile_icon": "{argument name=\"profile initial\" default=\"M\"}"
  },
  "app_interface": {
    "header": {
      "logo": "{argument name=\"website name\" default=\"YouTube\"} GB",
      "search_bar": "搜索",
      "icons": ["麦克风", "创建", "通知", "个人资料"]
    },
    "filter_bar": {
      "active_filter": "{argument name=\"active filter\" default=\"全部\"}",
      "count": 11,
      "labels": ["全部", "游戏", "音乐", "直播", "播客", "合辑", "科学", "Lo-fi", "惊悚", "最新上传", "已观看"]
    },
    "sidebar": {
      "sections": [
        { "title": "主要", "count": 3, "labels": ["首页", "Shorts", "订阅内容"] },
        { "title": "我", "count": 6, "labels": ["您的频道", "历史记录", "播放列表", "您的视频", "稍后观看", "点赞的视频"] },
        { "title": "订阅内容", "count": 8, "labels": ["Linus Tech Tips", "MrBeast", "Kurzgesagt - In a Nutshell", "ColdFusion", "3Blue1Brown", "Khan Academy", "Veritasium", "显示更多"] },
        { "title": "探索", "count": 7, "labels": ["热门", "音乐", "电影", "直播", "游戏", "新闻", "体育"] },
        { "title": "更多 YouTube 服务", "count": 3, "labels": ["YouTube Premium", "YouTube Music", "YouTube Kids"] }
      ]
    },
    "main_content": {
      "layout": "3 列 4 行网格",
      "count": 12,
      "video_cards": [
        { "title": "为什么自制 GPU 几乎是不可能的", "channel": "Linus Tech Tips", "stats": "16.4 万次观看 • 1 天前", "thumbnail": "CPU/GPU 芯片" },
        { "title": "在圆圈里生存 100 天，赢取 50 万美元", "channel": "MrBeast", "stats": "4000 万次观看 • 5 天前", "thumbnail": "身穿蓝色运动服的 MrBeast 和人群" },
        { "title": "如果我们用核弹炸毁一颗小行星会怎样？", "channel": "Kurzgesagt - In a Nutshell", "stats": "420 万次观看 • 6 小时前", "thumbnail": "导弹击中太空中的小行星" },
        { "title": "迪拜是如何成为一座 100 亿美元城市的", "channel": "ColdFusion", "stats": "160 万次观看 • 2 周前", "thumbnail": "男子与迪拜天际线" },
        { "title": "欧拉恒等式的美妙数学", "channel": "3Blue1Brown", "stats": "280 万次观看 • 3 个月前", "thumbnail": "数学公式和螺旋图" },
        { "title": "2040 年的世界 - 人口、气候及更多", "channel": "Veritasium", "stats": "770 万次观看 • 2 周前", "thumbnail": "茂密森林的航拍图" },
        { "title": "我用了 12 年 Linux，最终……", "channel": "DistroTube", "stats": "16 万次观看 • 3 天前", "thumbnail": "带有 Linux 标志的笔记本电脑和智能手机" },
        { "title": "黑洞详解 - 从诞生到死亡", "channel": "Khan Academy", "stats": "390 万次观看 • 3 个月前", "thumbnail": "发光的黑洞吸积盘" },
        { "title": "饮食建议的问题所在", "channel": "Andrew Huberman", "stats": "440 万次观看 • 6 天前", "thumbnail": "戴眼镜说话的男子" },
        { "title": "如何学习任何事物（基于证据）", "channel": "Ali Abdaal", "stats": "270 万次观看 • 3 个月前", "thumbnail": "阅读书籍的男子的矢量插图" },
        { "title": "《最后生还者 2》是一部杰作", "channel": "Naughty Dog", "stats": "230 万次观看 • 3 年前", "thumbnail": "《最后生还者》中的艾莉" },
        { "title": "lofi hip hop radio - 适合放松/学习的节拍", "channel": "Lofi Girl", "stats": "直播中", "thumbnail": "在书桌前学习的 Lofi Girl" }
      ]
    }
  },
  "taskbar": {
    "os": "Windows",
    "icons": ["开始", "搜索", "任务视图", "文件资源管理器", "Edge", "Spotify"],
    "system_tray": "08:34 2024 年 4 月 3 日"
  }
}

带入创作工作台

仅带入描述，不会自动生成。参考图与编辑模式请先上传或选中原图。

来源与说明

由 Ivan Davila 发布，经 YouMind 收录。提示词与图片权利归原作者及相应平台。

此案例需要参考图片，请在创作工作台中上传后再使用。

查看原始来源 ↗ · 作者主页

使用示例 →

把这个思路，变成下一次创作。

在 RonasAI 中开始创作 ↗