Interfaccia utente del pannello di controllo di programmazione Dark AI

{ "type": "Interfaccia utente del dashboard di analisi SaaS scuro", "product": { "brand": "{argument name=\"nome del marchio\" default=\"AICode\"}", "theme": "L'interfaccia presenta una texture di vetro smerigliato blu navy intenso con sfumature delicate, illuminazione soffusa, schede arrotondate e bordi sottili, incarnando l'estetica degli strumenti di sviluppo moderni." }, "canvas": { "aspect_ratio": "16:9", "background": "Blu notte intenso, con vignettatura delicata ed effetti di illuminazione radiale soffusa." }, "layout": { "structure": "Barra laterale sinistra più area di contenuto principale", "sections": [ { "title": "Barra laterale", "position": "Lato sinistro", "count": 8, "labels": [ "AICode", "Panoramica", "progetto", "Assistenti AI", "API e utilizzo", "Qualità del codice", "team", "configurazione" ], "details": "Il logo viene visualizzato in alto e "Panoramica" viene evidenziato in viola quando selezionato. La scheda di abbonamento in basso mostra il piano Pro, che scade tra 12 giorni. Una barra di avanzamento orizzontale mostra il 75%. Il profilo utente in basso include un avatar.{argument name=\"nome utente\" default=\"Alex Morgan\"} e l'indirizzo email [email protected]" }, { "title": "Intestazione", "position": "Area principale superiore", "count": 4, "labels": [ "Bentornato, Alex 👋", "Questo è l'aggiornamento di oggi dal tuo Piattaforma di programmazione AI.", "12 maggio 2024 - 12 giugno 2024", "Esportazione del rapporto" ], "dettagli": "Il lato sinistro presenta un grande saluto, mentre il lato destro mostra un selettore di intervallo di date e un pulsante di esportazione." }, { "title": "Scheda indicatore", "position": "Prima riga sotto l'intestazione", "count": 4, "labels": [ "Numero totale di utenti", "Progetti attivi", "Volume di chiamate API", "Valutazione della qualità del codice" ], "values": [ "12.842", "2.153", "1,28 milioni", "876" ], "details": "Ogni scheda include una piccola icona, un grande valore principale e un testo che confronta il periodo dal 12 aprile al 12 maggio 2024, mostrando percentuali di crescita positive rispettivamente del 14,6%, 8,3%, 23,7% e 5,9%. In basso viene visualizzato un mini grafico a linee; i colori sono viola, verde, ambra e blu." }, { "title": "Pannello di analisi principale", "position": "Righe centrale e inferiore", "count": 4, "labels": [ "Andamento delle chiamate API", "Progetti popolari", "Mappa di calore dell'attività degli utenti", "Andamento della qualità del codice" ], "details": "Il grafico \"Andamento delle chiamate API\" è un grafico ad area ampia con un menu a discesa \"Giornaliero\"; la linea viola mostra un trend ascendente, che termina vicino a 250.000. \"Elementi popolari\" è un elenco di 5 elementi con barre di avanzamento e variazioni percentuali. La \"Mappa di calore dell'attività degli utenti\" è una mappa di calore settimanale a 7 righe con etichette orarie dalle 12:00 alle 21:00. Il grafico \"Andamento della qualità del codice\" è un grafico a linee con un menu a discesa \"Settimanale\"; la curva viola sale gradualmente, da circa 70 a poco più di 90." }, { "title": "Elenco dei progetti più popolari", "position": "Pannello centrale destro", "count": 5, "labels": [ "Assistente codice AI", "Refattorizzazione intelligente", "Bot di revisione del codice", "Generatore di documentazione", "Costruttore di test" ], "values": [ "485K", "321K", "214K", "132K", "98K" ], "details": "I primi quattro elementi hanno mostrato una crescita positiva in verde, rispettivamente del 12,4%, 8,7%, 3,1% e 6,8%, mentre il Costruttore di test ha mostrato una crescita negativa in rosso, pari a -1,2%; ogni riga aveva un'icona quadrata colorata e una sottile barra di avanzamento orizzontale." } ] }, "style": { "visual_language": "Prototipo di design di un prodotto di tecnologia finanziaria di fascia alta e IA", "rendering": "Un prototipo di interfaccia utente chiaro e ad alta fedeltà, ombre sottili, effetti di illuminazione dei bordi al neon, grafici squisiti e un carattere sans-serif pulito.", "primary_accent": "{argument name=\"accent color\" default=\"Electric Violet\"}", "secondary_accents": [ "Smeraldo Verde", "Giallo Ambra", "Ciano" ], "density": "Ricco di informazioni e spazialmente bilanciato, con una griglia ben bilanciata e un'elevata leggibilità." } }