Ya dominaste las landing pages con IA. Buen comienzo. Pero ahora tu cliente quiere un panel de administración, y de repente te quedas mirando la caja de texto del prompt sin saber cómo describir algo con 47 elementos de interfaz distintos. A todos nos ha pasado.
Lo que la mayoría de los tutoriales no te dice es esto: los prompts de IA para dashboards requieren un modelo mental completamente diferente al de las landing pages. Ya no estás vendiendo — estás organizando datos, creando flujos de trabajo y construyendo interfaces que la gente usa ocho horas al día. Si lo haces mal, terminas generando un diseño bonito que nadie puede usar en la práctica.
Llevo meses construyendo dashboards con herramientas de IA y aprendí qué funciona (y qué genera un caos total). Estas 40+ plantillas no son teóricas — son los prompts exactos que producen dashboards limpios y funcionales al primer intento.
Por qué los dashboards son perfectos para la generación con IA
Acá va una opinión que no todos comparten: los dashboards son más fáciles de generar con IA que las landing pages. Sí, lo dije.
Piénsalo. Las landing pages necesitan creatividad, personalidad de marca, impacto emocional. ¿Los dashboards? Siguen patrones. Patrones predecibles. Sidebar a la izquierda. Estadísticas arriba. Tablas abajo. Gráficas a la derecha. La IA ha visto miles de estos, y sabe exactamente qué quieres decir.
El problema es que la mayoría de los desarrolladores escribe prompts como si estuvieran describiendo una landing page. Vagos. Aspiracionales. "Que se vea moderno y limpio." Eso funciona para sitios de marketing. Para dashboards, te genera un esqueleto bonito sin funcionalidad real.
Lo que la IA necesita para los dashboards:
- Contexto de datos (¿qué información vas a mostrar?)
- Flujos del usuario (¿qué acciones puede realizar?)
- Especificidad de componentes (no solo "una tabla" sino "una tabla de datos ordenable y filtrable con paginación")
Domina este cambio y vas a lanzar paneles de administración en horas en vez de días.
Cómo elegir el layout correcto para tu dashboard
Antes de empezar a escribir prompts, tienes que elegir el layout adecuado para tu caso de uso. Aquí es donde muchos se equivocan — por lo general replican lo que ya conocen. Pero cada tipo de dashboard tiene un propósito diferente:
| Tipo de Dashboard | Ideal para | Componentes clave | Layout típico |
|---|---|---|---|
| Dashboard de Analítica | Visualización de datos, seguimiento de métricas, monitoreo de rendimiento | Gráficas, tarjetas KPI, líneas de tendencia | Área de contenido amplia, navegación mínima, densa en datos |
| Panel de Administración | Gestión de usuarios, contenido, configuración del sistema | Tablas, formularios, operaciones CRUD, configuraciones | Navegación lateral, contenido con pestañas, orientado a acciones |
| Dashboard de E-commerce | Gestión de pedidos, inventario, seguimiento de ventas | Tablas de pedidos, listas de productos, gráficas de ingresos | Sidebar + barra superior, combinación de gráficas y tablas |
Cuándo usar el layout de Analítica: Cuando muestras tendencias, comparaciones o necesitas que los usuarios monitoreen métricas de un vistazo. Piensa en Google Analytics o el dashboard de Mercado Pago.
Cuándo usar el layout de Panel de Administración: Cuando los usuarios principalmente gestionan datos — crear, editar, eliminar registros. Piensa en el admin de WordPress o los sistemas de gestión de usuarios.
Cuándo usar el layout de E-commerce: Cuando necesitas una combinación de ambos — métricas rápidas Y gestión detallada de datos. Piensa en el admin de Shopify o Tienda Nube.
La anatomía de un prompt de dashboard efectivo
Antes de entrar en las plantillas, veamos qué hace que un prompt de dashboard realmente funcione. Si leíste nuestra guía de context engineering para programación con IA, ya sabes que el contexto supera a las frases ingeniosas en cualquier situación.
Mi framework es este:
[Tipo de componente] + [Contexto de datos] + [Funcionalidad] + [Restricciones de estilo]
Prompt malo: "Create a dashboard sidebar"
Prompt bueno: "Create a collapsible sidebar navigation with: Dashboard, Users, Products, Orders, Analytics, and Settings sections. Include icon placeholders for each item, active state highlighting, and a collapse button at the bottom. Use a dark theme with subtle hover effects."
¿Ves la diferencia? El segundo prompt le da a la IA todo lo que necesita para tomar decisiones. Sin adivinar.
| Elemento del prompt | Qué incluir | Por qué importa |
|---|---|---|
| Tipo de componente | Elemento de UI específico (sidebar, tabla de datos, gráfica) | Define la base estructural |
| Contexto de datos | Qué datos se mostrarán, valores de ejemplo | Determina el layout y el formato |
| Funcionalidad | Ordenamiento, filtros, acciones, interacciones | Evita componentes estáticos e inútiles |
| Restricciones de estilo | Tema, espaciado, enfoque de color | Garantiza consistencia visual |
Prompts para Sidebar y Navegación
El sidebar es la columna vertebral de tu dashboard. Si falla, todo lo demás se siente mal. Estas son las plantillas que realmente funcionan:
Sidebar básico colapsable
Create a responsive sidebar navigation component with: - Logo area at top (40px height) - Navigation sections: Overview, Analytics, Users, Products, Orders, Settings - Each item has an icon placeholder and label - Collapsible to icon-only mode with smooth animation - Active state with left border accent - Dark theme (#1a1a2e background) - Hover states with subtle background change - Mobile: full overlay with close button
¿Quieres probarlo tú mismo?
Try this prompt⌘+Enterto launch
Navegación multinivel
Build a sidebar with nested navigation: - Top level: Dashboard, Management (expandable), Reports (expandable), Settings - Management submenu: Users, Roles, Permissions, Teams - Reports submenu: Sales, Traffic, Performance, Custom - Smooth expand/collapse animations - Indent child items with visual connector lines - Remember expanded state between page navigations - Include notification badges on select items
Navegación horizontal superior
No todos los dashboards necesitan un sidebar. A veces la navegación horizontal es la mejor opción:
Create a horizontal dashboard navigation bar: - Logo on left - Main nav items centered: Dashboard, Projects, Team, Reports, Billing - Right side: Search input, notification bell with badge, user avatar dropdown - Dropdown menu for user: Profile, Account Settings, Logout - Sticky on scroll - Mobile: hamburger menu with slide-out drawer
Prompts para Tablas de Datos y Grillas
Aquí es donde la mayoría de los prompts de dashboard con IA se rompen. La gente pide "una tabla de datos" y eso es exactamente lo que recibe — una tabla HTML estática que no sirve en producción.
Las tablas necesitan funcionalidad. Así es cómo pedirlas correctamente:
Tabla de datos completa
Create a data table component for user management with columns: - Checkbox for bulk selection - Avatar + Name (sortable) - Email (sortable) - Role (filterable dropdown: Admin, Editor, Viewer) - Status (filterable: Active, Inactive, Pending) with colored badges - Last Active (sortable, relative time format) - Actions column (edit, delete buttons with confirmation modal) Include: - Header row with sort indicators - Pagination (10, 25, 50 per page options) - Search input filtering across name and email - Bulk action dropdown (Delete Selected, Export, Change Status) - Empty state when no results - Loading skeleton state
¿Quieres probarlo tú mismo?
Try this prompt⌘+Enterto launch
Tabla de inventario de productos
Build an inventory data table showing: - Product image thumbnail (50x50) - Product name with SKU below in muted text - Category with filter - Price (sortable, currency formatted) - Stock quantity with color coding (green >20, yellow 5-20, red <5) - Status toggle (Published/Draft) Features: - Inline editing for price and stock - Quick actions: duplicate, archive, delete - Export to CSV button - Column visibility toggle
Tabla de transacciones y pedidos
Create an orders table with: - Order ID (clickable link style) - Customer name and email - Items count - Total amount (currency formatted) - Payment status badge (Paid=green, Pending=yellow, Failed=red, Refunded=gray) - Fulfillment status (Processing, Shipped, Delivered) - Date (sortable, formatted as "Dec 7, 2025") - Actions: View Details, Issue Refund Add date range filter with preset options (Today, Last 7 days, Last 30 days, Custom)
Prompts para Gráficas y Visualizaciones
Las gráficas son donde la IA brilla — si le das el contexto correcto. La clave es especificar no solo el tipo de gráfica, sino la historia que debe contar.
Gráfica de resumen de ingresos
Create a revenue analytics section with: - Large area chart showing monthly revenue (last 12 months) - Gradient fill under the line (blue to transparent) - Tooltip showing exact value and % change from previous month - Toggle to switch between Revenue, Orders, and Customers views - Comparison line for previous year (dashed, muted color) - Y-axis formatted as currency - Responsive, maintains aspect ratio on resize
Encabezado de dashboard con múltiples métricas
Design a KPI metrics row with 4 cards: 1. Total Revenue: $124,563 (+12.5% with green arrow) 2. Active Users: 8,429 (+5.2%) 3. Conversion Rate: 3.24% (-0.8% with red arrow) 4. Avg Order Value: $67.50 (+2.1%) Each card has: - Icon in colored circle - Metric label - Large value - Percentage change with directional indicator - Mini sparkline chart showing 7-day trend
¿Quieres probarlo tú mismo?
Try this prompt⌘+Enterto launch
Gráficas de distribución
Build a user demographics section with: - Donut chart showing user distribution by plan (Free 45%, Pro 35%, Enterprise 20%) - Horizontal bar chart showing top 5 countries by users - Stacked bar chart showing device types over last 6 months (Desktop, Mobile, Tablet) - Each chart in a card with title and "View All" link - Consistent color palette across all charts - Legend positioned below each chart
Aquí puedes ver cómo estos componentes de gráficas encajan normalmente en el layout de un dashboard:
Prompts para Tarjetas de Estadísticas y Widgets KPI
Las tarjetas de estadísticas son engañosamente complicadas. Necesitan transmitir información de un vistazo sin abrumar al usuario.
Tarjetas de estadísticas basadas en progreso
Create a goal tracking card grid (2x2): Each card shows: - Goal name (Monthly Sales, New Signups, Support Tickets Closed, NPS Score) - Current value / Target value - Circular progress indicator (percentage filled) - Days remaining in period - Status indicator (On Track=green, At Risk=yellow, Behind=red)
Fila de estadísticas comparativas
Build a stats comparison component showing: - This Period vs Last Period side by side - Metrics: Revenue, Orders, Customers, Page Views - Bar visualization showing relative comparison - Percentage change prominently displayed - Ability to toggle period (Week, Month, Quarter, Year)
Tarjeta de estadísticas en tiempo real
Design a live metrics card for monitoring: - Large current value with pulsing dot indicator - "Updated X seconds ago" timestamp - Mini line chart showing last 60 data points - High/Low watermarks for the day - Alert threshold line on the chart - Red glow effect when value exceeds threshold
Prompts para Formularios y Filtros
Los dashboards dependen de sus filtros. Una mala experiencia de filtrado hace que hasta el dashboard más bonito sea frustrante de usar.
Panel de filtros avanzado
Create a collapsible filter sidebar for an analytics dashboard: - Date range picker with presets (Today, Yesterday, Last 7/30/90 days, Custom) - Multi-select dropdown for Categories - Multi-select for Status values - Price range slider with min/max inputs - Search input for text filtering - "Apply Filters" and "Reset All" buttons - Show count of active filters on collapse button - Filters persist in URL parameters
¿Quieres probarlo tú mismo?
Try this prompt⌘+Enterto launch
Barra de filtros rápidos
Build a horizontal quick filter bar: - Segmented control for time period (Day/Week/Month) - Status filter chips (All, Active, Pending, Completed) - single select - Tag filter chips (multiple select, horizontal scroll on mobile) - "More Filters" button that opens full filter panel - Active filter count badge
Búsqueda con sugerencias
Design a command-palette style search component: - Centered modal triggered by Cmd+K - Search input with placeholder "Search users, orders, products..." - Results grouped by type with type labels - Keyboard navigation (up/down arrows, enter to select) - Recent searches section - Quick actions section (Create User, New Order, Generate Report)
Prompts para Layouts Completos de Dashboard
Ahora juntemos todo. Estos prompts generan layouts completos y funcionales:
Dashboard de Analítica
Build a complete analytics dashboard with: Layout: - Collapsible sidebar (240px expanded, 64px collapsed) - Header with breadcrumbs, search, and user menu - Main content area with 24px padding Content: - Top row: 4 KPI cards (Users, Revenue, Sessions, Bounce Rate) - Second row: Large line chart (Sessions over time) taking 2/3 width, donut chart (Traffic Sources) taking 1/3 - Third row: Bar chart (Top Pages) taking 1/2, table (Recent Events) taking 1/2 - Bottom: Full-width table (User Sessions) with pagination Use a neutral color scheme with blue accent. Include loading states for each component.
¿Quieres probarlo tú mismo?
Try this prompt⌘+Enterto launch
Panel de Administración
Create an admin panel dashboard for a SaaS product: Structure: - Sidebar with: Dashboard, Users, Subscriptions, Content, Analytics, Settings - Top bar with app name, global search, notifications, profile dropdown Dashboard page shows: - Welcome banner with quick stats - Recent activity feed (left 60%) - Quick actions panel (right 40%): Add User, Create Content, View Reports - Recent users table with basic actions - System status indicators (API, Database, Storage) with health badges
Dashboard de E-commerce
Design an e-commerce admin dashboard: Navigation: Orders, Products, Customers, Analytics, Marketing, Settings Main dashboard includes: - Today's snapshot: Orders, Revenue, Visitors, Conversion Rate - Sales chart (last 30 days) with comparison toggle - Recent orders table (5 rows) with status badges and quick view - Low stock alerts panel - Top selling products list with thumbnails - Pending actions: Reviews to moderate, Returns to process
Errores comunes y cómo evitarlos
Después de generar cientos de dashboards, estos son los errores que veo constantemente y cómo no caer en ellos:
Error 1: Sin contexto de datos Pides "una tabla de usuarios" y te aparece Lorem Ipsum por todas partes. Siempre especifica el formato de los datos de ejemplo.
Error 2: Olvidar los estados Tu tabla se ve genial... hasta que está vacía. Siempre especifica los estados de carga, vacío y error.
Error 3: Todo estático Gráficas sin estados hover. Tablas sin ordenamiento. Botones que no parecen clickeables. Agrega palabras de interacción: "sortable," "clickable," "hoverable."
Error 4: Ignorar el celular Los dashboards frecuentemente se usan en tablets y a veces en el celular. Agrega "responsive" y especifica el comportamiento en móvil.
Error 5: Sin jerarquía visual Todo del mismo tamaño y peso. Especifica qué es primario, secundario y terciario.
Si quieres llevar tus prompts al siguiente nivel más allá de los dashboards, nuestra guía de mejores prácticas de vibe coding profundiza en cómo escribir prompts que funcionan siempre.
Empieza a construir tu dashboard
Las plantillas de arriba no son fórmulas mágicas. Son puntos de partida. La habilidad real está en entender por qué funcionan y adaptarlas a tus necesidades específicas.
Empieza con un prompt de layout completo para definir la estructura. Luego refina los componentes uno por uno. Itera. La IA no te juzga por correr 47 variaciones del mismo prompt.
Y si vienes siguiendo nuestra guía de prompts de IA para landing pages, ya conoces los fundamentos. Los prompts de IA para dashboards simplemente aplican esos mismos principios a un problema distinto.
El mejor dashboard no es el más bonito — es el que tus usuarios pueden entender a las 2am cuando el servidor se cae y todo está en llamas. Ten eso en mente y vas a construir algo genuinamente útil.
Ahora deja de leer y ponte a construir.
