O que é o Claude Design? Guia Completo sobre Preços, 7 Métodos de Criação e Exemplos de Prompts [Atualizado em 2026]

Tradução para Português - Brasil (Português):

Em 18 de junho de 2026, o Claude Design recebeu uma grande atualização.

Os recursos aumentaram e a interface mudou.

Eu mesmo verifiquei enquanto usava, então vou anotar em ordem onde clicar na tela.

Este artigo é para "aprender enquanto usa junto comigo".

Por favor, leia enquanto abre realmente [claude.ai/design](//claude.ai/design).

Posso usar gratuitamente?

Não, você não pode.

O Claude Design é exclusivo para planos pagos.

Você pode usar se tiver um plano Pro ($20/mês). Nenhuma taxa adicional é necessária.

O que é o Claude Design?

É uma ferramenta de IA que permite criar slides, LPs, protótipos de aplicativos, propostas e muito mais apenas com instruções gerais em português.

A Anthropic o lançou em 17 de abril de 2026. Esta atualização aumentou significativamente sua funcionalidade.

A saída é "HTML ao vivo". Não é uma imagem estática; gera um design clicável e com movimento.

Como Ler a Tela

Quando você abre [claude.ai/design](//claude.ai/design), esta tela é exibida.

Abas Superiores

Área "Crie algo novo"

Escolha o tipo de coisa que deseja criar aqui. Sete cartões estão alinhados.

Em "Designs", seus designs anteriores são listados.

Quando o Claude Faz Perguntas de Acompanhamento (Comum a todos os cartões)

Após selecionar um cartão e enviar um prompt, se o Claude determinar que faltam informações, ele pode exibir perguntas adicionais no lado direito da tela.

O conteúdo das perguntas muda dependendo do prompt.

Existem itens obrigatórios e opcionais.

Responda aos itens e pressione "Continuar" para iniciar a geração.

Como Criar Slides (Materiais de Apresentação)

Crie materiais de seminário, slides de briefing e pitch decks a partir daqui.

Etapa 1. Clique em "Slides" na Tela Inicial

Clique no cartão que diz "Apresentações e pitch decks."

Etapa 2. Insira o Conteúdo dos Slides que Deseja Criar

Clicar leva você a esta tela.

"Qual é o tema da apresentação?" é exibido na barra lateral esquerda.

Você pode escolher entre três métodos de entrada:

• Enviar um documento: Criar slides a partir de documentos existentes como Word ou PDF.
• Colar suas anotações: Colar anotações ou texto e tê-los estruturados.
• Deck existente: Reconstruir com base em um deck de slides existente.

Se você não anexar nada, basta inserir o conteúdo em português no campo de texto abaixo e pressionar Enviar.

Exemplos de Prompt

1Crie um slide de introdução para um serviço de consultoria de IA.
2Público-alvo: Profissionais liberais e freelancers que não são bons com computadores
3Duração: Para um seminário de 20 minutos
4Estrutura: Problemas atuais → O que pode ser resolvido com IA → Detalhes do serviço → Preços → Como contratar
5Tom: Amigável, sem jargões técnicos
6Aparência: Simples e fácil de ler, fundo branco

1Crie um slide de autoapresentação.
2Ex-engenheiro de software, atualmente ensinando como usar IA
3Realizações: Automatizou operações com Claude Code, construiu um sistema por R$ 1.800/mês
4Público-alvo: Profissionais liberais iniciantes em IA
5Número de slides: 5-7, fáceis de visualizar com bastante espaço em branco

1Crie um slide introdutório sobre como usar o Claude Code.
2Público: Iniciantes que nunca escreveram código
3Duração: 10 minutos
4Conteúdo: O que é Claude Code → Passos de instalação → Primeiro comando → Falhas comuns e soluções
5Tom: Educado, gentil e nada intimidador

Opções do deck (Opcional)

• Otimizar para Google Slides: Usa apenas fontes do Google (prático ao abrir no Google Slides).
• Adicionar notas do apresentador: Adiciona automaticamente notas de fala a cada slide.

Etapa 3. Aguarde a Geração

Leva alguns minutos. Você pode verificar o progresso no painel esquerdo.

Quando terminar, fica assim.

Etapa 4. Ajuste com os Botões no Canto Superior Direito

Assim que a geração terminar, botões aparecem no canto superior direito.

"Ajustes" é o mais usado. Basta inserir algo como "Deixe o título do primeiro slide maior" como um chat, e ele corrigirá para você.

Pontos a Observar

Decida primeiro o estilo visual dos slides.

Se você disser "mude todas as cores" no meio do processo, a consistência tende a se quebrar.

É mais rápido definir a estrutura ampla e depois corrigir os detalhes.

Como Criar Protótipos de Produto (Protótipos Interativos)

Você pode criar telas de aplicativos, fluxos de reserva de serviços e mockups de serviços web.

Quando terminar, estará em um estado onde você pode realmente clicar e operar.

Etapa 1. Clique em "Protótipo de produto" na Tela Inicial

Clique no cartão que diz "Mockups interativos de aplicativos."

Etapa 2. Insira o Conteúdo da Tela do Aplicativo que Deseja Criar

Clicar leva você a esta tela.

Assim como nos Slides, insira o conteúdo em português no campo de texto e pressione Enviar.

Protótipos aumentam em precisão quanto mais detalhes você escrever. Incluir o seguinte melhora a qualidade:

• Que tipo de aplicativo: Sistema de reservas, gerenciamento de tarefas, tela de pagamento, etc.
• Número de telas: Quantas telas.
• Conteúdo de cada tela: O que é exibido.
• Fluxo de operação: Onde pressionar para avançar para a próxima etapa.
• Tamanho do dispositivo: Para smartphone (390×844px) ou PC.
• Cor/Estilo: Tema escuro, esquema de cores vibrantes, etc.

Exemplos de Prompt

1Crie um protótipo para um aplicativo de reserva de salão de beleza.
2Em uma tela de smartphone (390×844px).
34 telas:
41. Início: Nome do salão, lista de serviços (Corte/Coloração/Tratamento)
52. Seleção de serviço: Selecione para prosseguir
63. Seleção de data/horário: Calendário e horários disponíveis
74. Confirmação/Conclusão: Detalhes da reserva e botão "Reservar"
8Estilo: Fundo branco, detalhes em rosa, design arredondado
9Quando o botão "Reservar" for tocado, transicione para a tela "Reserva Confirmada!"

Etapa 3. Aguarde a Geração

Leva alguns minutos. Quando terminar, fica assim.

Está em um estado onde você pode realmente operá-lo clicando. Pressionar o botão "Reservar" transiciona para a próxima tela.

Etapa 4. Ajuste com os Botões no Canto Superior Direito

Assim que a geração terminar, botões aparecem no canto superior direito.

"Ajustes" é o mais usado. Basta inserir algo como "Deixe a cor de fundo branca" ou "Aumente a fonte" como um chat, e ele corrigirá para você.

Se Quiser Adicionar Animação

O Claude Design não adiciona animação por padrão.

Se quiser adicionar movimento, especifique-o explicitamente.

1Aumente o botão para 1.05x ao passar o mouse, com uma transição de 200ms.
2Os cartões aparecem com fade in + slide up ao carregar a página, exibindo-os em ordem com intervalos de 150ms.

Como Criar Wireframes de Produto (Design de Esqueleto)

Use isto quando quiser decidir primeiro a "configuração da tela".

Cria apenas o esqueleto do layout, não um design detalhado.

É adequado para confirmar o fluxo de "o usuário prossegue nesta ordem".

Etapa 1. Clique em "Wireframe de produto" na Tela Inicial

Clique no cartão que diz "Telas e fluxos de baixa fidelidade."

### Etapa 2. Insira a Configuração da Tela que Deseja Criar

Clicar leva você a esta tela.

Basta inserir o conteúdo em português no campo de texto e pressionar Enviar. Se você tiver uma tela que queira usar como referência, anexá-la com "Adicionar uma captura de tela" melhorará a precisão.

Exemplos de Prompt

1Crie um wireframe para um fluxo de inscrição de serviço de consultoria.
2Etapas: Início → Descrição do serviço → Preços → Formulário de inscrição → Conclusão
3É suficiente desde que eu possa ver o que colocar em cada tela. Design detalhado é desnecessário.

1Crie um wireframe para uma LP de inscrição de seminário.
2Seções: Seção principal → Apresentação do palestrante → Conteúdo → Taxa de participação → Formulário de inscrição
3Na visualização de smartphone.

Etapa 3. Aguarde a Geração

Quando terminar, fica assim.

O esqueleto da tela é exibido com caixas cinzas. Use-o para confirmar o posicionamento como "botão aqui" e "imagem aqui." Designs detalhados são feitos com Protótipo de produto ou Documento.

Etapa 4. Ajuste com os Botões no Canto Superior Direito

Assim que a geração terminar, botões aparecem no canto superior direito.

Instruir algo como "Adicionar exibição de preços à 3ª tela" em "Ajustes" fará correções adicionais.

Como Criar Documentos (LPs, Propostas, Documentos)

Crie landing pages, propostas, relatórios e currículos a partir daqui.

Entre os 7 tipos de cartões, este é o mais versátil.

Etapa 1. Clique em "Documento" na Tela Inicial

Clique no cartão que diz "Currículos, PDFs, etc."

### Etapa 2. Insira o Conteúdo que Deseja Criar

Clicar leva você a esta tela.

Um recurso exclusivo do cartão Documento é "Fale sobre isso."

Se você inserir seus pensamentos como se estivesse conversando para organizá-los, ele lerá a estrutura conforme está.

Se você tiver um PDF ou materiais, pode enviá-los com "Enviar um PDF ou anotações."

Exemplos de Prompt

1Crie uma LP para um serviço de consultoria de IA para indivíduos.
2Objetivo: Aumentar inscrições no LINE
3Estrutura:
4- Seção principal: Frase de efeito + Botão de inscrição
5- Você tem esses problemas? (3 itens)
6- O que pode ser resolvido com o serviço (3 itens)
7- Preços
8- FAQ (3 itens)
9- CTA final: Botão de inscrição no LINE
10Público-alvo: Profissionais liberais que não são bons com computadores, mulheres na faixa dos 50 anos
11Estilo: Simples e acolhedor, branco + detalhes em coral

1Crie uma proposta para um serviço de consultoria corporativa.
2Estrutura: Problemas atuais → Conteúdo da proposta → Efeitos esperados → Preços → Passos de implementação → Sobre a próxima reunião
3Estilo: Simples e confiável, azul marinho x branco

1Crie um material de autoapresentação (portfólio) como freelancer.
2Conteúdo a incluir: Perfil, habilidades, realizações, preços, informações de contato
3Estilo: Monocromático + 1 cor de destaque, moderno e limpo

Etapa 3. Aguarde a Geração

Leva alguns minutos. Quando terminar, fica assim.

Você pode verificar o restante rolando. Para uma LP, tudo, desde preços e FAQ até o rodapé, será gerado.

Etapa 4. Ajuste com os Botões no Canto Superior Direito

Assim que a geração terminar, botões aparecem no canto superior direito.

Apenas instruindo a redação ou as cores da LP em "Ajustes", ele corrigirá na hora.

Como Criar Animações

Você pode criar banners animados e motion graphics.

Etapa 1. Clique em "Animação" na Tela Inicial

Clique no cartão que diz "Motion graphics e loops."

Etapa 2. Insira o Conteúdo da Animação que Deseja Criar

Clicar leva você a esta tela.

Se você tiver um storyboard ou imagens, pode enviá-los com "Enviar um storyboard ou imagens."

Se você tiver um roteiro (texto), também pode colá-lo com "Colar um roteiro."

Exemplos de Prompt

1Crie um banner animado para introdução de serviço.
2Conteúdo: Texto "IA x Sistemização" aparece com fade in → Nome do serviço surge por baixo → Botão CTA pisca
3Fundo: Escuro, linhas de destaque em coral
4Tamanho: 1200×630px
5Reprodução em loop

1Crie um número de contagem animado.
2Com o texto "3.000 pessoas inscritas", conte de 0 a 3.000 em 2 segundos.
3Inicie quando a página for exibida.

Quando terminar, fica assim.

Etapa 3. Ajuste com os Botões no Canto Superior Direito

Assim que a geração terminar, botões aparecem no canto superior direito.

Diferente de outros cartões, não há botão "Editar". Como as animações rodam em código (CSS/JavaScript), você não pode editar elementos diretamente clicando neles. As correções só são possíveis instruindo a IA em "Ajustes."

Se você exportar uma animação para PDF, o movimento será perdido. Se quiser manter o movimento, escolha o formato HTML.

Como Usar Tela em Branco (Criar do Zero)

Sem modelos, sem perguntas. Use isto quando quiser começar de uma tela completamente em branco.

Escolha isto para "coisas que não se encaixam em nenhum cartão" ou "quando quiser decidir tudo sozinho."

Basta inserir o que deseja criar no campo de entrada de texto e pressionar Enviar.

Como Usar Começar com um Arquivo (Criar a partir de Arquivo)

Este cartão converte arquivos existentes em designs. Apenas fornecendo ao Claude um arquivo Word, PDF ou PPTX, ele criará um design para você.

Etapa 1. Clique em "Começar com um arquivo"

Clique no cartão que diz "Transformar em um design." Uma caixa de diálogo de seleção de arquivo será aberta.

Os formatos de arquivo suportados são DOCX, PPTX, XLSX, PDF, JPG e PNG.

Etapa 2. Envie o Arquivo e Insira as Instruções

Quando você seleciona um arquivo, ele será enviado e um grande campo de entrada de texto aparecerá. Insira o que deseja criar em português e pressione o botão "Iniciar projeto."

Outros cartões têm um botão "Enviar", mas este cartão tem "Iniciar projeto."

Exemplos de Prompt

1Converta a proposta em Word anexada em slides de proposta visual.
2Faça uma configuração de 5 a 7 slides com um design simples e fácil de ler.

1Converta as ideias desta anotação manuscrita em uma proposta de LP.
2Público-alvo: Profissionais liberais iniciantes em IA
3Objetivo: Inscrição de consultoria

Quando terminar, fica assim.

Etapa 3. Ajuste com os Botões no Canto Superior Direito

Após a geração, você pode ajustar com a barra de ferramentas no canto superior direito. Pressionar o botão "+ Ajustes" abre um campo de entrada de chat onde você pode dar instruções adicionais para mudanças finas.

Como Usar Sistemas de Design [Novo nesta Atualização]

Há um botão "Configurar sistema de design" abaixo da lista de cartões na tela inicial.

Ao registrar cores, fontes e logotipos da marca uma vez, eles serão automaticamente refletidos em designs subsequentes.

Isso resolve o problema de "cores inconsistentes toda vez."

Pressionar o botão exibe a janela "Adicionar um sistema de design."

Existem dois métodos de registro.

① Criar aqui (Para iniciantes)

Você pode configurá-lo apenas inserindo as informações necessárias no formulário.

Coisas que você pode registrar:

• Nome da empresa/Descrição da marca (entrada de texto)
• URL do repositório GitHub
• Arquivo Figma (enviar arquivo .fig)
• Arquivos de fonte, logotipo e ativos

Você pode usar sem código. Se está experimentando pela primeira vez, este é o recomendado.

② Criar usando Claude Code (MELHOR FIDELIDADE)

Este é um recurso para fazer o Claude Code aprender informações da marca.

Uma vez registrado, você não precisará especificar "com esta cor e esta fonte" toda vez que criar uma LP, página inicial ou slide. Designs unificados como marca sairão automaticamente.

Principalmente para equipes de desenvolvimento corporativas. Este é um recurso para ler automaticamente informações da marca a partir de código de serviço criado com regras React. Quase não há casos de uso para uso individual.

Como Usar

Você pode criar do zero com os seguintes passos.

Passo 1. Verifique o Node.js

Passo 2. Crie Pastas e Arquivos

1Qualquer pasta/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (Reescreva cores e fontes para sua marca)

1export const colors = {
2  primary: "#DA7756",      // Cor principal
3  background: "#F5F4F0",   // Cor de fundo
4  text: "#1C1917",         // Texto do corpo
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

Passo 3. Execute /design-sync

Execute o seguinte comando no Claude Code:

1/design-sync

Quando terminar, a marca será registrada na aba "Sistemas de design." Esta cor e fonte serão automaticamente usadas em gerações de design subsequentes.

Métodos de Exportação

Designs finalizados podem ser exportados em vários formatos.

Se houver animação, o movimento será perdido se exportado para PDF.

Se quiser manter o movimento, escolha o formato HTML.

Dicas para Ajuste (Painel de Ajustes)

Após a geração, pressionar o botão "Ajustes" permite que você dê instruções de ajuste fino à IA.

Exemplos de instruções eficazes:

• "Deixe o texto do cabeçalho maior"
• "Faça o botão se destacar mais"
• "Simplifique tudo no geral"
• "Verifique o layout quando visto em um smartphone"

Em vez de tentar mudar tudo de uma vez, dar instruções uma por uma torna mais fácil obter o resultado desejado.

O que Mudou nesta Atualização

Resumo — Escolha um Cartão Baseado no que Deseja Criar

O Claude Design está disponível para planos Pro ($20/mês) e superiores. Não pode ser usado gratuitamente.

Escolha um cartão baseado no que deseja criar

A precisão aumenta quando o prompt inclui quatro pontos: "Objetivo, Estrutura, Público-alvo e Estilo."

Não busque a perfeição desde o início; é mais rápido criar uma estrutura ampla e depois corrigir as coisas uma por uma.

Se você gostou deste artigo, ficaria feliz se pressionasse "Curtir."

▼ Você pode receber instruções de uso do Claude, que podem ser iniciadas mesmo se você não for bom com computadores, via LINE.

Ao se registrar, você receberá um guia de instalação do Claude Code como presente.

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso