18 painéis de produto prontos, com o prompt e o código, de graça

O VibePrompts tem 286 prompts de interface em 15 categorias, e cada um abre com a prévia funcionando no computador, no tablet e no celular. Além do prompt, vem o código pronto em Tailwind e, quando a tela tem interação, o JavaScript. Não pede cadastro.

A landing page até sai bonita quando você pede pra IA. O problema aparece no painel, a tela que a pessoa usa depois de entrar no produto. Você pede um dashboard e volta sempre a mesma coisa: quatro cards de número, um gráfico qualquer e uma tabela.

O VibePrompts é uma biblioteca de 286 prompts de interface, em 15 categorias, e a de painéis tem 18. O que muda em relação a uma lista de prompts comum é que cada item abre com a prévia funcionando e vem com o código pronto em Tailwind CSS.

Os 18 painéis

A própria página explica o foco: os prompts descrevem o formato dos dados, e não só o layout, e incluem os estados de vazio e de carregamento que quase sempre ficam de fora. Os 18 são:

• Estrutura e números: barra lateral com cards de número, visão geral de análise com filtro de período, card de gráfico com legenda, medidores de uso e cobrança
• Listas e tabelas: tabela de dados com barra de ferramentas, painel de atividades, caixa de entrada dividida, fila de aprovações com gaveta de detalhes, administração de equipe e funções
• Operação: quadro kanban de arrastar e soltar, grade da agenda da semana, quadro de incidentes, visualizador de registros ao vivo, painel de reposição de estoque
• Técnicos: custos por serviço, liberação de recurso por porcentagem, desempenho por região, bancada de desempenho de consultas

Um painel aberto por dentro

Abrindo a visão geral de análise com filtro de período, a prévia já está funcionando. Quando você clica em 24h, 7d, 30d ou 90d, os quatro números, as variações e as barrinhas mudam juntos, e a frase embaixo do título troca pro período comparado.

Em cima da prévia tem três botões, Tela cheia, Tablet e Celular, pra ver como o painel se reorganiza em tela pequena antes de levar pro seu projeto.

Prompt, Tailwind e JavaScript

O botão Ver código e prompt abre uma janela com até três abas. Prompt é o texto pra colar na sua IA. Tailwind é o código da tela já montado. JavaScript aparece quando a tela tem interação, como esse filtro de período. Cada aba tem o botão Copiar.

O prompt desse painel descreve cada peça: a linha do título com os quatro filtros de período, os quatro cards com rótulo, número, etiqueta de variação em verde ou vermelho e um minigráfico de doze barras, e o gráfico maior embaixo. No fim, pede o JavaScript que troca os números quando alguém clica no filtro. É esse nível de detalhe que o pedido "faz um dashboard" não tem.

O que é grátis

Tudo o que aparece lá. A biblioteca não pede cadastro, não tem página de preço, e a cópia funciona direto. O site não declara licença, então, pra código que vai pra produto de cliente, vale confirmar com quem fez. O rodapé credita a inspiração de design a @domi_kissi.

O que tem nas outras categorias

• Login e cadastro (19): código de uso único, link mágico, verificação em duas etapas, escolha de conta
• Preços (19): três planos, tabela comparativa, estimador por uso, preço por assento, preço em moeda local
• Primeira dobra, Recursos e bento e Depoimentos (19 cada)
• Faixas de chamada, Faixas de números, Menus, Rodapé, Perguntas frequentes, Primeiros passos, Blog e conteúdo e Contato (18 cada)
• Bônus (29): testador de regex, visualizador de JSON, contador de tokens de prompt, linha do tempo da execução de um agente

Como eu usaria

Pra painel, eu iria direto no código. Escolhe o painel mais parecido com o seu produto, copia a aba Tailwind (e a JavaScript, se tiver), cola no projeto e pede pra sua IA trocar os dados de exemplo pelos seus, mantendo a estrutura. Depois pede pra ela aplicar as cores e as fontes do seu design system.

O prompt serve pra outra coisa. Quando o painel que você precisa não existe lá, você lê o prompt de um parecido e aprende a descrever o seu: rótulo, número, variação, período, estado vazio. É esse vocabulário que faz a IA parar de devolver o dashboard de sempre.

A biblioteca está aqui: vibeprompts.dev.