Dashboard HTML desde datos con IA

01Qué se obtiene al final

Un dashboard web es una aplicación que transforma datos tabulares en visualizaciones interactivas accesibles desde cualquier navegador. En el enfoque que describe esta guía, ese resultado vive en un único archivo .html que no depende de servidores, bases de datos ni conexión permanente a internet.

El archivo generado incluye: un encabezado con métricas clave, seis gráficos interactivos, un panel de filtros que actualiza todas las vistas simultáneamente, un bloque de insights automáticos derivados de los propios datos, una tabla paginada con todos los registros originales y un botón que permite al usuario descargar el archivo completo desde el navegador.

02Preparación de los datos

La calidad del dashboard depende directamente de la calidad de los datos que lo alimentan. Una fuente de datos desordenada produce visualizaciones incorrectas con la misma facilidad con que produce resultados correctos cuando está limpia. Este paso no es opcional.

2.1 Formato del archivo según la herramienta

No todas las herramientas de IA procesan archivos de la misma manera. La elección del formato depende de si la herramienta dispone de módulo de análisis de datos o no.

2.2 Checklist de limpieza antes de subir

Antes de cargar el archivo, verificar que cumple estas condiciones. Cada punto que falla produce un error silencioso en el dashboard: el gráfico se genera, pero con valores incorrectos.

Los datos no limpios no producen errores visibles: producen resultados plausibles pero incorrectos. Ese es el tipo de error más costoso.

03El flujo de trabajo

El proceso completo sigue siete pasos en secuencia. Los pasos 1 y 5 son los que concentran la mayor parte del tiempo; los demás son ejecución directa una vez que los datos y el prompt están listos.

flowchart LR
  A["Datos\nlimpios"] --> B{"¿Tiene módulo\nde análisis?"}
  B -- Sí --> C["Subir\nExcel"]
  B -- No --> D["CSV / PDF\n/ texto"]
  C & D --> E["Prompt\nOSAC"]
  E --> F["Primer\noutput"]
  F --> G{"¿Requiere\najuste?"}
  G -- Sí --> H["Prompt de\najuste fino"]
  H --> F
  G -- No --> I["Descargar\nHTML"]
  I --> J["Publicar"]
  style A fill:#EFEBe4,stroke:#2A5C5A,color:#1C1917
  style E fill:#2A5C5A,stroke:#2A5C5A,color:#F9F6F1
  style I fill:#EFEBe4,stroke:#2A5C5A,color:#1C1917
  style J fill:#EFEBe4,stroke:#2A5C5A,color:#1C1917
    

04El prompt OSAC

El prompt está estructurado en cuatro bloques: Rol, Objetivo, Salida, Advertencias y Contexto. Cada bloque reduce la ambigüedad en una dimensión diferente y hace que el resultado sea predecible y repetible. El único dato que cambia entre usos es el archivo adjunto y los detalles del contexto.

4.1 Plantilla base

ROL
Eres un desarrollador frontend experto en visualización de datos
y diseño moderno de dashboards web.

OBJETIVO
Crear un dashboard financiero completo en un único archivo HTML
autocontenido, a partir de los datos del documento adjunto.
El dashboard debe permitir analizar ingresos, egresos y el balance
general de un profesional independiente de forma visual, clara
y profesional.

SALIDA
Un archivo HTML monolítico que incluya todo el CSS y JavaScript
embebido, con las siguientes secciones:

- Encabezado con título, rango de fechas y resumen estadístico:
  total ingresos, total egresos, balance neto y cantidad de
  transacciones.
- Panel de filtros por tipo (ingreso/egreso), por categoría
  y por rango de fechas.
- Seis gráficos: ingresos vs egresos por mes, distribución por
  categoría, evolución del balance acumulado, métodos de pago
  más usados, top 5 categorías de gasto, y comparativa de
  ingresos por tipo de proyecto.
- Panel de insights automáticos con al menos tres observaciones
  clave derivadas de los datos.
- Tabla completa paginada, 10 registros por página, con todos
  los campos originales.
- Botón de descarga en la sección inferior que guarde el propio
  archivo HTML completo con datos y código embebidos.

ADVERTENCIAS
- No omitas ningún registro. La tabla debe mostrar todos los datos.
- El botón de descarga debe generar el archivo con datos y código
  ya embebidos, sin depender de una URL externa.
- Los filtros deben actualizar simultáneamente los gráficos,
  el resumen estadístico y la tabla.

CONTEXTO
Los datos corresponden al registro de ingresos y egresos de un
freelancer. Las columnas son: id, fecha, tipo, categoría,
descripción, monto y método de pago.

Estilo visual glassmorfismo: fondos con efecto cristal translúcido,
gradientes oscuros en el fondo general, bordes con opacidad y
sombras suaves. Animaciones de entrada al cargar la página.
Paleta azul eléctrico y violeta con fondo oscuro.
Diseño profesional para pantalla de escritorio.
Aplica los colores corporativos presentes en los datos
si los hubiera.

4.2 Segundo prompt: ajuste fino

El primer output raramente es el final. El segundo prompt no regenera desde cero: parte del código ya generado y aplica modificaciones puntuales. Esta distinción es importante porque preserva toda la lógica funcional y solo modifica lo que se indica.

Mantén toda la funcionalidad y todos los datos.
Aplica únicamente los siguientes cambios:

[Describir el cambio específico. Ejemplos:]
- Cambia la paleta de colores a tonos verdes corporativos.
- Agranda el gráfico de barras de ingresos vs egresos.
- Reorganiza el panel de insights para que aparezca
  antes de los gráficos.
- Agrega un gráfico adicional de evolución semanal.

05Publicación y distribución

El archivo HTML generado es completamente portátil. No requiere servidor, no requiere base de datos y funciona desde cualquier dispositivo con navegador. Las tres opciones de distribución más prácticas son las siguientes.

06Adaptaciones del prompt para otros casos

El prompt de la sección 04 es una plantilla reutilizable. Los cuatro puntos de variación que determinan el resultado son el tipo de profesional en el Objetivo, las columnas de los datos en el Contexto, los gráficos requeridos en la Salida, y la paleta de colores en el Contexto. Todo lo demás puede permanecer igual.