Copy-ready prompt
{ "type": "Dark SaaS Analytics Dashboard UI", "product": { "brand": "{argument name=\"brand name\" default=\"AICode\"}", "theme": "The interface features a deep navy blue frosted glass texture with subtle gradients, soft lighting, rounded cards, and thin borders, embodying modern developer tool aesthetics." }, "canvas": { "aspect_ratio": "16:9", "background": "Deep midnight blue, with subtle vignetting and soft radial lighting effects." }, "layout": { "structure": "Left sidebar plus main content area", "sections": [ { "title": "Sidebar", "position": "Left side", "count": 8, "labels": [ "AICode", "Overview", "project", "AI Assistants", "API and Usage", "Code quality", "team", "set up" ], "details": "The logo is displayed at the top, and \"Overview\" is highlighted in purple when selected. The subscription card at the bottom shows the Pro Plan, which expires in 12 days. A horizontal progress bar shows 75%. The user profile at the bottom includes an avatar.{argument name=\"user name\" default=\"Alex Morgan\"} and email address [email protected]" }, { "title": "Header", "position": "Top Main Area", "count": 4, "labels": [ "Welcome back, Alex 👋", "This is today's update from your AI programming platform.", "May 12, 2024 – June 12, 2024", "Export Report" ], "details": "The left side features a large greeting, while the right side displays a date range selector and an export button." }, { "title": "Indicator Card", "position": "First line below the header", "count": 4, "labels": [ "Total number of users", "Active projects", "API call volume", "Code quality rating" ], "values": [ "12,842", "2,153", "1.28M", "876" ], "details": "Each card includes a small icon, a large main value, and text comparing the period from April 12th to May 12th, 2024, showing positive growth percentages of 14.6%, 8.3%, 23.7%, and 5.9%, respectively. A mini line chart is displayed at the bottom; the colors are purple, green, amber, and blue." }, { "title": "Main analysis panel", "position": "Middle and bottom rows", "count": 4, "labels": [ "API call trends", "Popular Projects", "User activity heatmap", "Code quality trends" ], "details": "The \"API Call Trends\" chart is a wide area graph with a \"Daily\" dropdown menu; the purple line shows an upward trend, ending near 250K. \"Popular Items\" is a ranking list of 5 items, with progress bars and percentage changes. The \"User Activity Heatmap\" is a 7-row weekly heatmap with hourly labels from 12 PM to 9 PM. The \"Code Quality Trends\" chart is a line graph with a \"Weekly\" dropdown menu; the purple curve rises smoothly, from approximately 70 to just over 90." }, { "title": "Popular Projects List", "position": "Middle right panel", "count": 5, "labels": [ "AI Code Assistant", "Smart Refactor", "Code Review Bot", "Doc Generator", "Test Builder" ], "values": [ "485K", "321K", "214K", "132K", "98K" ], "details": "The first four items showed positive growth in green, at 12.4%, 8.7%, 3.1%, and 6.8% respectively, while Test Builder showed negative growth in red, at -1.2%; each row had a colored square icon and a thin horizontal progress bar." } ] }, "style": { "visual_language": "High-end financial technology and AI product design prototype", "rendering": "A clear, high-fidelity UI prototype, subtle shadows, neon edge lighting effects, exquisite charts, and a clean sans-serif font.", "primary_accent": "{argument name=\"accent color\" default=\"Electric Violet\"}", "secondary_accents": [ "Emerald Green", "Amber Yellow", "Cyan" ], "density": "Information-rich and spatially balanced, with a well-balanced grid and high readability." } }
Prompt breakdown
{ "type": "Dark SaaS Analytics Dashboard UI", "product": { "brand": "{argument name=\"brand name\" default=\"AICode\"}", "theme": "The interface features a deep navy blue frosted glass texture with subtle gradients, soft lighting, rounded cards, and thin borders, embodying modern developer tool aesthetics." }, "canvas": { "aspect_ratio": "16:9", "background": "Deep midnight blue, with subtle vignetting and soft radial lighting effects." }, "layout": { "structure": "Left sidebar plus main content area", "sections": [ { "title": "Sidebar", "position": "Left side", "count": 8, "labels": [ "AICode", "Overview", "project", "AI Assistants", "API and Usage", "Code quality", "team", "set up" ], "details": "The logo is displayed at the top, and \"Overview\" is highlighted in purple when selected.
The subscription card at the bottom shows the Pro Plan, which expires in 12 days.
A horizontal progress bar shows 75%.
The user profile at the bottom includes an avatar.{argument name=\"user name\" default=\"Alex Morgan\"} and email address [email protected]" }, { "title": "Header", "position": "Top Main Area", "count": 4, "labels": [ "Welcome back, Alex 👋", "This is today's update from your AI programming platform.", "May 12, 2024 – June 12, 2024", "Export Report" ], "details": "The left side features a large greeting, while the right side displays a date range selector and an export button." }, { "title": "Indicator Card", "position": "First line below the header", "count": 4, "labels": [ "Total number of users", "Active projects", "API call volume", "Code quality rating" ], "values": [ "12,842", "2,153", "1.28M", "876" ], "details": "Each card includes a small icon, a large main value, and text comparing the period from April 12th to May 12th, 2024, showing positive growth percentages of 14.6%, 8.3%, 23.7%, and 5.9%, respectively.









