黑暗AI编码仪表板UI

A polished dark-mode analytics dashboard for an AI coding platform, suitable for SaaS product design mockups, admin panels, and data-rich web UI presentations.

{
  "type": "暗色SaaS分析仪表板用户接口",
  "product": {
    "brand": "{argument name=\"brand name\" default=\"AICode\"}",
    "theme": "深海军蓝玻璃拟态接口，带有细微渐层、柔和发光、圆角卡片、细边框、现代开发者工具美学"
  },
  "canvas": {
    "aspect_ratio": "16:9",
    "background": "深午夜蓝，带有轻微晕影和柔和的放射状照明"
  },
  "layout": {
    "structure": "左侧边栏加主要内容区域",
    "sections": [
      {
        "title": "边栏",
        "position": "左侧",
        "count": 8,
        "labels": ["AICode", "概览", "项目", "AI 助理", "API 和使用量", "代码品质", "团队", "设置"],
        "details": "顶部有标志，概览以紫色高亮选中，下方订阅卡片显示 Pro 方案，12天后续订，水平进度条在75%，底部有用户文件，头像为 {argument name=\"user name\" default=\"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 代码助理", "智能重构", "代码审查机器人", "文档产生器", "测试创建器"],
        "values": ["485K", "321K", "214K", "132K", "98K"],
        "details": "前四项有绿色正增量12.4%、8.7%、3.1%、6.8%，测试创建器有红色负增量-1.2%；每行有一个彩色方形图标和细水平进度条"
      }
    ]
  },
  "style": {
    "visual_language": "高级金融科技和AI产品设计模型",
    "rendering": "清晰高保真用户接口模型，细微阴影，霓虹边缘照明，精致图表，干净无衬线排版",
    "primary_accent": "{argument name=\"accent color\" default=\"电紫色\"}",
    "secondary_accents": ["翠绿色", "琥珀黄", "青蓝色"],
    "density": "信息丰富但宽敞，平衡网格，高度易读"
  }
}

机器翻译 — 实际生成作品的是原文提示词。

✨ 生成 收藏 复制提示词 分享 原始帖子 在 Hitboard 打开