Como transformar o Claude em designer de dashboard (com Dribbble e Awwwards)

Para transformar o Claude em designer de dashboard, dê referência para ele. Salve o print de dois ou três painéis no Dribbble, pegue a sensação dos sites premiados no Awwwards, mande tudo junto com os seus dados e peça o dashboard na estética dessas referências, com a sua identidade visual. Quando ficar bom, transforme o estilo numa skill.

É o caminho que eu uso para todos os meus painéis. Abaixo estão os cinco passos do Reel, com os pedidos prontos para você copiar e colar na conversa.

Por que o dashboard do Claude sai com cara de IA?

Porque falta referência. Quando você pede só "faz um dashboard para mim", o Claude não sabe o que você acha bonito, então ele vai na média de tudo o que já viu. E a média de dashboard é aquela coisa meio cinza, meio azul ou, pior, meio colorida com um degradê roxo no fundo. Funciona, mas tem cara de planilha de 2010.

Referência é tudo para criar bons designs com IA. O Claude é ótimo em entender uma estética e aplicar nos seus números, mas ele precisa ver essa estética primeiro.

Passo 1: o que pegar no Dribbble?

O Dribbble (dribbble.com) é o site onde designers do mundo inteiro mostram os seus melhores trabalhos. Abra o site, pesquise dashboard e vão aparecer milhares de painéis: financeiro, de vendas, de saúde, de projetos.

• Salve o print de dois ou três que você gostar. Print mesmo, a imagem da tela, porque é a imagem que você vai mandar para o Claude.
• Escolha pelo que você acha bonito, não pelo assunto. Um painel de saúde pode ter exatamente o menu que você quer para o seu painel de vendas.
• Guarde tudo numa pasta só, com o nome do projeto. Na hora do pedido, fica fácil anexar.

Passo 2: o que pegar no Awwwards?

Depois, vá no Awwwards (awwwards.com, com três "w" mesmo). É um site que premia os sites mais bonitos do mundo: todo dia um deles ganha o selo de Site do Dia. Daqui você não tira o painel, tira a sensação.

• A cor: quantas cores o site usa e onde entra a cor de destaque.
• A fonte: se os números aparecem grandes, se o título é serifado, se tem contraste entre uma fonte e outra.
• O respiro entre blocos: o espaço vazio entre uma informação e outra. É o que mais diferencia um painel bonito de um painel apertado.

Salve o print de um ou dois sites que passarem a sensação que você quer. Quanto mais referência, melhor.

Passo 3: qual é o pedido para o Claude montar o dashboard?

Abra uma conversa nova e anexe tudo de uma vez: os prints do Dribbble, os do Awwwards e os seus dados. Os dados podem ser uma planilha, um CSV ou uma tabela colada. Se o Claude já tem acesso aos seus dados por um conector, ele já deve ter tudo. Aí vem o pedido:

Monta o meu dashboard com os meus dados na estética dessas referências, usando a minha identidade visual.

Os prints anexados são as referências: os do Dribbble mostram o tipo de painel que eu gosto e os do Awwwards mostram a sensação que eu quero (cor, fonte e respiro entre os blocos). Não copie nenhuma referência: misture o que cada uma tem de melhor.

Minha identidade visual: [cole aqui as cores, as fontes e, se tiver, o link do seu site ou do seu manual de marca].

Entregue um arquivo HTML que eu possa abrir no navegador, com os meus números de verdade. Antes de começar, me faça todas as perguntas que precisar, de uma vez só, numeradas.

Passo 4: como pontuar o que você gostou em cada referência?

O primeiro resultado já vai ser muito melhor do que o genérico. O pulo do gato é o que vem depois: dizer para ele o que você gostou em cada exemplo. Por exemplo, eu quero que o menu fique na lateral e que as coisas abram quando eu clico. Quanto mais específico, mais o painel fica do seu jeito.

Agora vamos ajustar pelo que eu gostei em cada referência:

1. Da referência 1, quero o menu na lateral, fixo, com os itens que eu uso mais em cima.
2. Da referência 2, quero os cards que abrem quando eu clico, mostrando o detalhe por baixo.
3. Do site do Awwwards, quero o respiro entre os blocos e os números grandes.
4. [escreva aqui o que mais você gostou e de qual exemplo]

Ajuste o dashboard com esses pontos e me mostre o que mudou.

Passo 5: como transformar o estilo numa skill?

Esse é o ponto mais importante. Quando o painel ficar do jeito que você queria, lindo, maravilhoso, peça para o Claude transformar aquele estilo numa skill. A skill é um arquivo de instruções que o Claude guarda e usa sozinho sempre que o assunto aparece. É assim que você não precisa explicar tudo de novo.

Ficou do jeito que eu queria. Transforma o estilo deste dashboard numa skill chamada layout-dashboard. Guarde nela as cores, as fontes, o tamanho dos números, o respiro entre os blocos, o menu na lateral, os cards que abrem e as regras que a gente combinou nesta conversa. Escreva a skill para que, da próxima vez, eu só mande os dados e o painel saia neste estilo. Se precisar decidir alguma coisa comigo, me faça todas as perguntas de uma vez só, numeradas.

Na próxima vez, o que muda?

Tudo fica mais curto. Você só manda a planilha, ou só pede para ele fazer o dashboard, e ele cria exatamente no estilo que você aprovou.

Usa a skill layout-dashboard e monta o dashboard com a planilha anexada.

Continue aprendendo

• 5 sites de referência para o seu design não ter cara de IA (mais lugares para tirar os seus prints)
• Identidade visual com o Claude (para ter as cores e as fontes antes do Passo 3)
• Dashboard financeiro no Claude (um painel completo montado com os seus números)
• Como criar uma skill no Claude (o Passo 5 em detalhe)
• O Guia do Claude do zero ao avançado e a Biblioteca completa