Um sistema de design captura suas cores, tipografia, componentes e padrões de layout, para que Claude os aplique a cada novo design e apresentação. Claude os extrai dos ativos que você fornece, como bases de código, apresentações ou outras referências de design.
Os sistemas de design estão disponíveis em beta nos planos Pro, Max, Team e Enterprise. Eles estão ativados por padrão nos planos Pro, Max e Team. Nos planos Enterprise, eles estão desativados até que um proprietário ative Design systems em Organization settings > Artifacts. O Claude Design autônomo em claude.ai/design tem sua própria configuração separada.
Este guia é para o designer ou proprietário da marca que configurará o sistema de design. Nos planos Team e Enterprise, você só precisa fazer isso uma vez, e o trabalho de todos o utilizará depois disso.
Antes de começar
Nos planos Team e Enterprise, Design systems precisa estar ativado para sua organização, e um proprietário pode limitar quem pode publicar ou definir o padrão.
Você precisará de pelo menos um dos seguintes como material de origem:
Uma base de código com seu sistema de design ou biblioteca de componentes
Uma apresentação ou documento que reflita sua identidade visual
Ativos de diretrizes de marca (logos, paletas de cores, especificações de tipografia)
Criar um sistema de design
De um chat
Peça ao Claude para criar um sistema de design a partir de seus aplicativos conectados, arquivos enviados, arquivos Figma, apresentações, logos e fontes. Isso funciona melhor para sistemas de design de marca com fontes, cores e diretrizes.
Do Claude Code
Se seu sistema de design já existe como componentes React, execute /design-sync no Claude Code. Ele lê seus tokens e componentes diretamente e funciona melhor para sistemas de design de produtos em código.
Trazer um sistema de design de claude.ai/design
Abra a aba "Design" na parte inferior da barra lateral.
Clique em "Migrate team design systems" no banner.
Cada sistema de design se torna um artefato que Claude pode usar em qualquer chat, incluindo no Claude Code. Os sistemas de design migrados podem precisar de limpeza, então cada um mostra um banner onde você pode clicar em "Let Claude clean it up", e Claude organiza seu guia, tokens e componentes.
Gerenciar seus sistemas de design
Gerencie seus sistemas de design em Settings > Design systems. Nos planos Enterprise, os administradores podem reservar publicação, definição do padrão da organização e exclusão de sistemas de design para usuários específicos. Saiba mais no Artifacts admin guide for Team and Enterprise plans.
Usar um sistema de design com teclado
Para entrar e sair do painel de artefatos, consulte Use artifacts with a keyboard or screen reader. Esse artigo também explica o que significa foco, o que fazer em um Mac ou no Safari, e como os atalhos são escritos.
Um sistema de design abre como uma lista de seções ao lado da seção que você está lendo. Return em uma seção da lista a move para ela, Cmd+F6 (Ctrl+F6 no Windows) alterna entre a lista e a seção, e Cmd+Z (Ctrl+Z no Windows) desfaz uma alteração quando você não está em uma caixa de texto.
Nota: As visualizações de componentes ao vivo em um sistema de design não podem ser alcançadas com Tab, portanto não podem ser operadas pelo teclado. O nome e as notas de cada componente podem ser lidos.
Configure um sistema de design em claude.ai/design
Essas etapas usam Claude Design autônomo.
Criar ou alternar para sua organização
Abra Claude Design.
No canto inferior esquerdo do seletor de projeto, clique no nome da organização atual.
Selecione sua organização ou crie uma nova.
Conclua o fluxo de integração para o qual você foi redirecionado.
Enviar seus ativos de marca e produto
Durante a integração ou posteriormente nas configurações da sua organização, envie os ativos que definem sua marca e produto. Claude os analisa e extrai um sistema de design reutilizável.
Bases de código: Se seu sistema de design está em código, como uma biblioteca de componentes React, vincule ou envie o repositório. Claude lê os componentes e estilos.
Protótipos: Capturas de tela, fluxos da web e arquivos de design existentes.
Apresentações ou documentos: Até um PowerPoint ou PDF bem projetado que reflita sua marca pode funcionar. Claude extrai cores, padrões de layout e escolhas tipográficas.
Ativos individuais: Logos, arquivos de paleta de cores, espécimes de tipografia.
Você só precisa de uma fonte para começar, mas mais fontes dão ao Claude mais com o que trabalhar.
Revisar o sistema de design gerado
Após o envio, Claude gera um sistema de design para sua organização. Isso normalmente inclui:
Paleta de cores: Cores primárias, secundárias e de destaque extraídas de seus ativos.
Tipografia: Famílias de fontes, tamanhos e pesos.
Componentes: Botões, cartões, elementos de navegação e outros padrões de UI reutilizáveis.
Padrões de layout: Espaçamento, sistemas de grade e estruturas de página.
Para validá-lo, crie um projeto de teste e verifique se a saída corresponde à sua marca. Tente prompts como:
"Create a landing page for [your product]."
"Design a dashboard showing [relevant metrics]."
"Make a one-pager about [a topic your team commonly presents on]."
Disponibilizar para sua equipe
Quando estiver satisfeito com o sistema de design, ative a alternância "Published". Após a publicação, os projetos criados na tela inicial do Claude Design em sua organização usarão seu sistema de design em vez do padrão.
Atualizar seu sistema de design
Quando seu sistema de design mudar, você pode atualizá-lo no Claude Design. Nas configurações da sua organização Claude Design, clique no botão "Open" ao lado do sistema de design que deseja editar. Clique no botão "Remix" no canto superior direito para abrir a interface de chat no lado esquerdo da janela. A partir daqui, você pode trabalhar com Claude para alterar seu sistema de design.
Dicas para melhores resultados
Inclua exemplos reais, não apenas especificações. Uma página de destino ou site de marketing concluído diz ao Claude mais sobre a sensação da sua marca do que apenas uma paleta de cores.
Itere. Se a primeira extração não capturar bem sua marca, tente enviar ativos adicionais ou diferentes.