Cinco passos até o seu dashboard

Você não desenha nada. Escolhe a aparência, escolhe onde cada bloco fica, escolhe os blocos, baixa o arquivo e pede pra uma IA preencher com os seus números. Sempre nessa ordem.

  1. 1Estilo
  2. 2Layout
  3. 3Blocos
  4. 4Arquivo
  5. 5Sua IA
1
Passo 1

O estilo muda a cor do dashboard inteiro, de uma vez

Estilo é a aparência: cor de fundo, cor de destaque, fonte. Escolher um estilo pinta o dashboard inteiro — você não ajusta bloco por bloco. Repare: é o mesmo bloco de números, só o estilo muda:

Light Report
Nocturne
Bauhaus

Todos os estilos disponíveis estão no Catálogo.

2
Passo 2

O layout decide onde cada bloco fica na tela

Layout é só a arrumação: quantos blocos cabem e o tamanho de cada um. Não mexe em cor nem em número, só em posição. Tem várias arrumações prontas pra escolher:

Clássico2 colunas
Painel de controlefaixas
Três colunasterços
Painel denso3-2-2
Mosaicoassimétrico
Mapa em destaquegeográfico
3
Passo 3

Cada bloco já vem pronto — você só escolhe qual usar

Um bloco é um gráfico, um número em destaque ou uma tabela, já pronto no estilo que você escolheu. Você não desenha nem programa nada, só escolhe qual bloco mostra a informação que você quer:

Os 32 blocos disponíveis estão no Catálogo.

4
Passo 4

Essas escolhas viram um arquivo pronto pra abrir

Depois de escolher estilo, layout e blocos, o botão “Baixar” entrega um arquivo HTML único — abre em qualquer navegador, sem instalar nada. Ele já vem preenchido com números de exemplo, só pra você ver como fica. Este é um dashboard pronto, o E-commerce de moda:

5
Passo 5

Pra trocar os números de exemplo pelos seus, cole isso numa IA

O arquivo baixado tem números fictícios. Pra virar os seus números, você não edita nada no código — cola três coisas numa IA (ChatGPT, Claude…): este texto de instrução, o arquivo baixado e a sua planilha. A IA devolve o mesmo arquivo, mesmo visual, com os seus números no lugar dos fictícios. É o mesmo texto que oMontador copia pra você:

Você é um assistente que preenche dashboards prontos. Vou anexar DOIS itens:
(1) um arquivo HTML de dashboard já desenhado e funcional;
(2) meus dados (CSV, Excel exportado como CSV, ou colados como tabela).

SEU TRABALHO
Substituir os dados fictícios do arquivo pelos meus, sem alterar nada do design.

COMO O ARQUIVO É ORGANIZADO
- No topo do <style> há um bloco :root com variáveis (--bg, --ink, --acc etc.). É o estilo. NÃO TOQUE.
- O <body> tem uma grade de blocos (.grade). Cada bloco é um <section>. NÃO mude a estrutura, a ordem nem os spans.
- Perto do fim há um <script> com dois objetos:
  · DADOS = valores que alimentam os gráficos (arrays e objetos simples);
  · SPECS = funções que desenham os gráficos. NÃO edite as funções — edite só DADOS.
- Textos e números fora dos gráficos (título, número-herói, KPIs, tabelas) estão direto no HTML dos <section>.

PASSO A PASSO
1. Leia meus dados e me diga em UMA linha o que você entendeu (período, granularidade, colunas). Se algo for ambíguo (ex.: qual coluna é a receita), PERGUNTE antes de gerar.
2. Mapeie cada bloco do dashboard para os meus dados:
   - Número-herói = a métrica mais importante do conjunto (uma só).
   - Séries temporais = colunas com data/período.
   - Composição (donut/treemap) = colunas de categoria.
   - Tabelas = as linhas mais relevantes, no máximo 6, com total no rodapé.
3. Substitua os valores. Regras de formato:
   - Português do Brasil: R$ 1.234,56 · 12,3% · 31/12/2025 · milhar com ponto.
   - Abreviações: R$ 1,2M para milhões, R$ 340K para milhares, quando o espaço for curto.
   - Deltas sempre com direção (▲/▼) e comparação explícita ("vs. mês anterior").
4. Se um bloco não tiver dado correspondente, NÃO invente números: adapte o bloco para outra leitura real dos meus dados ou use o estado vazio ("Nenhum dado no período").
5. Recalcule totais e percentuais — eles precisam fechar com os dados das linhas.

PROIBIDO
- Mudar QUALQUER coisa no CSS, no :root, nas fontes ou nos links de fontes.
- Adicionar ou remover <section> da grade, mudar grid-column ou alturas.
- Editar as funções dentro de SPECS (só o objeto DADOS).
- Inventar dados que não estão na minha planilha.

ENTREGA
Devolva o arquivo HTML COMPLETO (do <!DOCTYPE html> ao </html>), pronto para eu salvar como .html e abrir no navegador. Antes do código, liste em até 5 linhas o que você preencheu em cada bloco.

CONTEXTO DO ARQUIVO
- Estilo: Soft SaaS · Layout: Clássico
- Blocos, na ordem: hero, gauge, linha, donut, tabela, ranking

MEUS DADOS
[descreva em 1–2 frases: o que é a planilha, o período, e a pergunta que o painel deve responder]