5.2 Crear dashboards básicos con prompts: visualiza tus datos de ventas, clientes o métricas sin saber Excel avanzado ni programación

Módulo 5: Tema 2 – Dashboards con Prompts

Crear Dashboards con Prompts

Visualiza tus datos sin saber Excel avanzado ni programación

Un dashboard bien diseñado convierte datos crudos en decisiones. Antes, crearlos requería conocimientos técnicos profundos. Hoy, con Vibe Coding, puedes describir lo que necesitas y tenerlo funcionando con tus datos reales en menos de 30 minutos.

💡

“La clave no está en la herramienta: está en saber qué tipo de visualización comunica mejor cada dato. Un dashboard mal diseñado, aunque use la IA más cara, sigue siendo inútil.”

5.2.1 Qué tipo de gráfica usar según el dato

Antes de escribir tu prompt, tú debes decidir qué gráfica es la correcta. La IA te dará lo que pidas, pero el criterio es tuyo:

Tipo de gráfica	Cuándo usarla	Ejemplo visualizable	Cuándo NO usarla
Barras Verticales	Comparar valores entre categorías distintas.	Ventas por producto \| Clientes por ciudad.	Más de 8–10 categorías (se vuelve ilegible).
Líneas	Mostrar la evolución a lo largo del tiempo.	Ventas semana a semana \| Tasa de conversión mensual.	Cuando los datos no tienen un orden temporal.
Área	Tendencia temporal + magnitud acumulada.	Ingresos acumulados del año \| Volumen de tickets.	Múltiples series que se superponen y confunden.
Pie / Dona	Mostrar la proporción de partes dentro de un todo.	Distribución de ventas por categoría.	Más de 5–6 categorías o diferencias muy pequeñas.
Tabla de Datos	Mostrar datos exactos para consultar y exportar.	Lista de transacciones detalladas \| Métricas por agente.	Cuando el objetivo es comunicar una tendencia.
KPI Card (Número)	Resaltar una métrica clave con su valor actual.	Ventas totales del mes \| Nuevos clientes registrados.	Cuando no hay un valor de referencia para comparar.

5.2.2 Dashboard de ventas con v0 de Vercel

v0 genera componentes de interfaz de alta calidad. Es la opción más rápida para prototipar y mostrar cómo se verá el resultado final en segundos.

Acceso

Ve a v0.dev y regístrate con GitHub o Google. El plan gratuito es suficiente para practicar.

Instrucción

Describe el dashboard con todos los detalles. Usa el Prompt Maestro que verás abajo.

Ajuste

Pide cambios específicos: “¿puedes cambiar los colores a azul?” o “¿puedes usar una gráfica de dona?”.

Publicación

Usa el botón “Open in Vercel” para ver tu dashboard en vivo en una URL pública.

Datos Reales

Sustituye los datos de ejemplo por los tuyos conectándolos a una API o Google Sheets (ver sección 2.4).

Prompt Maestro para Dashboard en v0

Crea un dashboard ejecutivo de ventas mensual con estas especificaciones exactas:

LAYOUT: Diseño de una sola página, responsive (funciona en desktop y móvil). Header con título 'Dashboard de Ventas' y el mes/año actual. Grid de 4 KPI cards en la parte superior.

KPI CARDS (4 tarjetas):
1. Ventas totales del mes: $847,500 MXN (+12% vs mes anterior)
2. Nuevos clientes: 47 (+8% vs mes anterior)
3. Ticket promedio: $18,032 MXN (-3% vs mes anterior)
4. Tasa de conversión: 23% (+2pp vs mes anterior)

GRÁFICA 1 (debajo de los KPIs, ancho completo):
Gráfica de barras verticales con los datos de ventas de los últimos 6 meses: May: 620000, Jun: 710000, Jul: 680000, Ago: 795000, Sep: 810000, Oct: 847500. Eje Y en miles (MXN), eje X con nombres de mes abreviados.

GRÁFICA 2 (mitad izquierda):
Gráfica de dona con distribución de ventas por categoría de producto: Servicios: 45%, Productos: 32%, Licencias: 23%.

TABLA (mitad derecha):
Tabla de los 5 productos más vendidos este mes con columnas: Producto, Unidades, Ingresos, % del total.

DISEÑO: Colores morado oscuro (#5B2D8E) para encabezados y elementos principales, dorado (#D4A017) para valores de KPI positivos, rojo suave para negativos. Fondo gris claro. Tipografía limpia sans-serif. Estilo corporativo profesional.

NOTA: Usa la librería Recharts para las gráficas (disponible en v0/shadcn).

5.2.3 Dashboard funcional con Bolt.new

Mientras v0 se enfoca en la imagen visual, Bolt.new genera una aplicación interactiva. Aquí los filtros realmente funcionan y puedes exportar datos.

Prompt para Dashboard Interactivo en Bolt.new

Crea una aplicación web de dashboard ejecutivo con React. El dashboard debe ser completamente interactivo y funcional.

SECCIÓN DE FILTROS (barra superior):
- Selector de rango de fechas: Este mes, Trimestre actual, Este año, Personalizado
- Selector de categoría: Todos, Servicios, Productos, Licencias
- Botón de exportar datos a CSV

KPI CARDS (4 tarjetas, primera fila):
[Mismas 4 métricas que el ejemplo anterior con valores de muestra]
Las tarjetas deben recalcular sus valores cuando el usuario cambia los filtros.

GRÁFICAS (segunda y tercera fila):
- Gráfica de líneas: tendencia de ventas de los últimos 12 meses
- Gráfica de barras agrupadas: comparativa este mes vs mes anterior por categoría
- Tabla interactiva: lista de transacciones con búsqueda, ordenamiento por columna y paginación (10 filas por página)

DATO IMPORTANTE: Usa datos de muestra generados programáticamente (no hardcodeados) para que el dashboard sea reutilizable. Los datos deben ser realistas para una empresa mexicana: montos en pesos MXN, nombres mexicanos.

ESTILO: Tailwind CSS, colores morado (#5B2D8E) y dorado (#D4A017), fondo blanco, gráficas con Recharts.

FUNCIONALIDAD ADICIONAL: Cuando el usuario cambia el filtro de fecha, todas las gráficas y KPIs se actualizan automáticamente.

Los 6 Dashboards esenciales para tu negocio

Tipo	Métricas clave	Para quién es	Herramienta ideal
Ventas	Ventas totales, ticket promedio, conversión.	Directores y gerentes comerciales.	Bolt.new (Interactivo)
Marketing	Visitas, leads, costo por lead, conversión funnel.	Coordinadores de marketing.	v0 + Google Analytics API
Operaciones	Tareas completadas, tiempo de ciclo, cuellos de botella.	Jefes de producción.	Bolt.new + Google Sheets
Atención al Cliente	Tickets abiertos/cerrados, tiempo respuesta, NPS.	Gerentes de servicio y soporte.	Bolt.new + Supabase
Financiero	Flujo de caja, ingresos vs gastos, rentabilidad.	CFO y directores financieros.	Bolt.new + Sheets
Recursos Humanos	Headcount, rotación, tiempo de contratación.	Directores de RH.	v0 (Diseño) + Sheets

Inteligencia Artificial y Automatización Nivel 1

Bienvenida

Participantes 608