深色模式 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": "資訊密集且富有留白，平衡的模組化柵格，極高可讀性"
  }
}