O que são os Artefatos do Claude? Uma introdução prática
8 min de leitura
Hoje, quando o Claude entrega um componente React, um gráfico ou uma pequena ferramenta como um bloco de código, você provavelmente o copia para o seu editor só para ver se funciona. Essa volta extra é o que os Artefatos eliminam.
Dica
Um Artefato não é um bloco de código mais sofisticado. É uma versão em execução do que o Claude acabou de descrever, renderizada no próprio painel, que você pode ver, clicar e iterar sem sair da conversa.
O que um Artefato realmente é
Quando o Claude gera algo substancial e autocontido, uma página web, um diagrama, um pequeno app React, uma visualização de dados, ele pode abrir esse conteúdo num painel separado ao lado do chat em vez de largá-lo como texto. Esse painel executa o código num ambiente isolado: o seu navegador o executa, mas ele não alcança o seu sistema de arquivos, as suas outras abas nem nada fora do isolamento sem uma ação sua explícita.
Isso importa para como você deve pensar nos Artefatos. Eles não são uma prévia do que você publicaria. São um jeito rápido de testar uma ideia antes de decidir se vale a pena publicá-la, e você não precisa de formação em desenvolvimento para tirar valor de um: descrever o resultado que quer basta para muitos usos comuns.
O que você pode construir com Artefatos
Qualquer coisa autocontida o bastante para rodar ou ser renderizada sozinha. As categorias comuns, com um prompt que acionaria cada uma:
| Tipo | Bom para | Exemplo de prompt |
|---|---|---|
| Ferramenta interativa | Calculadoras, conversores, estimativas por formulário | “Crie uma calculadora de financiamento com controles deslizantes para taxa, prazo e entrada.” |
| Página web | Landing pages, páginas únicas, modelos de e-mail | “Faça um site de uma página para uma padaria local com horários, cardápio e link do mapa.” |
| Visualização de dados | Gráficos a partir de dados que você cola | “Faça um gráfico da receita trimestral como barras agrupadas com linha de tendência.” |
| Diagrama | Fluxogramas, organogramas, arquitetura simples | “Desenhe um fluxograma do nosso processo de devoluções, do pedido ao reembolso.” |
| Documento | Relatórios formatados, briefings estruturados | “Transforme estas notas num briefing de projeto de uma página, formatado, com títulos.” |
| Jogo ou demo simples | Apoios didáticos, explicações interativas | “Faça um pequeno teste de velocidade de digitação que mostre palavras por minuto.” |
Quando um Artefato vence uma resposta comum no chat
Nem tudo que o Claude constrói precisa de um painel próprio. Um Artefato é a escolha certa quando:
Você pretende olhar e clicar no resultado, e não só lê-lo, o rascunho de um painel, um jogo funcionando, um gráfico dos seus próprios dados
Você está iterando sobre o mesmo resultado visual ou interativo ao longo de vários turnos e quer o Claude atualizando uma coisa no lugar, e não um novo bloco de código a cada vez
Outra pessoa precisa ver funcionando, e não apenas ouvir o que faria
Se, em vez disso, você só precisa ler e entender código, ou a saída é uma resposta pontual que não vai rever, uma resposta comum é mais simples. Não há painel extra para gerenciar para algo que você nunca vai olhar duas vezes.
| Você quer | Use |
|---|---|
| Ver algo rodar e clicar nele | Artefato |
| Ler, entender ou copiar código uma vez | Resposta comum |
| Alterar arquivos reais num projeto de verdade | Claude Code |
| Iterar sobre um resultado visual em muitos turnos | Artefato |
Um exemplo rápido
Pedir uma pequena ferramenta interativa basta para acionar um. Eis um prompt inicial realista:
Crie uma ferramenta interativa simples como um Artefato: um formulário com três campos numéricos (horas trabalhadas, valor por hora, percentual de imposto) que calcule e mostre o salário líquido ao vivo enquanto eu digito. Use React puro, sem bibliotecas externas, e mantenha o estilo mínimo.
”O Claude renderiza isso como um componente funcionando em que você pode digitar de verdade, e não uma descrição dele. Se a primeira versão estiver perto mas não certa, por exemplo, a conta do imposto está errada ou você quer um símbolo de moeda, diga em linguagem simples. O Claude atualiza o mesmo Artefato em vez de começar um novo, o que mantém o seu histórico de iterações num só lugar em vez de espalhado por vários blocos de código.
Chamando a API do Claude de dentro de um Artefato
Uma capacidade mais nova que vale conhecer mesmo que você ainda não esteja construindo: os Artefatos agora podem chamar diretamente a própria API do Claude, sem você fornecer uma chave de API nem pagar por chamada. Isso transforma um Artefato de uma demo estática em algo que pode manter a própria conversa, encadear várias requisições ou conduzir um pequeno fluxo agêntico, tudo dentro do isolamento.
É um caso de uso bem diferente de “mostre um gráfico” e merece uma explicação mais profunda à parte. Por ora, a lição prática é: se você está prototipando algo que precisa raciocinar em vários passos, e não só renderizar um resultado fixo, peça isso explicitamente. O Claude não recorre a chamar a API a menos que a tarefa realmente precise.
Dentro do Claude Tutorial
Artefatos são uma habilidade do Claude entre muitas
O app percorre técnicas reutilizáveis como esta, padrões que valem seja para prototipar uma ferramenta, seja para tirar uma resposta melhor de um chat comum.
O dilema de privacidade de que ninguém fala
Os Artefatos podem ser compartilhados publicamente com um link, e Artefatos compartilhados já foram encontrados indexados por buscadores. Se você constrói algo com dados reais, mesmo dados que considera de baixo risco, um link compartilhado está mais perto de publicar uma página web do que de enviar um arquivo privado.
Atenção
Antes de compartilhar um Artefato publicamente, releia-o como se um desconhecido sem nenhum contexto fosse encontrá-lo numa busca no Google, porque essa é uma possibilidade real, e não hipotética.
O padrão seguro: mantenha os Artefatos privados a menos que você tenha conferido especificamente o que há neles. Se precisa entregar um a um colega, é um tipo de compartilhamento diferente e mais restrito que um link público, e vale tratar essa distinção de propósito em vez de cair no “é só virar um link”.
Erros comuns
- Formular um pequeno ajuste como uma construção totalmente nova. Pedir tudo de novo do zero perde o que já funcionava. Diga o que deve mudar especificamente, “mantenha tudo, só corrija o cálculo do imposto”, em vez de repetir o pedido original completo.
- Esperar que um formulário seja enviado dentro do isolamento. É por projeto, não um bug: o isolamento bloqueia navegação real e envios de formulário externos. Trate o envio em JavaScript, atualizando o estado ou mostrando um resultado diretamente.
- Presumir que um Artefato que não renderiza está quebrado. Geralmente significa uma biblioteca faltando ou um erro de execução. Diga ao Claude o que você vê (“painel em branco” ou o texto do erro) e ele corrige o código no lugar.
- Compartilhar um criado com dados reais sem relê-lo. Tratado acima e vale repetir: um link público está mais perto de publicar uma página do que de enviar um arquivo.
Perguntas frequentes
O que são os Artefatos do Claude?
Um painel dedicado ao lado do chat que executa ou renderiza algo que o Claude construiu, um pequeno app, um gráfico, um diagrama, um documento, para você ver e iterar sem copiar código para o seu próprio editor.
O que dá para construir com os Artefatos do Claude?
Ferramentas interativas, páginas web únicas, visualizações de dados, diagramas, documentos formatados e jogos ou demos simples. Qualquer coisa autocontida o bastante para rodar sozinha num ambiente isolado de navegador.
Os Artefatos do Claude são privados por padrão?
Sim. Um Artefato só é visível para você até você criar um link de compartilhamento. Artefatos compartilhados já foram encontrados indexados por buscadores, então trate um link público como publicação.
Outras pessoas podem editar o meu Artefato do Claude?
Quem tem um link de compartilhamento pode vê-lo e, num contexto compartilhado, trabalhar a partir de uma cópia. O original continua seu. Para colaboração de verdade, passe a conversa em vez de só o link.
Que linguagens de programação os Artefatos suportam?
Principalmente tecnologias web: HTML, CSS e JavaScript, incluindo React. Isso cobre a maioria das ferramentas interativas e visualizações. Não é um ambiente de execução geral para linguagens de back-end.
Os Artefatos do Claude expiram?
Eles persistem com a conversa em que foram criados. Se você quer que um dure independentemente desse chat, salve o código ou guarde-o em algum lugar que você controle.
Continue lendo
- Obtendo conteúdo que você pode iterar em vez de só uma resposta no chat para reconhecer quando uma saída pertence ao seu próprio espaço editável.
- Fazendo uma mudança em vários arquivos com o Claude Code para quando você superou um ambiente isolado e precisa alterar arquivos reais num projeto.
- Transformando a primeira resposta do Claude na que você precisa para a mesma mentalidade de iteração que este guia usa para refinar um Artefato, aplicada a qualquer saída do Claude.
- Escolhendo entre um novo chat, um Projeto ou retomar de onde parou já que onde você constrói um Artefato afeta a facilidade de encontrá-lo e reutilizá-lo depois.