Claude Design permite que você crie designs, protótipos interativos, one-pagers e outros trabalhos visuais conversando com Claude. É um dos templates que você pode usar para iniciar um artefato, então pode usá-lo em qualquer conversa, no Claude Code e na aba Artefatos, com edição no canvas e seu sistema de design inclusos. Este guia o orienta na criação de seu primeiro design, iteração e aproveitamento máximo. Saiba mais sobre o que são artefatos e como usá-los.
Claude Design está disponível nos planos Free, Pro, Max, Team e Enterprise, e está ativado por padrão. Nos planos Enterprise, ativa por padrão em 15 de outubro de 2026, e os proprietários podem ativá-lo antes em Configurações da organização > Artefatos. A versão standalone em claude.ai/design encerra em 14 de dezembro de 2026. Saiba mais em Migrar do Claude Design standalone para Claude.
Este guia pressupõe que o sistema de design da sua organização já foi configurado, portanto tudo 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.
Onde você pode usar Claude Design
Em uma conversa: Peça a Claude um design, como "Faça um one-pager a partir desta proposta" ou "Crie um protótipo do fluxo de onboarding que acabamos de discutir." Claude o constrói ao lado de sua conversa, e você o refina lá. Você também pode selecionar Saída > Design na caixa de mensagem.
Na aba Artefatos: Vá para a aba Artefatos e escolha um template de Design.
No Claude Code: Peça a Claude para transformar sua ideia em um design, ou use /design para criar, editar e sincronizar designs, no desktop ou no terminal.
No app Claude para iOS e Android: Peça um design em qualquer conversa e volte depois para ver o resultado, então visualize-o em tela cheia na aba Artefatos. Você também pode editar um design. Para alterar as configurações de compartilhamento, use Claude na web ou desktop.
Em claude.ai/design: A versão standalone continua funcionando até encerrar em 14 de dezembro de 2026, e seus projetos existentes permanecem lá até então. Migre seus sistemas de design para Claude antes que encerre. Saiba mais em Migrar do Claude Design standalone para Claude.
Como Claude Design funciona
Claude Design combina uma conversa com um canvas. Você descreve o que quer, e Claude gera um design funcional no canvas ao lado da conversa. A partir daí, você itera—refinando através de conversa, comentários inline e diretamente no canvas até ficar certo.
O fluxo típico é:
Inicie um design a partir de uma conversa ou da aba "Artefatos".
Anexe ou importe o sistema de design que você quer que Claude use.
Adicione qualquer contexto relevante (screenshots, uma base de código).
Descreva o que você quer construir.
Revise o que Claude gera no canvas.
Refine através do chat, edite diretamente no canvas, 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 no Claude Design e Claude Code mantendo seu trabalho sincronizado. Use /design-sync para trazer seu sistema de design, para que tudo que você construir no Claude Design comece a partir de seus componentes existentes. Quando um design está pronto para se tornar software, você pode entregá-lo ao Claude Code, que continua a partir de seu trabalho existente em vez de começar do zero a partir de um screenshot.
Do Claude Code, use /design para importar um design para sua base de código, exporte seu código como um protótipo ao vivo, ou deixe Claude construir tudo do início ao fim.
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.
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 contra seu sistema de design e faz correções antes que você os veja.
Nos planos Enterprise, administradores podem reservar publicação, definir o padrão e deletar sistemas de design para usuários específicos. Saiba mais no guia de administrador de Artefatos para planos Team e Enterprise.
Traga um sistema de design do claude.ai/design
Sistemas de design que você criou na versão standalone em claude.ai/design podem ser transferidos, para que Claude possa usá-los em qualquer conversa, incluindo no Claude Code. Migre-os antes que a versão standalone encerre em 14 de dezembro de 2026. Saiba mais em Migrar do Claude Design standalone para Claude.
Adicione contexto ao seu projeto
Quanto mais contexto você der a Claude, melhor será sua saída. Você pode anexar material de referência em qualquer ponto durante um projeto.
Screenshots, imagens ou ativos existentes: Faça upload de screenshots 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 você quer 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 protótipos mais prontos para produção desde o início. A importação também suporta várias maneiras de fazer upload de 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 dashboard mostrando receita mensal com filtros para região e linha de produtos."
"Projete um fluxo de onboarding de aplicativo móvel com 4 telas que orienta os usuários através de nossos recursos principais."
"Construa uma landing page 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."
Refine seu design
A primeira geração é um ponto de partida. O valor real vem da iteração.
Usando chat
Chat é melhor para mudanças amplas que afetam o design geral:
"Torne o esquema de cores mais escuro e minimalista."
"Reorganize o dashboard 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 alteração 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.
Altere isto para um menu suspenso em vez de botões de opção.
Use a cor primária da marca 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.
Editar 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 alterações direcionadas no nível de componente ("corrija este botão", "ajuste este espaçamento"). Use chat para alterações estruturais, novas seções ou qualquer coisa que exija explicação ou contexto. Editar diretamente para mudanças visuais e estéticas rápidas.
Use Claude Design com um teclado
Para entrar e sair do painel de artefatos e comentar no cabeçalho do painel, 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 as tabelas mostram as teclas.
Um design é uma tela de pranchetas. Cada prancheta contém camadas, como texto, formas e imagens, e uma camada pode conter outras camadas dentro dela.
Mover entre as áreas do editor
Pressione F6 para mover para a próxima área e Shift+F6 para mover para a anterior. Cmd+F6 (Ctrl+F6 no Windows) funciona no lugar de F6, com ou sem Shift. As áreas são a barra superior, a tela e o painel de propriedades. Quando algo está selecionado e o painel de propriedades está fechado, F6 também para na barra de ferramentas que flutua sobre a seleção.
Nota: Termine de editar o texto antes de pressionar F6. Pressione Escape ou Tab para terminar a edição primeiro. F6 o move para fora de uma edição de texto sem terminá-la.
Trabalhar dentro de uma prancheta
Pressione Tab até chegar ao título de uma prancheta. Seu nome inclui sua posição, como prancheta 1 de 7. A partir do título, Space seleciona a prancheta e Return entra nela, em suas camadas. Uma vez dentro:
Tab e Shift+Tab movem entre camadas. Home e End movem para a primeira e última camada.
Return em uma camada que contém outras camadas move para dentro dela. Em uma camada de texto, Return inicia a edição.
Shift+Return sobe um nível.
Escape sai da prancheta e a prancheta permanece selecionada. Escape novamente limpa a seleção.
Quando você está editando uma camada de texto, pressione Escape ou Tab quando terminar. Conforme você se move, o editor informa aos leitores de tela o que está selecionado e sua posição, como 1 de 5.
Mover, duplicar e excluir
Para mover uma prancheta, selecione-a (Space em seu título) e pressione as teclas de seta. Ela se move um pixel por vez, ou 10 com Shift. Dentro de uma prancheta, as teclas de seta fazem outra coisa: com ou sem Shift, elas o movem para a próxima ou anterior camada e nunca movem a camada em si. Para mover a camada em que você está, mantenha Option (Alt no Windows) e pressione uma tecla de seta. Uma camada colocada livremente se move um pixel, ou 10 com Shift. Uma camada que faz parte de uma linha, coluna ou grade troca de lugar com seu vizinho: Up ou Left a move para trás, e Down ou Right a move para frente. O editor envia uma breve confirmação do movimento para leitores de tela.
Com uma prancheta ou camada selecionada, pressione Cmd+D (Ctrl+D no Windows) para duplicá-la e Delete ou Backspace para excluí-la. Pressione Cmd+Z (Ctrl+Z no Windows) para desfazer. O editor envia uma breve confirmação de cada uma dessas ações para leitores de tela.
Use a barra de ferramentas sobre uma seleção
A barra de ferramentas que flutua sobre uma seleção está lá apenas enquanto o painel de propriedades está fechado, e F6 a alcança. Nela, as teclas de seta se movem entre seus controles, Home e End se movem para o primeiro e último, e Escape volta para a tela com sua seleção mantida. Você também pode alcançar cada controle com Tab.
Use o painel de propriedades e a lista de camadas
Cmd+\ (Ctrl+\ no Windows) abre o painel de propriedades e move o foco para ele. Pressioná-lo novamente fecha o painel e o foco retorna ao botão "Propriedades" na barra superior. Pop-ups de cor, fonte e outros no painel recebem foco quando abrem, e Escape os fecha. Quando você escolhe uma cor de texto, o seletor de cores informa se seu contraste com o fundo é bom ou ruim.
Na lista de camadas do painel de propriedades: as teclas de seta para cima e para baixo se movem entre linhas, a tecla de seta para a direita expande uma linha e depois se move para dentro dela, a tecla de seta para a esquerda a recolhe e depois se move para fora, Return ou Space seleciona essa camada na tela, e Return novamente em uma camada de texto a edita.
Aviso: Na lista de camadas, Delete, Backspace e Cmd+X (Ctrl+X no Windows) atuam no que está selecionado na tela, o que pode não ser a linha para a qual você se moveu. Pressione Return na linha primeiro.
Atalhos de teclado do Claude Design
Ação | Mac | Windows |
Próxima área | F6 ou Cmd+F6 | F6 ou Ctrl+F6 |
Área anterior | Shift+F6 ou Cmd+Shift+F6 | Shift+F6 ou Ctrl+Shift+F6 |
Mover para o título de uma prancheta | Tab | Tab |
Selecione a prancheta (no seu título) | Space | Space |
Entre na prancheta, mova-se dentro de uma camada ou edite texto | Return | Enter |
Próxima camada, camada anterior (dentro de uma prancheta) | Tab, Shift+Tab ou as setas | Tab, Shift+Tab ou as setas |
Primeira camada, última camada | Home, End | Home, End |
Subir um nível (dentro de uma prancheta) | Shift+Return | Shift+Enter |
Saia da prancheta | Escape | Escape |
Mova a prancheta selecionada (no seu título) | Setas (Shift para 10 pixels) | Setas (Shift para 10 pixels) |
Mova ou reordene a camada em que você está (dentro de uma prancheta) | Option+setas | Alt+setas |
Duplicar | Cmd+D | Ctrl+D |
Excluir | Delete ou Backspace | Delete ou Backspace |
Copiar, colar | Cmd+C, Cmd+V | Ctrl+C, Ctrl+V |
Cortar (uma camada) | Cmd+X | Ctrl+X |
Agrupar, desagrupar (camadas) | Cmd+G, Cmd+Shift+G | Ctrl+G, Ctrl+Shift+G |
Virar horizontalmente, virar verticalmente | Shift+H, Shift+V | Shift+H, Shift+V |
Selecionar tudo | Cmd+A | Ctrl+A |
Desfazer, refazer | Cmd+Z, Cmd+Shift+Z | Ctrl+Z, Ctrl+Shift+Z |
Abrir ou fechar o painel de propriedades | Cmd+\ | Ctrl+\ |
Ampliar, reduzir, ajustar à janela | Cmd+Plus, Cmd+Minus, Cmd+0 | Ctrl+Plus, Ctrl+Minus, Ctrl+0 |
Mostrar ou ocultar guias de layout | Shift+G | Shift+G |
Gerenciar versões e revisões
Se você quiser 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.
Exportar e compartilhar
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
Exportar para Google Slides
Exportar como HTML independente
Enviar para as ferramentas que você já usa: Adobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel e Wix
Entregar ao Claude Code
Enviar para agente de codificação local
Enviar para Claude Code Web
Os designs começam privados para você. Para compartilhar um, clique em
Uso e preços
Claude Design conta para os mesmos limites de uso do resto do Claude. A atividade de design é extraída do mesmo pool do resto do seu trabalho com Claude, incluindo Claude Code, portanto não há uma permissão separada de Claude Design para rastrear. Projetos complexos com grandes bases de código ou muitas iterações consomem mais uso.
Se você atingir seus limites de uso, Claude Design fica indisponível até que seus limites sejam redefinidos. Se você habilitou créditos de uso, pode continuar trabalhando após atingir seus limites inclusos. Saiba mais sobre como funcionam os limites de uso e comprimento.
Nota: Claude Design tinha anteriormente sua própria permissão semanal, separada de seus outros limites de uso. Toda a atividade de 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.
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 sobre responsividade cedo. Mencione se seu design precisa funcionar em dispositivos móveis, tablet e desktop, 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, proporções de contraste, hierarquia de informações e usabilidade geral. Trate-o como um colaborador de design, não apenas um gerador.
Limitações conhecidas
Algumas coisas a ter em mente:
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.
Grandes bases de código: Considere vincular repositórios muito grandes do Claude Code para evitar lag ou problemas do navegador. Para sincronizar um sistema de design, use /design-sync do Claude Code.
Erros de chat: Se você receber um erro "chat upstream error", tente iniciar uma nova aba de chat dentro do mesmo projeto.
Dispositivo móvel: Não é possível alterar as configurações de compartilhamento no aplicativo Claude para iOS e Android, portanto você precisará usar Claude na web ou desktop para isso.
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 de sistema de design: A importação de sistema de design é tão boa quanto sua fonte. Uma base de código bagunçada ou um arquivo incompleto aparecerá na saída.
Histórico de versões: Claude Design ainda não possui histórico de versões.
Exclusão da lista de camadas: Na lista de camadas do painel de propriedades, Delete, Backspace e cut atuam no que está selecionado na tela, não na linha para a qual você se moveu. Pressione Return na linha primeiro.
Adição a um design com teclado: Colocar uma nova camada de texto, artboard, forma ou nota na tela requer um mouse ou trackpad. Peça ao Claude para adicioná-lo.