暗黑模式 AI 数据分析看板

{
  "type": "暗色 SaaS 数据分析看板 UI",
  "product": {
    "brand": "[AICode]",
    "theme": "深海蓝毛玻璃拟态界面，微渐变，柔和发光，圆角卡片，精致细边框，现代开发者工具美学"
  },
  "canvas": {
    "aspect_ratio": "16:9",
    "background": "深邃午夜蓝背景，带有微弱暗角和柔和径向光照"
  },
  "layout": {
    "structure": "左侧边栏搭配主内容区",
    "sections": [
      {
        "title": "侧边栏",
        "position": "左侧",
        "count": 8,
        "labels": [
          "AICode",
          "Overview",
          "Projects",
          "AI Assistants",
          "API & Usage",
          "Code Quality",
          "Team",
          "Settings"
        ],
        "details": "顶部放置 Logo，Overview 选项带紫色高亮选中态，下方订阅卡片显示 Pro Plan、12天后续费、75%水平进度条，底部为包含头像的用户信息、[Alex Morgan] 以及邮箱 alex@morgan.dev"
      },
      {
        "title": "顶栏",
        "position": "主内容区顶部",
        "count": 4,
        "labels": [
          "Welcome back, Alex 👋",
          "Here's what's happening with your AI coding platform today.",
          "May 12 – Jun 12, 2024",
          "Export Report"
        ],
        "details": "左侧大号欢迎问候语，右侧为日期范围筛选器和导出报表按钮"
      },
      {
        "title": "核心指标卡片",
        "position": "顶栏下方第一排",
        "count": 4,
        "labels": [
          "Total Users",
          "Active Projects",
          "API Calls",
          "Code Quality Score"
        ],
        "values": [
          "12,842",
          "2,153",
          "1.28M",
          "876"
        ],
        "details": "每张卡片含彩色小图标、醒目核心数值、对比文本 vs Apr 12 – May 12, 2024、正向增长百分比 14.6%、8.3%、23.7%、5.9% 以及底部微型折线走势图；强调色分别为紫、绿、琥珀与蓝"
      },
      {
        "title": "主要分析图表面板",
        "position": "中层及底层区域",
        "count": 4,
        "labels": [
          "API Calls Over Time",
          "Top Projects",
          "User Activity Heatmap",
          "Code Quality Trends"
        ],
        "details": "API Calls Over Time 为宽幅面积图，带 Daily 下拉框及上升至接近 250K 的紫色折线；Top Projects 为带进度条和增减百分比的5项排名列表；User Activity Heatmap 为7行周活跃热力图，标有 12 AM 至 9 PM 时间标签；Code Quality Trends 为折线图，带 Weekly 下拉框和从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": "信息密集且富有留白，平衡的模块化栅格，极高可读性"
  }
}