Claude Design 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 agora está disponível em beta para planos Pro, Max, Team e Enterprise. Esse recurso está desativado por padrão para planos Enterprise. Você pode usá-lo na web em claude.ai/design ou na barra lateral do Claude Desktop.
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 próprio sistema de design, 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, comentários inline e diretamente na tela até ficar perfeito.
O fluxo típico é:
Crie um projeto.
Anexe ou importe o sistema de design com o qual você deseja que Claude trabalhe.
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.
Refine por meio de chat, edite diretamente na tela ou deixe comentários inline.
Exporte ou compartilhe quando estiver satisfeito com o resultado.
Mude entre Claude Design e Claude Code
Você pode alternar entre trabalhar em Claude Design e Claude Code mantendo seu trabalho sincronizado. Use /design-sync para importar seu sistema de design, para que tudo o que você construir em Claude Design comece com seus componentes existentes. Quando um design está pronto para se tornar software, você pode entregá-lo ao Claude Code, que continua a partir do seu trabalho existente em vez de começar do zero a partir de uma captura de tela.
Se preferir trabalhar a partir do Claude Code, conecte o servidor Claude Design MCP para criar e editar designs sem sair do seu terminal:
Adicione o servidor:
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
2. Execute /design-login para fazer login.
Depois de conectado, você pode importar um design para sua base de código, exportar seu código como um protótipo ao vivo ou deixar Claude construir tudo do início ao fim.
Crie 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.
Anexe ou importe seu sistema de design
Traga um ou vários sistemas de design de um repositório GitHub, arquivos de design, uploads brutos ou sua base de código local usando o comando /design-sync no Claude Code. Claude constrói com seus componentes reais do sistema de design, verifica sua própria saída em relação ao seu sistema de design e faz correções antes de você vê-las.
Para equipes maiores, a função personalizada Claude Design Admin permite que um administrador aprove um sistema padrão e bloqueie edições, para que o trabalho sempre corresponda às diretrizes da sua empresa.
Adicione contexto ao seu projeto
Quanto mais contexto você fornecer ao 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 você 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 com base na categoria."
"Projete uma ferramenta interna para sua equipe de operações revisar e aprovar envios de conteúdo."
Refine 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 ao 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 isso 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.
Edite diretamente na tela
Use controles de layout avançados para mudanças visuais e estéticas rápidas, especificamente para arrastar, redimensionar e alinhar elementos diretamente.
Quando usar chat vs. comentários vs. editar diretamente
Use comentários para mudanças direcionadas no nível de componente ("corrija este botão", "ajuste este espaçamento"). Use chat para mudanças estruturais, novas seções ou qualquer coisa que exija explicação ou contexto. Edite diretamente para mudanças visuais e estéticas rápidas.
Gerencie versões e revisões
Se você deseja explorar uma direção diferente sem perder seu trabalho atual, diga ao Claude: "Salve o que temos e tente uma abordagem completamente diferente." Claude salvará seu projeto atual e confirmará onde foi salvo, para que você possa referenciar iterações anteriores na conversa facilmente.
Exporte e compartilhe
Depois que 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
Envie para as ferramentas que você já usa, incluindo Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel e Wix, com mais destinos em breve.
Entrega 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 e preços
Claude Design conta para os mesmos limites de uso que o resto do Claude. A atividade de design é extraída do pool compartilhado que você usa para chat, Claude Code e Cowork, portanto não há uma permissão separada do Claude Design para rastrear. Projetos complexos com bases de código grandes ou muitas iterações consomem mais uso.
Se você atingir seus limites de uso, Claude Design ficará indisponível até que seus limites sejam redefinidos. Se você habilitou créditos de uso, poderá continuar trabalhando após atingir seus limites inclusos. Saiba mais sobre como funcionam os limites de uso e comprimento.
Nota: Claude Design anteriormente tinha sua própria permissão semanal, separada de seus outros limites de uso. Toda a atividade do Claude Design agora conta para os limites compartilhados do seu plano.
Dicas para melhores resultados
Importe um sistema de design completo. Importe um sistema de design completo que inclua seus estilos, fontes e componentes.
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. "Isso não parece certo" é difícil de agir. "Aperte o espaçamento entre campos de formulário para 8px" dá ao Claude exatamente o que ele precisa.
Faça referência ao 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 ao Claude para mostrar 2–3 opções. Comparar alternativas é muito mais rápido do que adivinhar.
Peça feedback ao 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 agora está disponível em beta. Algumas coisas a serem observadas:
Persistência de comentários: Comentários inline ocasionalmente não aparecem na página, mas você ainda pode vê-los abrindo a visualização de comentários.
Bases de código grandes: Considere vincular repositórios muito grandes do Claude Code para evitar atraso ou problemas do navegador. Para sincronizar um sistema de design, use
/design-syncdo Claude Code.Erros de chat: Se você receber um erro "chat upstream error", tente iniciar uma nova aba de chat dentro do mesmo projeto.
Disponibilidade: Claude Design está disponível apenas na web e desktop.
Edição multi-pessoa: Duas ou mais pessoas editando um projeto de design ao mesmo tempo ainda é básico e pode não funcionar de forma confiável.
Importação do sistema de design: A importação do sistema de design é tão boa quanto sua fonte. Uma base de código confusa ou um arquivo incompleto aparecerá na saída.