Claude Design by Anthropic Labs permite que você crie designs, protótipos interativos, apresentações e muito mais conversando com Claude. Este guia o orienta na criação de seu primeiro projeto, iteração de designs e aproveitamento máximo da ferramenta.
Claude Design by Anthropic Labs agora está disponível em visualização de pesquisa para planos Pro, Max, Team e Enterprise. Esse recurso está desativado por padrão para planos Enterprise.
Este guia pressupõe que o sistema de design da sua organização já foi configurado, portanto tudo o que você criar usará automaticamente as cores, tipografia e padrões de componentes da sua marca. Se você é um líder de design que precisa configurar ou modificar o sistema de design em si, consulte Configurar seu sistema de design no Claude Design.
Como Claude Design funciona
Claude Design tem duas áreas principais: uma interface de chat à esquerda e uma tela à direita. Você descreve o que deseja no chat, e Claude gera um design funcional na tela. A partir daí, você itera—refinando por meio de conversa e comentários inline até ficar perfeito.
O fluxo típico é:
Crie um projeto e adicione qualquer contexto relevante (capturas de tela, uma base de código).
Descreva o que você deseja construir.
Revise o que Claude gera na tela.
Itere usando mensagens de chat e comentários inline.
Exporte ou compartilhe quando estiver satisfeito com o resultado.
Criar um novo projeto
Quando você cria um projeto, ele herda automaticamente o sistema de design da sua organização. Você não precisa fazer upload de ativos de marca ou configurar nada—suas cores de marca, fontes e componentes já estão em vigor.
Adicione contexto ao seu projeto
Quanto mais contexto você fornecer a Claude, melhor será sua saída. Você pode anexar material de referência em qualquer ponto durante um projeto.
Capturas de tela, imagens ou ativos existentes: Faça upload de capturas de tela de designs existentes, produtos concorrentes, wireframes ou inspiração visual. Você também pode anexar um deck de slides existente ou documento com um estilo de design que deseja replicar. Útil para solicitações "faça parecer assim".
Bases de código e arquivos de design existentes: Vincule um repositório de código para que Claude entenda seus componentes existentes, arquitetura e padrões de estilo. Isso torna os protótipos mais prontos para produção desde o início. A importação também suporta várias maneiras de fazer upload do trabalho de design de produto existente.
Escreva prompts eficazes
Você não precisa ser um designer para obter ótimos resultados. Seja específico sobre o que está construindo, para quem é e o que é mais importante.
Um bom prompt inclui o objetivo (o que você está construindo), o layout (como as coisas devem ser organizadas), o conteúdo (que informações exibir) e o público (quem o usará). Claude também fará perguntas esclarecedoras se precisar de mais informações.
Aqui estão alguns exemplos de prompts que funcionam bem:
"Crie um painel mostrando receita mensal com filtros para região e linha de produtos."
"Projete um fluxo de integração de aplicativo móvel com 4 telas que orienta os usuários através de nossos recursos principais."
"Crie uma página de destino para nosso novo produto de API com uma seção hero, exemplos de código e preços."
"Crie um formulário para coletar feedback de clientes com perguntas condicionais baseadas em categoria."
"Projete uma ferramenta interna para nossa equipe de operações revisar e aprovar envios de conteúdo."
Itere em seu design
A primeira geração é um ponto de partida. O valor real vem da iteração.
Usando chat
O chat é melhor para mudanças amplas que afetam o design geral:
"Torne o esquema de cores mais escuro e minimalista."
"Reorganize o painel para que as métricas fiquem na linha superior e o gráfico abaixo."
"Adicione um painel de configurações no lado direito."
"Mostre-me 2–3 layouts alternativos para esta página."
Você também pode pedir a Claude para explicar suas decisões de design, sugerir melhorias ou revisar o design para acessibilidade.
Usando comentários inline
Comentários inline permitem que você clique diretamente em uma parte específica da tela e solicite uma mudança direcionada. Isso é mais rápido do que descrever a localização no chat.
Exemplos de bons comentários inline:
"Aumente o preenchimento deste botão."
"Mude isto para um dropdown em vez de botões de opção."
"Use a cor de marca primária aqui."
"Torne esta seção recolhível."
Nota: Se seus comentários não estiverem sendo capturados, cole o feedback diretamente no chat. Esta é uma solução alternativa conhecida para um problema intermitente em que os comentários podem desaparecer antes de Claude lê-los.
Quando usar chat vs. comentários
Use comentários para mudanças direcionadas no nível de componente ("corrigir este botão", "ajustar este espaçamento"). Use chat para mudanças estruturais, novas seções, mudanças estéticas ou qualquer coisa que exija explicação ou contexto.
Gerencie versões e revisões
Se você deseja explorar uma direção diferente sem perder seu trabalho atual, diga a Claude: "Salve o que temos e tente uma abordagem completamente diferente." Claude salvará seu projeto atual e confirmará onde está salvo, para que você possa referenciar iterações anteriores na conversa facilmente.
Exporte e compartilhe
Quando seu design estiver pronto, você pode compartilhá-lo com colegas ou exportá-lo para uso em outro lugar. O formato correto depende do seu caso de uso—se você está obtendo feedback de stakeholders, entregando para engenharia ou apresentando para um grupo.
Use o botão "Exportar" no canto superior direito ao visualizar seu projeto para escolher entre os seguintes formatos de exportação.
Baixar como .zip
Exportar como PDF
Exportar como PPTX
Enviar para Canva
Exportar como HTML independente
Entregar para Claude Code
Enviar para agente de codificação local
Enviar para Claude Code Web
Você também pode compartilhar projetos dentro de sua organização usando um link compartilhável. As opções de compartilhamento incluem acesso somente visualização, comentário e edição.
Uso de assinatura e preços
Veja aqui para mais detalhes: Uso de assinatura e preços do Claude Design.
Dicas para melhores resultados
Comece simples, depois adicione complexidade. Comece com o layout e conteúdo principais, depois adicione interações, casos extremos e polimento. Claude responde bem a solicitações incrementais.
Seja específico em seu feedback. "Isto não parece certo" é difícil de agir. "Aperte o espaçamento entre campos de formulário para 8px" dá a Claude exatamente o que precisa.
Referencie seu sistema de design. Se você sabe que um componente existe no sistema da sua marca, mencione-o pelo nome: "Use o componente Primary Button" ou "Aplique o padrão de layout Card."
Pense em responsividade cedo. Mencione se seu design precisa funcionar em dispositivos móveis, tablets e desktops, ou apenas em um deles.
Peça variações. Se você não tem certeza sobre uma direção, peça a Claude para mostrar 2–3 opções. Comparar alternativas é muito mais rápido do que adivinhar.
Peça feedback a Claude. Claude pode revisar seu design para acessibilidade, taxas de contraste, hierarquia de informações e usabilidade geral. Trate-o como um colaborador de design, não apenas um gerador.
Limitações conhecidas
Claude Design está disponível como uma visualização experimental do Anthropic Labs. Algumas coisas a serem observadas:
Persistência de comentários: Comentários inline ocasionalmente desaparecem antes de Claude lê-los. Para contornar isso, cole o texto do comentário no chat.
Erros de salvamento em visualização compacta: O modo de layout compacto pode disparar erros de salvamento. Se isso acontecer, mude para visualização completa e tente novamente.
Bases de código grandes: Vincular repositórios muito grandes pode causar atraso ou problemas no navegador. Vincule subdiretórios específicos em vez de monorepos inteiros.
Erros de chat: Se você receber um erro "chat upstream error", tente iniciar uma nova aba de chat dentro do mesmo projeto.