ダークモード AI コーディングダッシュボード UI

AI コーディングプラットフォーム向けの洗練されたダークモード分析ダッシュボード。SaaS プロダクトデザインのモックアップ、管理パネル、データ豊富な Web UI プレゼンテーションに最適です。
プロンプト
{
"type": "ダーク SaaS 分析ダッシュボード UI",
"product": {
"brand": "AICode",
"theme": "ダークネイビーブルーのグラスモーフィズムインターフェース、繊細なグラデーション、柔らかな光、角丸カード、細い境界線、モダンな開発者ツール風の美学"
},
"canvas": {
"aspect_ratio": "16:9",
"background": "かすかなビネットと柔らかな放射状の照明を施したディープミッドナイトブルー"
},
"layout": {
"structure": "左サイドバーとメインコンテンツエリア",
"sections": [
{
"title": "サイドバー",
"position": "左",
"count": 8,
"labels": ["AICode", "概要", "プロジェクト", "AI アシスタント", "API & 使用量", "コード品質", "チーム", "設定"],
"details": "上部にロゴ、紫色のハイライトで「概要」が選択状態、下部に Pro プランを表示するサブスクリプションカード(更新まで 12 日、水平プログレスバー 75%)、最下部にアバター付きユーザープロフィール、Alex Morgan、メールアドレス [email protected]"
},
{
"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 項目のランキングリスト。「ユーザーアクティビティヒートマップ」は午前 12 時から午後 9 時までの時間ラベル付きの 7 行の週間ヒートマップ。「コード品質の傾向」は週次ドロップダウン付きのラインチャートで、約 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": "上位 4 項目は緑色のプラス変化(12.4%、8.7%、3.1%、6.8%)、Test Builder は赤色のマイナス変化(-1.2%)。各行にカラーの四角いアイコンと細い水平プログレスバー"
}
]
},
"style": {
"visual_language": "プレミアムなフィンテックおよび AI プロダクトデザインのモックアップ",
"rendering": "鮮明で高精細な UI モックアップ、繊細な影、ネオンエッジ照明、洗練されたチャート、クリーンなサンセリフ体",
"primary_accent": "electric purple",
"secondary_accents": ["エメラルドグリーン", "アンバーイエロー", "シアンブルー"],
"density": "情報豊富でありながら広々とした、バランスの取れたグリッド、高い視認性"
}
}
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
GPT Image 2 に対応したプラットフォーム(YouMind など)を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の 画像 プロンプトがあり、すべて自由にコピーして使えます。
ほかの 画像 プロンプトを見るその他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。





