Guia de estilo e biblioteca de componentes

O app lê as páginas do projeto e monta um guia de estilo com:

• Cores — o código de cada cor e quantas vezes aparece como texto, fundo ou borda;
• Tipografia — fontes, tamanhos e pesos, com exemplos;
• Bordas e sombras — arredondamentos e sombras usados;
• Variáveis CSS — quando o sistema define, por exemplo, --cor-primaria;
• Componentes — botões, campos, combos, tabelas, cards, abas, menus, avisos, formulários, cabeçalhos e modais. Cada um com a imagem, a página de origem e quantas vezes é usado.

Abrir

Clique no ícone 🎨 no topo (ao lado do ?). Na primeira vez, clique em Gerar guia de estilo. Depois de capturar ou alterar páginas, clique em Atualizar.

Achar um componente

• Use a busca no topo: "tabela", "botão salvar", "#2563eb", "Arial".
• Ou navegue pelas categorias na lateral.
• Clique na imagem para ampliar; clique numa cor para copiar o código.

Usar um componente numa página

1. No componente, clique em Usar em página….
2. Escolha a página: uma que já existe ou + Página nova… (dê um nome).
3. Diga onde colocar (ex.: "abaixo do título", "ao lado do botão Novo").
4. Opcional: escreva ajustes (ex.: "trocar o texto para Exportar", "só as colunas Nome e CPF").
5. Clique em Enviar ao Claude. Ele insere o componente com o mesmo visual (copia o CSS se precisar) e registra a alteração. Depois você ajusta pelo chat, como sempre.

Outros botões do componente:

• HTML — mostra e copia o código do componente;
• ↗ — abre a página de onde ele veio.

Documento do guia

Gerar documento cria um .md com cores, tipografia e componentes (com imagens). Ele abre no visualizador, onde você pode Gerar PDF, Editar e Abrir pasta. Para reabrir, use a lista de documentos no visualizador.

Os dados do guia ficam na pasta estilo/ do projeto (Abrir pasta).