Interfaz de usuario del panel de codificación de IA oscura

{ "type": "Interfaz de usuario de panel de análisis SaaS oscuro", "product": { "brand": "{argument name=\"brand name\" default=\"AICode\"}", "theme": "La interfaz presenta una textura de vidrio esmerilado azul marino intenso con degradados sutiles, iluminación suave, tarjetas redondeadas y bordes delgados, que encarnan la estética de las herramientas de desarrollo modernas." }, "canvas": { "aspect_ratio": "16:9", "background": "Azul medianoche intenso, con viñeteado sutil y efectos de iluminación radial suave." }, "layout": { "structure": "Barra lateral izquierda más área de contenido principal", "sections": [ { "title": "Barra lateral", "position": "Lado izquierdo", "count": 8, "labels": [ "AICode", "Descripción general", "proyecto", "Asistentes de IA", "API y uso", "Calidad del código", "equipo", "configuración" ], "details": "El logotipo se muestra en la parte superior y "Descripción general" se resalta en púrpura cuando se selecciona. La tarjeta de suscripción en la parte inferior muestra el Plan Pro, que vence en 12 días. Una barra de progreso horizontal muestra el 75%. El perfil de usuario en la parte inferior incluye un avatar.{argument name=\"nombre de usuario\" default=\"Alex Morgan\"} y la dirección de correo electrónico [email protected]" }, { "title": "Encabezado", "position": "Área principal superior", "count": 4, "labels": [ "Bienvenido de nuevo, Alex 👋", "Este es Actualización de hoy de su plataforma de programación de IA.", "12 de mayo de 2024 – 12 de junio de 2024", "Informe de exportación" ], "detalles": "El lado izquierdo presenta un gran saludo, mientras que el lado derecho muestra un selector de rango de fechas y un botón de exportación." }, { "title": "Tarjeta indicadora", "position": "Primera línea debajo del encabezado", "count": 4, "labels": [ "Número total de usuarios", "Proyectos activos", "Volumen de llamadas a la API", "Calificación de calidad del código" ], "values": [ "12.842", "2.153", "1,28M", "876" ], "details": "Cada tarjeta incluye un pequeño icono, un valor principal grande y un texto que compara el período del 12 de abril al 12 de mayo de 2024, mostrando porcentajes de crecimiento positivos del 14,6%, 8,3%, 23,7% y 5,9%, respectivamente. En la parte inferior se muestra un mini gráfico de líneas; los colores son morado, verde, ámbar y azul." }, { "title": "Panel de análisis principal", "position": "Filas media e inferior", "count": 4, "labels": [ "Tendencias de llamadas a la API", "Proyectos populares", "Mapa de calor de la actividad del usuario", "Tendencias de la calidad del código" ], "details": "El gráfico "Tendencias de llamadas a la API" es un gráfico de área amplia con un menú desplegable "Diario"; la línea morada muestra una tendencia ascendente, que termina cerca de 250K. "Elementos populares" es una lista de clasificación de 5 elementos, con barras de progreso y cambios porcentuales. El "Mapa de calor de la actividad del usuario" es un mapa de calor semanal de 7 filas con etiquetas horarias de 12 PM a 9 PM. El gráfico "Tendencias de la calidad del código" es un gráfico de líneas con un menú desplegable "Semanal"; la curva morada aumenta suavemente, de aproximadamente 70 a poco más de 90." }, { "title": "Lista de proyectos populares", "position": "Panel central derecho", "count": 5, "labels": [ "Asistente de código de IA", "Refactorización inteligente", "Bot de revisión de código", "Generador de documentación", "Creador de pruebas" ], "values": [ "485K", "321K", "214K", "132K", "98K" ], "details": "Los primeros cuatro elementos mostraron un crecimiento positivo en verde, del 12,4%, 8,7%, 3,1% y 6,8% respectivamente, mientras que el Creador de pruebas mostró un crecimiento negativo en rojo, del -1,2%; cada fila tenía un icono cuadrado de color y una delgada barra de progreso horizontal." } ] }, "style": { "visual_language": "Prototipo de diseño de producto de tecnología financiera e IA de alta gama", "rendering": "Un prototipo de interfaz de usuario claro y de alta fidelidad, sombras sutiles, efectos de iluminación de borde neón, gráficos exquisitos y una fuente sans-serif limpia.", "primary_accent": "{argument name=\"accent color\" default=\"Electric Violet\"}", "secondary_accents": [ "Emerald Green", "Amber Yellow", "Cyan" ], "density": "Rico en información y equilibrado espacialmente, con una cuadrícula bien equilibrada y alta legibilidad." } }