Dark AI Coding Dashboard 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分析ダッシュボードUI",
  "product": {
    "brand": "{argument name=\"brand name\" default=\"AICode\"}",
    "theme": "ダークネイビーブルのグラスモーフィズムインターフェース、微妙なグラデーション、ソフトグロー、丸みのあるカード、細いボーダー、モダンな開発ツール美学"
  },
  "canvas": {
    "aspect_ratio": "16:9",
    "background": "ディープミッドナイトブルー、淡いビネットとソフトラジアルライティング"
  },
  "layout": {
    "structure": "左サイドバーとメインコンテンツエリア",
    "sections": [
      {
        "title": "サイドバー",
        "position": "left",
        "count": 8,
        "labels": ["AICode", "概要", "プロジェクト", "AIアシスタント", "API＆使用量", "コード品質", "チーム", "設定"],
        "details": "上部にロゴ、概要が紫ハイライトで選択済み、下部にサブスクリプションカードでProプラン、12日後に更新、水平プログレスバー75%、下部にユーザープロファイルでアバター、{argument name=\"user name\" default=\"Alex Morgan\"}、メールalex@morgan.dev"
      },
      {
        "title": "ヘッダー",
        "position": "top main area",
        "count": 4,
        "labels": ["おかえりなさい、Alex 👋", "今日のAIコーディングプラットフォームの様子です。", "2024年5月12日 – 6月12日", "レポートをエクスポート"],
        "details": "左に大きな挨拶、右に日付範囲ピッカーとエクスポートボタン"
      },
      {
        "title": "指標カード",
        "position": "top row under header",
        "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": "middle and bottom rows",
        "count": 4,
        "labels": ["時系列API呼び出し", "トッププロジェクト", "ユーザーアクティビティヒートマップ", "コード品質トレンド"],
        "details": "時系列API呼び出しは、日次ドロップダウンと上昇する紫線が250K付近で終わるワイドエリアチャート；トッププロジェクトは、プログレスバーと変化率を持つ5項目のランキングリスト；ユーザーアクティビティヒートマップは、午前12時から午後9時までの時間ラベルを持つ7行週間ヒートマップ；コード品質トレンドは、週次ドロップダウンと約70から90前後の上昇する紫トレンドのスムーズな折れ線チャート"
      },
      {
        "title": "トッププロジェクトリスト",
        "position": "middle right panel",
        "count": 5,
        "labels": ["AIコードアシスタント", "スマートリファクタ", "コードレビューボット", "ドキュメントジェネレーター", "テストビルダー"],
        "values": ["485K", "321K", "214K", "132K", "98K"],
        "details": "最初の4項目に緑のプラスデルタ12.4%、8.7%、3.1%、6.8%、テストビルダーに赤のマイナスデルタ-1.2%；各行にカラースクエアイコンと細い水平プログレスバー"
      }
    ]
  },
  "style": {
    "visual_language": "プレミアムフィンテックおよびAI製品設計モックアップ",
    "rendering": "鮮明な高忠実度UIモックアップ、微妙なシャドウ、ネオンエッジライティング、磨かれたチャート、クリーンなサンセリフタイポグラフィ",
    "primary_accent": "{argument name=\"accent color\" default=\"エレクトリックパープル\"}",
    "secondary_accents": ["エメラルドグリーン", "アンバーイエロー", "シアンブルー"],
    "density": "情報豊富だが広々として、バランスの取れたグリッド、高度に可読"
  }
}

機械翻訳 — この作品を生成したのは元のプロンプトです。

✨ 生成 保存 プロンプトをコピー 共有 元の投稿 Hitboard で開く