Documentação
Como usar o
Repertório
Biblioteca local de referências visuais. O ponto de partida de todo projeto com Claude Code.
O que é este app
O Repertório é uma biblioteca pessoal de referências visuais de web design. Ele transforma capturas de tela, links e anotações em vocabulário reutilizável que alimenta os prompts do Claude Code.
A ideia central é que design com direção começa antes do prompt. Ao organizar referências em famílias visuais com vocabulário próprio, você dá ao Claude um contexto visual real — em vez de depender de padrões genéricos.
"Uma boa interface começa antes do prompt. Salve o que interrompe o seu scroll e transforme gosto em vocabulário reutilizável." — Metodologia Anti-AI Slop
Com repertório
- → referências reais
- → vocabulário definido
- → intenção clara
- → regras de sempre e nunca
- → prompts com direção
Sem repertório
- × gradiente azul e roxo
- × tipografia genérica
- × cards arredondados
- × frases vagas
- × layout de IA óbvio
Onde os dados são salvos
Todos os dados são salvos localmente em um arquivo JSON dentro da pasta do projeto: data/db.json. Imagens e arquivos enviados ficam em public/uploads/.
✓
100% local
Nada é enviado para servidores. Os arquivos ficam na sua máquina.
✓
Persistente
Dados sobrevivem a reinicializações do servidor e do navegador.
!
Backup manual
Use Exportar JSON regularmente. Os arquivos em public/uploads/ não entram no JSON exportado.
Para transferir para outro computador: use Exportar → copie o JSON → Importar no novo computador. Imagens precisam ser copiadas manualmente de public/uploads/.
Projetos
Projetos são uma camada organizacional acima das famílias visuais. Use para separar referências por cliente, contexto ou fase de trabalho.
Como criar
Na sidebar, clique em + Novo projeto. Digite o nome e pressione Enter ou clique no botão laranja. Para cancelar, clique no ×.
Como usar
Ao adicionar ou editar uma referência, escolha o projeto no campo Projeto. Uma referência pode não ter projeto (ficará em "Todos os projetos"). Selecionar um projeto na sidebar filtra as referências.
Ao excluir um projeto
As referências não são excluídas — ficam disponíveis em "Todos os projetos". Use o ícone × ao lado do nome do projeto na sidebar.
Famílias personalizadas
Além das 10 famílias visuais padrão, você pode criar famílias próprias para estilos que não se encaixam nas categorias existentes.
Como criar
Na sidebar, clique em + Nova família. Digite o nome e confirme. Famílias criadas por você aparecem com um × para exclusão.
Diferença das famílias padrão
As 10 famílias padrão (editorial técnico, print-tech, etc.) não podem ser excluídas. Famílias personalizadas têm botão × sempre visível na sidebar.
Ao excluir uma família personalizada
As referências dessa família são movidas automaticamente para "editorial técnico". Confirme o aviso antes de excluir.
Como adicionar uma referência
- 01
Clique em "+ Nova entrada" no cabeçalho.
- 02
Preencha o nome da referência — único campo obrigatório.
- 03
Cole a URL do site ou referência original.
- 04
Selecione o Projeto (opcional) e a Família visual.
- 05
Faça upload de um screenshot. O arquivo é salvo localmente em public/uploads/.
- 06
Adicione arquivos extras (Figma exports, PDFs, referências adicionais).
- 07
Adicione tags para facilitar filtros futuros (ex: editorial, sans, assimétrico).
- 08
Preencha os campos de vocabulário: tipografia, paleta, layout, elementos marcantes.
- 09
Escreva o prompt de imagem — descrição para gerar assets visuais nesse estilo.
- 10
Defina as regras de Sempre e Nunca — o que copiar e o que evitar deste estilo.
- 11
Clique em Salvar.
Campos explicados
Identificador da referência. Pode ser o nome do site, do estilo ou uma descrição sua (ex: 'Manual de campo editorial', 'Kestrel Analytics').
Link do site ou referência original. URLs navegáveis ensinam mais do que imagens isoladas — inclua sempre que possível.
Organização por contexto de trabalho. Uma referência sem projeto fica disponível em todos os projetos.
Categoria visual principal. Agrupe por família, não por projeto — assim a referência serve para múltiplos trabalhos futuros.
Imagem principal da referência. Salvo localmente em public/uploads/. Formatos: JPG, PNG, WebP, GIF.
Arquivos extras relacionados: exports do Figma, PDFs de brand guide, referências de tipografia, etc. Também salvos localmente.
Palavras-chave livres. Use termos de vocabulário visual: editorial, condensado, sem-serif, grade, assimétrico, denso, cinematográfico.
Texto livre sobre o estilo. O que chama atenção, qual a personalidade, onde se encaixaria.
Combinação tipográfica característica. Ex: display pesada + sans neutra + mono. Quanto mais específico, melhor para o Claude.
Cores ou sensação cromática. Pode ser descritivo (papel, tinta, laranja de acento) ou com valores hex. Evite nomes genéricos como 'azul e branco'.
Composição visual. Ex: assimétrica, blocos editoriais, grade de 12 colunas, seções de largura plena, ritmo vertical forte.
O que diferencia visualmente este estilo. Ex: linhas horizontais, numeração grande, imagem em destaque, fundo granulado.
Descrição para gerar imagens de hero ou fundo com IA. Ex: 'Paisagem monocromática, fotografia analógica, grão de filme, alto contraste'.
Regras para copiar deste estilo. Entram direto nos prompts do Claude. Ex: hierarquia forte, contraste alto, ritmo editorial.
O que este estilo nunca faz — e deve ser evitado. Ex: brilho, glassmorphism, centralizar tudo, cards aninhados.
Famílias visuais padrão
As 10 famílias padrão são categorias de linguagem visual. Organize por família, não por projeto — assim uma referência serve para múltiplos trabalhos futuros.
Inspirado em publicações impressas técnicas. Grade rígida, tipografia condensada, numeração, linhas como elementos de design.
Fusão de estética de impressão com tecnologia. Texturas de papel, fontes de cartaz, paletas de tinta.
Brutalismo com higiene. Bordas expostas, tipografia pesada, paleta limitada, zero decoração supérflua.
Espaço vazio como elemento. Paleta de um ou dois tons, hierarquia por escala, zero ruído visual.
Nostalgia de ficção científica dos anos 70-80 com controle contemporâneo. Monoespaço, paleta restrita, terminais.
Linguagem de cinema aplicada à web. Proporções de tela larga, tipografia de crédito, ritmo lento e deliberado.
Design gráfico suíço clássico. Grade de 12 colunas, tipografia sistemática, hierarquia rígida, funcionalidade como estética.
Linguagem de ferramentas profissionais. Densidade de informação, sem concessões decorativas, foco em dados.
Organizações, museus, sistemas de identidade. Seriedade, consistência, tipografia clássica, paleta institucional.
Máxima densidade de informação. Múltiplos painéis, tipografia pequena, dados como protagonistas.
Modos de visualização
Grid
Todas as referências em grade de cards. Melhor para navegar visualmente e comparar screenshots. Clique em um card para abrir o detalhe em modal.
Detalhe
Lista lateral à esquerda + painel de detalhe completo à direita. Melhor para ler o vocabulário e copiar para prompts. Clique em uma referência na lista para ver todos os campos.
Combine os modos com os filtros da sidebar (projeto + família) e a barra de busca (nome, descrição, tags).
Importar e Exportar
Exportar JSON
Baixa um arquivo .json com todos os projetos, famílias personalizadas e referências. Use para:
- → Backup periódico (recomendado semanalmente)
- → Transferir para outro computador
- → Compartilhar seu repertório com alguém
- → Editar manualmente se necessário
Importar JSON
Faz merge com os dados existentes — não sobrescreve. Projetos, famílias e referências com IDs duplicados são ignorados. Imagens precisam ser copiadas manualmente para public/uploads/.
Uso com Claude Code
O Repertório alimenta o Prompt de 4 Partes da metodologia. Antes de criar qualquer interface com o Claude Code, abra o app e decida qual família visual vai usar.
Fluxo recomendado
- 01
Abra o Repertório e navegue pelo modo Detalhe.
- 02
Filtre por família visual na sidebar — escolha a que melhor combina com o projeto.
- 03
Leia as regras de Sempre e Nunca das referências mais relevantes.
- 04
Copie Tipografia, Paleta, Sempre e Nunca para o prompt do Claude.
- 05
Cole no campo [ESTÉTICA] e [GUARDRAILS] do Prompt de 4 Partes.
- 06
Adicione as URLs ou screenshots no campo [REFERÊNCIAS].
- 07
Peça ao Claude para propor 5 direções antes de escrever código.
- 08
Compare as direções, escolha uma e itere até parecer seu.
Quanto mais completa a entrada (tipografia, paleta, regras, prompt de imagem), mais específico e fora do padrão genérico será o output do Claude.
Onde encontrar referências para cadastrar