Cómo Construir un Dashboard SaaS con VULK

Actualizado el 17 de julio de 2026 — renovado con datos verificados de la plataforma; los prompts de abajo son las versiones probadas.

¿Cómo se construye un dashboard SaaS con VULK?

La respuesta completa: empieza con un prompt detallado que especifique el layout (ancho de la sidebar, header, área de contenido), los elementos de navegación, las tarjetas de estadísticas con números reales, los tipos de gráficos y las columnas de la tabla — VULK genera un proyecto Vite + React + TypeScript + Tailwind completo con Recharts conectado, corriendo en una vista previa en vivo en menos de dos minutos. Luego construyes el resto con prompts de seguimiento ordenados: autenticación, interactividad de los gráficos, ordenación/filtros/exportación CSV de la tabla, páginas adicionales (Proyectos, Ajustes) y pulido (sidebar responsiva, skeletons, estados vacíos, modo oscuro). Despliega a Cloudflare Pages con un clic. Este artículo te da todos los prompts, listos para copiar, en el orden que funciona.

Si esto parece el caso de uso canónico de los constructores de IA, es porque lo es: los dashboards y paneles de administración son la categoría #1 de apps generadas por IA, con el 12,5% de todos los proyectos — casi 8× más comunes que la estereotipada app de tareas (1,6%, puesto 13) — según los datos de la plataforma VULK, julio de 2026, N = 10.994 proyectos activos clasificados. El software con forma de herramienta interna es lo que la gente construye de verdad cuando generar una app cuesta un párrafo de texto.

¿Qué vamos a construir?

Un dashboard de analítica SaaS con sidebar colapsable, varios tipos de gráficos, una tabla de datos con búsqueda, autenticación de usuarios y funcionalidad de exportación. Es el tipo de herramienta interna que normalmente le lleva de dos a tres semanas construir desde cero a un desarrollador frontend. Con VULK, la primera versión funcional lleva minutos.

Este tutorial recorre los prompts exactos y el flujo de iteración para ir de la nada a un dashboard pulido y desplegable.

Paso 1: ¿Qué debería contener el prompt de generación inicial?

La calidad de la generación inicial depende por completo de cuánto contexto proporciones. Aquí tienes un prompt que produce consistentemente una base sólida:

Construye un dashboard de analítica SaaS para una herramienta de
gestión de proyectos.

Layout: sidebar fija a la izquierda (240px, colapsable a solo
iconos en móvil), header superior con avatar de usuario y campana
de notificaciones, área de contenido principal con padding.

Navegación de la sidebar:
- Dashboard (icono de casa)
- Proyectos (icono de carpeta)
- Tareas (icono de checkbox)
- Equipo (icono de usuarios)
- Informes (icono de gráfico)
- Ajustes (icono de engranaje)

Contenido de la página Dashboard:
1. Fila superior: 4 tarjetas de estadísticas con Total de
   Proyectos (127), Tareas Activas (843), Miembros del Equipo
   (24), Tasa de Finalización (87%). Cada tarjeta tiene icono,
   valor, etiqueta y cambio porcentual respecto al mes anterior
   (verde para positivo, rojo para negativo)

2. Fila central: dos gráficos lado a lado
   - Gráfico de líneas: "Tendencia de Finalización de Tareas" con
     los últimos 12 meses
   - Gráfico de barras: "Proyectos por Departamento" con 6
     departamentos

3. Fila inferior: tabla de datos "Tareas Recientes" con columnas:
   Nombre de la Tarea, Proyecto, Asignado (con avatar), Prioridad
   (badges Baja/Media/Alta), Estado (badges Por Hacer/En
   Progreso/Hecho), Fecha Límite. Incluye campo de búsqueda y
   paginación (10 filas por página).

Esquema de colores: fondo blanco, sidebar gris pizarra, color de
acento azul (#3B82F6) para estados activos y botones primarios.
Usa Tailwind CSS y Recharts para los gráficos. TypeScript.

Este prompt especifica dimensiones del layout, estructura de navegación, contenido de los datos, tipos de gráficos, columnas de la tabla y diseño visual. La IA no necesita adivinar ninguna de estas decisiones. (Para calibrar: el prompt mediano de la plataforma tiene ~60 palabras y funciona bien para apps simples; un dashboard así de específico merece el tratamiento largo — datos de la plataforma VULK, julio de 2026.)

Paso 2: ¿Qué deberías comprobar en la salida inicial?

Tras la generación, la vista previa en vivo de VULK muestra el dashboard completo. Esto es lo que comprobar:

Estructura del layout. La sidebar debe tener posición fija, el header debe ser sticky, y el área de contenido debe desplazarse de forma independiente. Verifica que la sidebar colapsa correctamente en viewports pequeños.

Renderizado de los gráficos. Los componentes Recharts deben renderizarse con ejes, etiquetas y contenedores responsivos correctos. Los datos deben coincidir con lo que especificaste — 12 meses en el gráfico de líneas, 6 departamentos en el de barras.

Funcionalidad de la tabla. La tabla de datos debe renderizar todas las columnas, mostrar los campos de prioridad y estado con estilo de badge, e incluir el campo de búsqueda y los controles de paginación.

Organización de los componentes. Comprueba que el código generado usa archivos de componentes separados — Sidebar.tsx, StatCard.tsx, TaskTable.tsx, CompletionChart.tsx — en vez de meterlo todo en un único archivo de página. (Un proyecto generado típico tiene ~20 archivos enfocados, no un monolito — datos de la plataforma VULK, julio de 2026.)

Paso 3: ¿Cómo se añade autenticación?

El prompt inicial se centró en la UI del dashboard. Ahora añade autenticación:

Añade autenticación a este dashboard. Incluye:
- Página de login con campos de email y contraseña, checkbox
  "Recuérdame" y enlace "Olvidé mi contraseña"
- Página de registro con nombre, email, contraseña, confirmar
  contraseña
- Rutas protegidas: redirige a /login si no está autenticado
- Contexto de usuario que guarda el nombre, email y URL del
  avatar del usuario conectado
- Botón de logout en el pie de la sidebar
- Muestra el nombre y avatar del usuario en el header superior

Usa un contexto de auth simple con localStorage para la sesión.
El formulario de login debe validar el formato del email y exigir
contraseña de mínimo 8 caracteres.

Esto genera un flujo de auth completo con validación de formularios, protección de rutas y gestión del estado del usuario. El sistema de ediciones quirúrgicas añade estos archivos sin regenerar los componentes existentes del dashboard. (Para auth multiusuario real con base de datos, pide el Backend Mode — VULK genera una API respaldada por PostgreSQL con hashing de contraseñas bcrypt y sesiones JWT; el 62% de las apps generadas incluye un esquema SQL.)

Paso 4: ¿Cómo se mejoran los gráficos?

Los gráficos iniciales son funcionales pero básicos. Mejóralos:

Mejora los gráficos del dashboard:

1. Haz el gráfico de líneas interactivo: muestra un tooltip con
   los valores exactos al pasar el cursor, añade un relleno de
   degradado bajo la línea, e incluye un toggle para alternar
   entre los datasets "Tareas Completadas" y "Tareas Creadas"

2. Añade un gráfico de dónut junto al de barras con la
   "Distribución de Estados de Tareas" con segmentos para Por
   Hacer (azul), En Progreso (amarillo), Hecho (verde) y Atrasada
   (rojo). Muestra el recuento total en el centro del dónut.

3. Añade un selector de rango de fechas encima de la sección de
   gráficos. Opciones: Últimos 7 días, Últimos 30 días, Últimos 3
   meses, Últimos 12 meses, Rango personalizado. El rango
   seleccionado debe filtrar todos los datos de los gráficos.

Cada prompt de seguimiento construye sobre el código existente. La IA entiende la estructura de componentes de la generación inicial y modifica los archivos correctos.

Paso 5: ¿Cómo se desarrolla la tabla de datos?

Las tablas de datos son donde los dashboards SaaS se vuelven genuinamente útiles. Amplía la tabla:

Mejora la tabla de Tareas Recientes:

1. Añade ordenación por columna: clic en cualquier cabecera para
   ordenar ascendente/descendente. Muestra una flecha indicadora.

2. Añade filtros: desplegables de filtro para Prioridad
   (Todas/Baja/Media/Alta) y Estado (Todos/Por Hacer/En
   Progreso/Hecho). Los filtros funcionan junto con la búsqueda.

3. Añade selección de filas: checkbox en cada fila, checkbox
   "Seleccionar Todo" en la cabecera. Muestra una barra de
   acciones flotante cuando hay filas seleccionadas con opciones:
   "Marcar como Hecho", "Eliminar", "Exportar Seleccionadas"

4. Añade un botón "Exportar CSV" que descargue la vista filtrada
   actual como archivo CSV.

5. Aumenta a 25 filas de datos de ejemplo con nombres de tareas
   realistas y estados variados.

Es un prompt denso, pero cada requisito es específico. La IA genera la lógica de ordenación, la gestión del estado de los filtros, la generación de CSV y el manejo de la selección — todo integrado en el componente de tabla existente.

Paso 6: ¿Cómo se añade la página de Proyectos?

Los dashboards necesitan más de una página. Amplía la navegación de la sidebar:

Construye la página de Proyectos (accesible desde la sidebar).

Contenido:
- Header con el título "Proyectos" y botón "Nuevo Proyecto"
- Cuadrícula de tarjetas de proyecto (3 columnas en escritorio,
  1 en móvil)
- Cada tarjeta muestra: nombre del proyecto, descripción
  (truncada a 2 líneas), barra de progreso con porcentaje,
  avatares de los miembros del equipo (apilados, máx. 3 con
  desbordamiento +N), fecha límite y badge de estado
  (Activo/En Pausa/Completado)
- Barra de búsqueda y filtro por estado arriba
- El botón "Nuevo Proyecto" abre un modal con: nombre del
  proyecto, textarea de descripción, fecha de inicio, fecha
  límite, selección de miembros del equipo (desplegable
  multiselección) y selección de prioridad

Incluye 9 proyectos de ejemplo con datos variados.

Paso 7: ¿Cómo se añade la página de Ajustes?

Construye la página de Ajustes con pestañas:

1. Pestaña Perfil: formulario con área de subida de avatar,
   nombre, email, cargo y textarea de bio. Botón de guardar abajo.

2. Pestaña Notificaciones: interruptores para notificaciones por
   email (tarea asignada, tarea completada, actualizaciones de
   proyectos, resumen semanal). Cada interruptor tiene etiqueta y
   descripción.

3. Pestaña Apariencia: selector de tema (Claro/Oscuro/Sistema)
   con miniaturas de vista previa, y botones de radio para la
   posición de la sidebar (Izquierda/Derecha).

4. Pestaña Seguridad: formulario de cambio de contraseña
   (contraseña actual, nueva contraseña, confirmar nueva
   contraseña) y toggle de autenticación de dos factores con
   instrucciones de configuración.

¿Qué prompts de iteración añaden más pulido?

Tras construir las páginas principales, estos prompts de seguimiento mejoran el pulido y la usabilidad:

Comportamiento responsivo:

Haz que la sidebar colapse a un menú hamburguesa en pantallas por
debajo de 768px. La sidebar debe deslizarse como un overlay con
un fondo oscurecido. Añade animaciones de transición suaves.

Estados de carga:

Añade estados de carga skeleton para las tarjetas de
estadísticas, los gráficos y la tabla de datos. Muestra los
skeletons durante 1,5 segundos cuando el dashboard carga por
primera vez, simulando una llamada a la API.

Estados vacíos:

Añade ilustraciones de estado vacío para cuando no hay tareas
(muestra un icono de portapapeles con el mensaje "Aún no hay
tareas") y no hay proyectos (muestra un icono de carpeta con el
mensaje "Crea tu primer proyecto" y un botón CTA).

Modo oscuro:

Añade soporte de modo oscuro. El toggle de tema en Ajustes debe
alternar entre los temas claro y oscuro. Modo oscuro: fondo
#1a1a2e, sidebar #16213e, texto #e2e8f0. Guarda la preferencia en
localStorage.

Los proyectos que acaban genuinamente pulidos son los que siguen iterando — el 10% superior de los proyectos de la plataforma supera los 25 mensajes, frente a una mediana de 4 (datos de la plataforma VULK, julio de 2026).

¿Qué deberías revisar antes de desplegar?

Antes de desplegar tu dashboard generado, revisa estas áreas:

Gestión de estado. Para un prototipo, React context y useState funcionan bien. Si tu dashboard crecerá a 10+ páginas con estado compartido, considera pedirle a VULK que refactorice a Zustand o una biblioteca de estado similar.

Puntos de integración con APIs. El dashboard generado usa datos de ejemplo. Identifica dónde las llamadas fetch reemplazarán los arrays estáticos — el código generado suele usar estructuras de datos limpias que mapean directamente a formas de respuesta de API. O sáltate esto por completo pidiendo el Backend Mode, que aprovisiona una API real respaldada por PostgreSQL.

Error boundaries. Añade manejo de errores alrededor de los componentes de gráficos y las cargas de datos. Un fallo de la biblioteca de gráficos no debería tumbar la página entera.

Accesibilidad. Verifica la navegación por teclado en la sidebar, la gestión del foco en los modales y las aria labels correctas en los elementos interactivos. El código generado incluye accesibilidad básica, pero las interacciones complejas como la tabla de datos pueden necesitar mejoras ARIA.

¿Cómo se despliega el dashboard?

Cuando estés satisfecho con el resultado, despliega con un clic a Cloudflare Pages. Tu dashboard obtiene una URL en vivo de inmediato. Compártela con los stakeholders para recibir feedback e itera según sus comentarios. El ciclo completo — del primer prompt al dashboard desplegado — puede ocurrir en una sola sesión de trabajo.

Y despliega de verdad: en toda la plataforma solo el 3,7% de las apps generadas llega alguna vez a una URL pública (datos de la plataforma VULK, julio de 2026). El último clic es el más raro.