Então você já dominou a criação de landing pages com IA. Boa. Mas agora o cliente quer um painel administrativo, e de repente você está olhando para uma caixa de prompt em branco sem saber ao certo como descrever algo com 47 elementos de UI diferentes. Conheço bem esse sentimento.
Eis o que a maioria dos tutoriais não conta: prompts de dashboard para IA exigem um modelo mental completamente diferente do das landing pages. Você não está mais vendendo — está organizando dados, criando fluxos de trabalho e construindo interfaces que as pessoas usam o dia inteiro. Erre aqui, e você gerou uma bagunça bonita que ninguém consegue usar de verdade.
Passei os últimos meses construindo dashboards com ferramentas de IA e aprendi o que funciona (e o que gera caos absoluto). Esses 40+ templates não são teóricos — são os prompts exatos que produzem dashboards limpos e funcionais logo na primeira tentativa.
Por Que Dashboards São na Verdade Perfeitos para Geração com IA
Aqui vai minha opinião um pouco polêmica: dashboards são mais fáceis de gerar com IA do que landing pages. Pode falar que eu falei.
Pensa comigo. Landing pages precisam de criatividade, personalidade de marca, ganchos emocionais. Dashboards? Eles seguem padrões. Padrões previsíveis. Sidebar à esquerda. Métricas no topo. Tabelas abaixo. Gráficos à direita. A IA já viu milhares desses e sabe exatamente o que você quer dizer.
O problema é que a maioria dos devs escreve prompts como se estivesse descrevendo uma landing page. Vago. Aspiracional. "Deixe moderno e clean." Isso funciona para sites de marketing. Para dashboards, você recebe um esqueleto bonito sem alma nenhuma.
O que a IA precisa para dashboards:
- Contexto dos dados (o que você está de fato exibindo?)
- Fluxos do usuário (que ações ele pode executar?)
- Especificidade dos componentes (não só "uma tabela", mas "uma tabela de dados com ordenação, filtros e paginação")
Domine essa mudança de mentalidade e você vai estar entregando painéis admin em horas, não dias.
Escolhendo o Layout Certo para o Seu Dashboard
Antes de sair promtando, você precisa escolher o layout correto para o seu caso de uso. É aqui que a maioria das pessoas erra — caem no automático e replicam o que já viram antes. Mas dashboards diferentes servem a propósitos diferentes:
| Tipo de Dashboard | Ideal Para | Componentes Principais | Layout Típico |
|---|---|---|---|
| Dashboard de Analytics | Visualização de dados, rastreamento de métricas, monitoramento de performance | Gráficos, KPI cards, linhas de tendência | Área de conteúdo ampla, navegação mínima, denso em dados |
| Painel Admin | Gestão de usuários, gestão de conteúdo, configuração de sistema | Tabelas, formulários, operações CRUD, configurações | Navegação lateral, conteúdo em abas, focado em ações |
| Dashboard de E-commerce | Gestão de pedidos, estoque, acompanhamento de vendas | Tabelas de pedidos, listas de produtos, gráficos de receita | Sidebar + barra superior, mix de gráficos e tabelas |
Quando usar layout de Analytics: você está mostrando tendências, comparações ou precisa que os usuários monitorem métricas de relance. Pense no Google Analytics ou no dashboard do Stripe — ou, se você está no mercado brasileiro, no painel do Asaas ou do Pagar.me.
Quando usar layout de Painel Admin: os usuários gerenciam dados principalmente — criando, editando, deletando registros. Pense no painel do WordPress ou em sistemas de gestão de usuários.
Quando usar layout de E-commerce: você precisa de um mix dos dois — métricas rápidas E gestão detalhada de dados. Pense no admin do Shopify ou da Nuvemshop.
A Anatomia de um Prompt de Dashboard que Realmente Funciona
Antes de mergulhar nos templates, vamos entender o que faz um prompt de dashboard funcionar de verdade. Se você leu nosso guia sobre context engineering para programação com IA, já sabe que contexto bate frase bonita sempre.
Este é o meu framework:
[Tipo de Componente] + [Contexto dos Dados] + [Funcionalidade] + [Restrições de Estilo]
Prompt ruim: "Crie um sidebar para dashboard"
Prompt bom: "Crie uma sidebar de navegação recolhível com: seções de Dashboard, Usuários, Produtos, Pedidos, Analytics e Configurações. Inclua placeholder de ícone para cada item, destaque de estado ativo e botão de recolher na base. Use tema escuro com efeitos de hover sutis."
Percebe a diferença? O segundo prompt dá à IA tudo o que ela precisa para tomar decisões. Sem adivinhação.
| Elemento do Prompt | O Que Incluir | Por Que Importa |
|---|---|---|
| Tipo de Componente | Elemento de UI específico (sidebar, tabela de dados, gráfico) | Define a fundação estrutural |
| Contexto dos Dados | Quais dados serão exibidos, valores de exemplo | Determina o layout e a formatação |
| Funcionalidade | Ordenação, filtros, ações, interações | Evita componentes estáticos e inúteis |
| Restrições de Estilo | Tema, espaçamento, abordagem de cores | Garante consistência visual |
Prompts de Sidebar e Navegação
A sidebar é a espinha dorsal do seu dashboard. Erre aqui e tudo parece torto. Aqui estão os templates que funcionam:
Sidebar Recolhível Básica
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
Quer testar você mesmo?
Try this prompt⌘+Enterto launch
Navegação em Múltiplos Níveis
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
Navegação Horizontal no Topo
Nem todo dashboard precisa de sidebar. Às vezes o horizontal funciona melhor:
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 de Tabelas de Dados e Grid
Aqui é onde a maioria dos prompts de dashboard para IA desanda. As pessoas pedem "uma tabela de dados" e recebem exatamente isso — uma tabela HTML estática inútil em produção.
Tabelas precisam de funcionalidade. Veja como promtar tabelas que realmente funcionam:
Tabela de Dados 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
Quer testar você mesmo?
Try this prompt⌘+Enterto launch
Tabela de Estoque de Produtos
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
Tabela de Transações e 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 de Gráficos e Visualizações
Gráficos são onde a IA brilha — desde que você dê o contexto certo. O segredo é especificar não só o tipo de gráfico, mas a história que ele deve contar.
Gráfico de Visão Geral de Receita
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
Header de Dashboard com Multi-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
Quer testar você mesmo?
Try this prompt⌘+Enterto launch
Gráficos de Distribuição
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
Veja como esses componentes de gráfico costumam se encaixar num layout de dashboard:
Prompts de Cards de Stats e Widgets de KPI
Cards de stats são traiçoeiros. Precisam transmitir informação de uma olhada só, sem sobrecarregar. Muita gente subestima isso.
Cards de Stats Baseados em Progresso
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)
Linha de Stats para Comparação
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)
Card de Stats em Tempo 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 de Formulários e Filtros
Dashboards vivem e morrem pelos filtros. Uma UX de filtro ruim torna até os dashboards mais bonitos um pesadelo de usar.
Painel de Filtros Avançados
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
Quer testar você mesmo?
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
Busca com Sugestões
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 de Layout Completo de Dashboard
Agora vamos juntar tudo. Estes prompts geram layouts completos e funcionais:
Dashboard de Analytics
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.
Quer testar você mesmo?
Try this prompt⌘+Enterto launch
Painel Admin
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
Erros Comuns e Como Evitar Cada Um
Depois de gerar centenas de dashboards, estes são os erros que vejo o tempo todo — e como fugir deles:
Erro 1: Sem contexto de dados Você pede "uma tabela de usuários" e recebe Lorem Ipsum em todo lugar. Especifique sempre o formato dos dados de exemplo.
Erro 2: Esquecer os estados Sua tabela ficou linda... até ficar vazia. Especifique sempre os estados de carregamento, vazio e erro.
Erro 3: Tudo estático Gráficos sem hover. Tabelas sem ordenação. Botões que não parecem clicáveis. Use palavras de interação: "ordenável", "clicável", "com hover".
Erro 4: Ignorar o mobile Dashboards são muito usados em tablets e, cada vez mais, em celulares. Adicione "responsivo" e especifique o comportamento mobile.
Erro 5: Hierarquia visual inexistente Tudo com o mesmo tamanho e peso. Especifique o que é primário, secundário e terciário.
Se você quer aprimorar seu jogo de prompts além dos dashboards, nosso guia de boas práticas de vibe coding vai fundo em como escrever prompts que funcionam sempre.
Comece a Construir o Seu Dashboard
Olha, os templates acima não são fórmulas mágicas. São pontos de partida. A habilidade real está em entender por que eles funcionam e adaptá-los às suas necessidades específicas.
Comece com um prompt de layout completo para montar a estrutura. Depois refine os componentes individualmente. Itere. A IA não te julga por rodar 47 variações do mesmo prompt.
E se você tem acompanhado nosso guia de prompts de IA para landing pages, já conhece os fundamentos. Os prompts de dashboard para IA apenas aplicam esses mesmos princípios a um problema diferente.
O melhor dashboard não é o mais bonito — é o que seus usuários conseguem entender às 2 da manhã com o servidor pegando fogo. Guarde isso, e você vai construir algo genuinamente útil.
Agora para de ler e vai criar algo.
