Dark Mode AI Programming Dashboard UI

Back to inspiration

1 / 1

Dark Mode AI Programming Dashboard UI

Source: 轩辕的编程宇宙

UI Designopenai/gpt-image-2#UI Design#Horizontal 16:9#UI Design#ux#interface

An elegant midnight-blue SaaS analytics UI with neon accents for AI development platforms.

3.0wpeople using it

4:5Recommended size

1.0wSaves

Prompt template

{
  "type": "深色 SaaS 分析仪表盘 UI",
  "product": {
    "brand": "AICode",
    "theme": "深海军蓝磨砂玻璃质感界面，带有微妙的渐变、柔和光晕、圆角卡片、细边框，现代开发者工具美学"
  },
  "canvas": {
    "aspect_ratio": "16:9",
    "background": "深午夜蓝，带有淡淡的暗角和柔和的径向光效"
  },
  "layout": {
    "structure": "左侧边栏加主内容区域",
    "sections": [
      {
        "title": "侧边栏",
        "position": "左侧",
        "count": 8,
        "labels": [
          "AICode",
          "概览",
          "项目",
          "AI Assistants",
          "API 与使用情况",
          "代码质量",
          "团队",
          "设置"
        ],
        "details": "顶部显示 Logo，选中“概览”并带有紫色高亮，底部订阅卡片显示 Pro Plan，12 天后到期，水平进度条显示 75%，底部用户个人资料包含头像、Alex Morgan 以及邮箱 alex@morgan.dev"
      },
      {
        "title": "页眉",
        "position": "顶部主区域",
        "count": 4,
        "labels": [
          "欢迎回来，Alex 👋",
          "这是您 AI 编程平台今日的动态。",
          "2024 年 5 月 12 日 – 6 月 12 日",
          "导出报告"
        ],
        "details": "左侧为大号问候语，右侧为日期范围选择器和导出按钮"
      },
      {
        "title": "指标卡片",
        "position": "页眉下方第一行",
        "count": 4,
        "labels": [
          "总用户数",
          "活跃项目",
          "API 调用量",
          "代码质量评分"
        ],
        "values": [
          "12,842",
          "2,153",
          "1.28M",
          "876"
        ],
        "details": "每张卡片包含一个小图标、大号主数值，以及与 2024 年 4 月 12 日 – 5 月 12 日的对比文本，正向增长百分比分别为 14.6%、8.3%、23.7%、5.9%，底部带有迷你折线图；颜色分别为紫色、绿色、琥珀色和蓝色"
      },
      {
        "title": "主要分析面板",
        "position": "中间和底部行",
        "count": 4,
        "labels": [
          "API 调用趋势",
          "热门项目",
          "用户活跃热力图",
          "代码质量趋势"
        ],
        "details": "“API 调用趋势”为宽幅面积图，带有“每日”下拉菜单，紫色折线呈上升趋势，终点接近 250K；“热门项目”为包含 5 个项目的排名列表，带有进度条和百分比变化；“用户活跃热力图”为 7 行周热力图，带有从上午 12 点到晚上 9 点的小时标签；“代码质量趋势”为折线图，带有“每周”下拉菜单，紫色曲线平滑上升，从约 70 升至 90 出头"
      },
      {
        "title": "热门项目列表",
        "position": "中间右侧面板",
        "count": 5,
        "labels": [
          "AI Code Assistant",
          "Smart Refactor",
          "Code Review Bot",
          "Doc Generator",
          "Test Builder"
        ],
        "values": [
          "485K",
          "321K",
          "214K",
          "132K",
          "98K"
        ],
        "details": "前四项的绿色正向增长分别为 12.4%、8.7%、3.1%、6.8%，Test Builder 为红色负增长 -1.2%；每一行都有一个彩色方形图标和细水平进度条"
      }
    ]
  },
  "style": {
    "visual_language": "高端金融科技与 AI 产品设计原型",
    "rendering": "清晰的高保真 UI 原型，微妙的阴影，霓虹边缘光效，精致的图表，简洁的无衬线字体",
    "primary_accent": "电光紫",
    "secondary_accents": [
      "翡翠绿",
      "琥珀黄",
      "青蓝色"
    ],
    "density": "信息丰富且空间感强，网格平衡，高度易读"
  }
}