O que é o Claude Design? Um guia completo sobre preços, 7 métodos de criação e exemplos de prompts [Atualizado em 2026]

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

As funcionalidades aumentaram e a interface mudou.

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

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

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

Posso usar de graça?

Não, não pode.

O Claude Design é exclusivo para planos pagos.

Você pode usar se tiver um plano Pro ($20/mês). Não são necessárias taxas adicionais.

O que é o Claude Design?

É uma ferramenta de IA que permite criar slides, LPs, protótipos de apps, propostas e muito mais apenas dando instruções gerais.

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

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

Como Ler a Tela

Ao abrir [claude.ai/design](//claude.ai/design), esta tela é exibida.

Abas do Topo

Área "Make something new"

Escolha o tipo de coisa que deseja criar aqui. Sete cards estão alinhados.

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

Quando o Claude Faz Perguntas de Acompanhamento (Comum a todos os cards)

Após selecionar um card 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 "Continue" 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.

Passo 1. Clique em "Slides" na Tela Inicial

Clique no card que diz "Presentations & pitch decks."

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

Clicar leva a esta tela.

"O que é a apresentação sobre?" é exibido na barra lateral esquerda.

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

• Upload a doc: Crie slides a partir de documentos existentes como Word ou PDF.
• Paste your notes: Cole anotações ou texto e faça com que sejam estruturados.
• Existing deck: Reconstrua com base em uma apresentação de slides existente.

Se você não anexar nada, basta inserir o conteúdo 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 autônomos 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 se inscrever
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
3Conquistas: Automatizei operações com Claude Code, construí um sistema por 300.000 ienes/mês
4Público-alvo: Profissionais autônomos 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: Polido, gentil e sem ser intimidador

Opções de deck (Opcional)

• Optimize for Google Slides: Usa apenas fontes do Google (prático ao abrir no Google Slides).
• Add speaker notes: Adiciona automaticamente notas de orador a cada slide.

Passo 3. Aguarde a Geração

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

Quando terminar, fica assim.

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

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

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

Pontos a Observar

Defina o estilo visual dos slides primeiro.

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 ajustar os detalhes.

Como Criar Protótipos de Produto (Protótipos com Movimento)

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

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

Passo 1. Clique em "Product prototype" na Tela Inicial

Clique no card que diz "Interactive app mockups."

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

Clicar leva a esta tela.

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

Protótipos aumentam a 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 ir para o próximo passo.
• 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 menu (Corte/Color/Tratamento)
52. Seleção de menu: Selecione para prosseguir
63. Seleção de data/hora: 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, transição para a tela "Reserva Concluída!"

Passo 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" faz a transição para a próxima tela.

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

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

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

Se Você Quiser Adicionar Animação

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

Se você quiser adicionar movimento, especifique-o explicitamente.

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

Como Criar Wireframes de Produtos (Design do Esqueleto)

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

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

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

Passo 1. Clique em "Product wireframe" na Tela Inicial

Clique no card que diz "Lo-fi screens & flows."

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

Clicar leva a esta tela.

Basta inserir o conteúdo no campo de texto e pressionar Enviar. Se você tiver uma tela que deseja usar como referência, anexá-la com "Add a screenshot" 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
3Está bom desde que eu possa ver o que colocar em cada tela. Design detalhado é desnecessário.

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

Passo 3. Aguarde a Geração

Quando terminar, fica assim.

O esqueleto da tela é exibido com caixas cinzas. Use para confirmar o posicionamento como "botão aqui" e "imagem aqui." Designs detalhados são feitos com Product prototype ou Document.

Passo 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ço à 3ª tela" em "Tweaks" 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 cards, este é o mais versátil.

Passo 1. Clique em "Document" na Tela Inicial

Clique no card que diz "Resumes, PDFs, etc."

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

Clicar leva a esta tela.

Uma funcionalidade exclusiva do card Document é "Talk it out."

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

Se você tiver um PDF ou materiais, pode enviá-los com "Upload a PDF or notes."

Exemplos de Prompt

1Crie um LP para um serviço de consultoria de IA para indivíduos.
2Objetivo: Aumentar inscrições no LINE
3Estrutura:
4- Seção Hero: Slogan + 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 autônomos que não são bons com computadores, mulheres na faixa dos 50 anos
11Estilo: Simples e acolhedor, branco com detalhes em coral

1Crie uma proposta para um serviço de consultoria para empresas.
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 com 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

Passo 3. Aguarde a Geração

Leva alguns minutos. Quando terminar, fica assim.

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

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

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

Basta instruir a redação ou as cores do LP em "Tweaks" e ele corrigirá na hora.

Como Criar Animações

Você pode criar banners animados e motion graphics.

Passo 1. Clique em "Animation" na Tela Inicial

Clique no card que diz "Motion graphics & loops."

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

Clicar leva a esta tela.

Se você tiver um storyboard ou imagens, pode enviá-los com "Drop a storyboard or images."

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

Exemplos de Prompt

1Crie um banner animado para introdução de serviço.
2Conteúdo: Texto "IA x Sistematização" aparece com fade in → Nome do serviço surge de 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.

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

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

Ao contrário de outros cards, não há botão "Edit". Como as animações são executadas 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 "Tweaks".

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

Como Usar o Blank Canvas (Criar do Zero)

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

Escolha isso para "coisas que não se encaixam em nenhum card" ou "quando você quiser decidir tudo sozinho."

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

Como Usar o Start with a File (Criar a partir de Arquivo)

Este card converte arquivos existentes em designs. Apenas dando a Claude um arquivo Word, PDF ou PPTX, ele criará um design para você.

Passo 1. Clique em "Start with a file"

Clique no card que diz "Turn it into a 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.

Passo 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 e pressione o botão "Start project."

Outros cards têm um botão "Enviar", mas este card tem "Start project."

Exemplos de Prompt

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

1Converta as ideias nesta nota manuscrita em uma proposta de LP.
2Público-alvo: Profissionais autônomos iniciantes em IA
3Objetivo: Inscrição em consultoria

Quando terminar, fica assim.

Passo 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 "+ Tweaks" abre um campo de entrada de chat onde você pode dar instruções adicionais para pequenas alterações.

Como Usar Design Systems [Novo nesta Atualização]

Há um botão "Set up design system" abaixo da lista de cards 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 o modal "Add a design system."

Existem dois métodos de registro.

① Criar aqui (Para iniciantes)

Você pode configurar 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)
• Fontes, logotipo e arquivos de 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 permitir que o Claude Code aprenda as informações da marca.

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

Principalmente para equipes de desenvolvimento corporativo. Este é um recurso para ler automaticamente as informações da marca a partir do código do 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. Verificar Node.js

Passo 2. Criar 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 a 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. Executar /design-sync

Execute o seguinte comando no Claude Code:

1/design-sync

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

Métodos de Exportação

Os 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 Tweaks)

Após a geração, pressionar o botão "Tweaks" 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"
• "Torne tudo mais simples"
• "Verifique o layout quando visualizado em um smartphone"

Em vez de tentar mudar tudo de uma vez, dar instruções uma de cada vez facilita a obtenção do resultado desejado.

O que Mudou nesta Atualização

Resumo — Escolha um Card com Base 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 card com base 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 a uma.

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

▼ Você pode receber como usar o Claude, que pode ser iniciado 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