Giao diện dashboard AI coding tông tối

{
  "type": "giao diện bảng điều khiển phân tích SaaS tông tối",
  "product": {
    "brand": "{argument name="brand name" default="AICode"}",
    "theme": "giao diện kính mờ màu xanh navy tối với hiệu ứng chuyển màu tinh tế, ánh sáng tỏa dịu nhẹ, các thẻ bo tròn góc, viền mỏng, mang tính thẩm mỹ của công cụ lập trình hiện đại"
  },
  "canvas": {
    "aspect_ratio": "16:9",
    "background": "màu xanh lam nửa đêm sâu với hiệu ứng vignette mờ và ánh sáng tỏa tròn dịu nhẹ"
  },
  "layout": {
    "structure": "thanh bên trái cùng khu vực nội dung chính",
    "sections": [
      {
        "title": "Thanh bên",
        "position": "bên trái",
        "count": 8,
        "labels": ["AICode", "Overview", "Projects", "AI Assistants", "API & Usage", "Code Quality", "Team", "Settings"],
        "details": "logo ở trên cùng, mục Tổng quan được chọn với điểm nhấn màu tím, thẻ đăng ký phía dưới hiển thị Gói Pro, gia hạn sau 12 ngày, thanh tiến trình ngang ở mức 75%, hồ sơ người dùng ở dưới cùng với ảnh đại diện, {argument name="user name" default="Alex Morgan"}, và email [email protected]"
      },
      {
        "title": "Phần đầu trang",
        "position": "khu vực chính trên cùng",
        "count": 4,
        "labels": ["Chào mừng trở lại, Alex 👋", "Dưới đây là tình hình nền tảng AI coding của bạn hôm nay.", "12 tháng 5 – 12 tháng 6, 2024", "Xuất báo cáo"],
        "details": "lời chào lớn ở bên trái, bộ chọn khoảng ngày và nút xuất ở bên phải"
      },
      {
        "title": "Các thẻ chỉ số",
        "position": "hàng trên cùng dưới phần đầu trang",
        "count": 4,
        "labels": ["Total Users", "Active Projects", "API Calls", "Code Quality Score"],
        "values": ["12,842", "2,153", "1.28M", "876"],
        "details": "mỗi thẻ có một biểu tượng màu nhỏ, giá trị chính lớn, văn bản so sánh với 12 tháng 4 – 12 tháng 5, 2024, tỷ lệ phần trăm thay đổi tích cực 14.6%, 8.3%, 23.7%, 5.9%, và một biểu đồ đường thu nhỏ ở dưới cùng; các màu là tím, xanh lá, hổ phách và xanh lam"
      },
      {
        "title": "Các bảng phân tích chính",
        "position": "các hàng ở giữa và dưới cùng",
        "count": 4,
        "labels": ["API Calls Over Time", "Top Projects", "User Activity Heatmap", "Code Quality Trends"],
        "details": "Lượt gọi API theo thời gian là một biểu đồ miền rộng có menu thả xuống Hàng ngày và đường màu tím đi lên kết thúc gần mức 250K; Dự án hàng đầu là danh sách xếp hạng 5 mục với các thanh tiến trình và tỷ lệ phần trăm thay đổi; Bản đồ nhiệt hoạt động người dùng là bản đồ nhiệt hàng tuần gồm 7 hàng có nhãn giờ từ 12 AM đến 9 PM; Xu hướng chất lượng mã là biểu đồ đường có menu thả xuống Hàng tuần cùng xu hướng màu tím đi lên mượt mà từ khoảng 70 đến đầu mức 90"
      },
      {
        "title": "Danh sách dự án hàng đầu",
        "position": "bảng ở giữa bên phải",
        "count": 5,
        "labels": ["AI Code Assistant", "Smart Refactor", "Code Review Bot", "Doc Generator", "Test Builder"],
        "values": ["485K", "321K", "214K", "132K", "98K"],
        "details": "độ chênh lệch dương màu xanh lá cho bốn mục đầu tiên 12.4%, 8.7%, 3.1%, 6.8%, và độ chênh lệch âm màu đỏ -1.2% cho Test Builder; mỗi hàng có một biểu tượng hình vuông màu và một thanh tiến trình ngang mỏng"
      }
    ]
  },
  "style": {
    "visual_language": "bản dựng thiết kế sản phẩm AI và fintech cao cấp",
    "rendering": "bản dựng UI độ trung thực cao sắc nét, bóng đổ tinh tế, ánh sáng viền neon, biểu đồ chau chuốt, kiểu chữ sans-serif tinh gọn",
    "primary_accent": "{argument name="accent color" default="electric purple"}",
    "secondary_accents": ["emerald green", "amber yellow", "cyan blue"],
    "density": "giàu thông tin nhưng thoáng đãng, lưới bố cục cân đối, độ dễ đọc cao"
  }
}