Como usar o design system do projeto na Equipe IA
Peça ao Claude conectado para ler o repositório e montar cores, fontes, componentes e logotipo, e leve a mesma identidade para outros projetos.
A aba Design system da Equipe IA mostra a identidade visual do projeto: cores, fontes, formas, componentes, logotipo e regras de uso. Quem monta tudo isso é o Claude conectado, que lê o repositório do projeto. A aba fica entre Agentes e Conhecimento, e qualquer outro projeto pode baixar o resultado para nascer com a mesma identidade.
Processar o design system do repositório
- Passo 1: Abra Equipe IA e a aba Design system.
- Passo 2: Clique em Processar design system do repositório. Depois da primeira vez, o botão vira Processar de novo.
- Passo 3: Aguarde. O aviso O Claude está lendo o repositório diz que leva alguns minutos e que você pode sair da tela. A aba ganha o selo processando, e depois processado (ou com erro).
- Passo 4: Quando terminar, o topo mostra o nome, o resumo, as características e a frase Processado há quanto tempo, por qual Claude e lendo quais arquivos.
Qualquer membro do projeto pode pedir o processamento. O botão só libera com o Claude do projeto conectado e com o repositório na máquina dele. Sem isso, a aba mostra Libera quando o Claude do projeto estiver conectado, com o botão Ligar o Claude. Se o Claude está ligado mas não tem o repositório, o aviso pede para apontar a pasta do repositório no Claude. Veja como ligar o Claude.
O que a aba mostra
Uma faixa de atalhos leva a cada seção:
- Amostra: uma tela montada só com os tokens, para ver como as telas novas devem parecer. Quando o projeto tem modo escuro, os botões Claro e Escuro trocam a amostra.
- Cores: os tokens de cor do código, com o valor exato e onde cada um é usado, em grupos: Marca e destaque, Superfícies, Texto, Bordas, Estados e Outras.
- Tipografia, Formas e espaço (cantos, espaçamentos, layout, profundidade) e Componentes: os componentes base que as telas novas devem reaproveitar.
- Logotipo: as versões do logotipo.
- Faça e não faça: as regras em duas colunas.
- Usar em outros projetos e DESIGN.md, descritos abaixo.
O logotipo e as versões
O Benflow mostra o logotipo em cinco versões: Original, Em preto, Em branco, Fundo branco e Fundo preto, cada uma com o link Baixar. Embaixo, a origem: Copiado do repositório, Da marca do projeto no Benflow ou Desenhado pelo Claude.
Quando o projeto não tem logotipo, o aviso Falta o logotipo oferece Criar logotipo com o Claude (qualquer membro, com o Claude do projeto ligado). O Claude desenha um na identidade do design system, com as versões em preto, em branco, com fundo branco e com fundo preto. Um logotipo desenhado pode ser trocado em Desenhar outro. O admin também pode enviar o logotipo do projeto em Enviar o logotipo, que leva às configurações da marca, ou trocar a marca com Trocar em Marca.
Usar em outros projetos
A seção Usar em outros projetos dá o jeito de levar a identidade para uma aplicação nova. O link abre o DESIGN.md e os logotipos sem login, para o Claude Code (ou quem for construir) baixar:
- Passo 1: Cole no Claude Code do outro projeto: copie o prompt e cole. Ele baixa o DESIGN.md e os logotipos, leva os tokens para o tema e passa a seguir o design system em toda tela.
- Passo 2: Ou baixe pelo terminal, na pasta do projeto: copie os comandos, que baixam o DESIGN.md e os logotipos.
- Passo 3: O Link do DESIGN.md também fica à mão (e em JSON, para quem prefere).
O arquivo DESIGN.md
O DESIGN.md é o arquivo que os agentes de IA leem: os tokens no cabeçalho e as regras em texto. Em DESIGN.md, clique em Mostrar o arquivo para ler aqui (e Esconder o arquivo para recolher). Baixar DESIGN.md salva o arquivo, tanto no topo da aba quanto nesta seção.