Interface utilisateur du tableau de bord de codage Dark AI

{ "type": "Interface utilisateur du tableau de bord analytique Dark SaaS", "product": { "brand": "{argument name=\"nom de la marque\" default=\"AICode\"}", "theme": "L'interface présente une texture de verre dépoli bleu marine profond avec des dégradés subtils, un éclairage doux, des cartes arrondies et des bordures fines, incarnant l'esthétique des outils de développement modernes." }, "canvas": { "aspect_ratio": "16:9", "background": "Bleu nuit profond, avec un vignettage subtil et des effets d'éclairage radial doux." }, "layout": { "structure": "Barre latérale gauche et zone de contenu principal", "sections": [ { "title": "Barre latérale", "position": "Côté gauche", "count": 8, "labels": [ "AICode", "Aperçu", "projet", "Assistants IA", "API et utilisation", "Qualité du code", "équipe", "configuration" ], "details": "Le logo s'affiche en haut et « Aperçu » est mis en surbrillance en violet lorsqu'il est sélectionné. La carte d'abonnement en bas affiche le forfait Pro, qui expire dans 12 jours. Une barre de progression horizontale indique 75 %. Le profil utilisateur en bas comprend un avatar.{argument name=\"nom d'utilisateur\" default=\"Alex Morgan\"} et l'adresse e-mail [email protected]" }, { "title": "En-tête", "position": "Zone principale supérieure", "count": 4, "labels": [ "Bienvenue à nouveau, Alex 👋", "Voici la mise à jour du jour de votre plateforme de programmation IA.", "Mai 12, 2024 – 12 juin 2024", "Rapport d'exportation" ], "détails" : "Le côté gauche présente un grand message de bienvenue, tandis que le côté droit affiche un sélecteur de plage de dates et un bouton d'exportation." }, { "title": "Carte indicateur", "position": "Première ligne sous l'en-tête", "count": 4, "labels": [ "Nombre total d'utilisateurs", "Projets actifs", "Volume d'appels API", "Évaluation de la qualité du code" ], "values": [ "12 842", "2 153", "1,28 M", "876" ], "details": "Chaque carte comprend une petite icône, une valeur principale et un texte comparant la période du 12 avril au 12 mai 2024, affichant des pourcentages de croissance positifs de 14,6 %, 8,3 %, 23,7 % et 5,9 %, respectivement. Un mini-graphique linéaire est affiché en bas ; les couleurs sont le violet, le vert, l'orange et le bleu." }, { "title": "Panneau d'analyse principal", "position": "Lignes du milieu et du bas", "count": 4, "labels": [ "Tendances des appels API", "Projets populaires", "Carte thermique de l'activité utilisateur", "Tendances de la qualité du code" ], "details": "Le graphique « Tendances des appels API » est un graphique à grande échelle avec un menu déroulant « Quotidien » ; la ligne violette indique une tendance à la hausse, se terminant aux alentours de 250 000. « Éléments populaires » est une liste de classement de 5 éléments, avec des barres de progression et des variations en pourcentage. La « Carte thermique de l'activité utilisateur » est une carte thermique hebdomadaire à 7 lignes avec des étiquettes horaires de 12 h à 21 h. Le graphique « Tendances de la qualité du code » est un graphique linéaire avec un menu déroulant « Hebdomadaire » ; la courbe violette monte progressivement, d'environ 70 à un peu plus de 90." }, { "title": "Liste des projets populaires", "position": "Panneau central droit", "count": 5, "labels": [ "Assistant de code IA", "Refactorisation intelligente", "Bot de revue de code", "Générateur de documentation", "Créateur de tests" ], "values": [ "485K", "321K", "214K", "132K", "98K" ], "details": "Les quatre premiers éléments ont affiché une croissance positive en vert, respectivement de 12,4 %, 8,7 %, 3,1 % et 6,8 %, tandis que le Créateur de tests a affiché une croissance négative en rouge, à -1,2 % ; chaque ligne comportait une icône carrée colorée et une fine barre de progression horizontale." } ] }, "style": { "visual_language": "Prototype de conception de produit haut de gamme en technologies financières et IA", "rendering": "Un prototype d'interface utilisateur clair et haute fidélité, des ombres subtiles, des effets de lumière néon sur les bords, des graphiques raffinés et une police sans empattement épurée.", "primary_accent": "{argument name=\"accent color\" default=\"Electric Violet\"}", "secondary_accents": [ "Vert émeraude", "Jaune ambre", "Cyan" ], "density": "Riche en informations et spatialement équilibré, avec une grille bien équilibrée et une grande lisibilité." } }