深色系 AI 程式開發儀表板 UI

一款為 AI 程式開發平台設計的精緻深色模式分析儀表板，適用於 SaaS 產品設計原型、管理後台及資料豐富的網頁 UI 展示。

提示詞

{ "type": "深色系 SaaS 分析儀表板 UI", "product": { "brand": "AICode", "theme": "深海軍藍玻璃擬態介面，搭配細緻漸層、柔和光暈、圓角卡片、細邊框，以及現代開發者工具美學" }, "canvas": { "aspect_ratio": "16:9", "background": "深午夜藍，帶有淡淡的暈影與柔和的放射狀光效" }, "layout": { "structure": "左側邊欄與主內容區", "sections": [ { "title": "側邊欄", "position": "左側", "count": 8, "labels": ["AICode", "總覽", "專案", "AI Assistants", "API 與使用量", "程式碼品質", "團隊", "設定"], "details": "頂部為 Logo，選取「總覽」並以紫色高亮顯示，下方訂閱卡片顯示 Pro Plan，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 項排名的列表，附帶進度條與百分比變化；「使用者活動熱點圖」為 7 列的每週熱點圖，標註 12 AM 至 9 PM 的時間；「程式碼品質趨勢」為折線圖，附帶「每週」下拉選單，呈現從約 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": "資訊豐富但空間感充足，網格平衡，高度易讀" } }