O Claude da Anthropic tem um recurso que a maioria dos outros chatbots de IA não tem: artifacts. Código autossuficiente, HTML, componentes React, diagramas Mermaid e SVG que são renderizados inline no chat como unidades próprias.
Bem usados, os artifacts transformam o Claude em uma ferramenta de prototipagem instantânea. Mal usados, são blocos de código glorificados. Aqui está o guia completo.
O que é um artifact de verdade
A documentação da Anthropic chama artifacts de “conteúdo substancial e autossuficiente que os usuários provavelmente modificarão, iterarão ou levarão para fora da conversa.” Na prática, eles cobrem seis tipos:
- Código — Python, TypeScript, Rust, Go, etc. Renderizado com destaque de sintaxe.
- Documentos Markdown — prosa longa, relatórios, rascunhos.
- Páginas HTML — landing pages de arquivo único, dashboards, protótipos.
- Componentes React — componentes renderizados ao vivo com reatividade total.
- Diagramas Mermaid — fluxogramas, diagramas ER, diagramas de sequência. Renderizados como SVG inline.
- Imagens SVG — gráficos vetoriais gerados a partir de prompts.
O Claude decide quando criar um artifact com base no tamanho e na autossuficiência. Você pode influenciar a decisão dizendo “crie isso como um artifact” ou “como um componente autossuficiente”.
Por que artifacts são importantes para exportação
O artifact tem seu próprio ciclo de vida:
- Ele é renderizado separadamente da prosa da conversa.
- Você pode editá-lo inline (peça ao Claude para “iterar sobre o artifact”).
- Tem um identificador estável entre edições.
Isso torna a exportação complicada. Se sua ferramenta de exportação apenas despeja a conversa como Markdown, o artifact chega como (a) blocos de código inline perdendo a forma renderizável, ou (b) completamente ausente.
Boas ferramentas de exportação tratam artifacts como cidadãos de primeira classe.
Como o ChatExport AI lida com artifacts
Três modos, escolhidos por exportação:
Modo 1: Inline (padrão para PDF, Word)
O conteúdo do artifact é inserido inline na transcrição da conversa na posição em que apareceu. O código mantém o destaque de sintaxe. Diagramas Mermaid são renderizados como SVG embutido. Páginas HTML são renderizadas como uma captura de tela da página renderizada.
Melhor para: entregar a exportação para alguém que só quer ler a conversa.
Modo 2: Arquivos separados (padrão para ZIP, Markdown)
O artifact é salvo como um arquivo independente:
- Código →
chat/<artifact-name>.py(ou .ts, .rs, etc.) - HTML →
chat/<artifact-name>.html - React →
chat/<artifact-name>.jsx - Mermaid →
chat/<artifact-name>.mmdmaischat/<artifact-name>.svg - SVG →
chat/<artifact-name>.svg
A transcrição faz referência a cada artifact por meio de um link relativo.
Melhor para: entregar o artifact a um desenvolvedor que queira executar/modificar o código.
Modo 3: Ambos
O modo ZIP inclui ambos: a transcrição com inline para leitura e os artifacts como arquivos separados para execução.
Melhor para: arquivamento. Seis meses depois você vai agradecer por ter ambas as visões.
Peculiaridades dos artifacts
Múltiplas revisões
Se você iterar sobre um artifact (“aumente o botão”), o Claude atualiza o artifact no lugar. As revisões mais antigas desaparecem da visualização da conversa, mas podem ser recuperadas via painel de histórico do artifact.
O ChatExport AI captura a versão atual de cada artifact no momento da exportação. Se você quiser todas as revisões, peça ao Claude para “mostrar v1, v2, v3 do artifact” antes de exportar; o histórico de revisões então exporta como blocos de código separados.
Artifacts incompletos
Se o Claude estiver no meio do streaming quando você clicar em Exportar, o artifact parcial é incluído como está. Aguarde o indicador de streaming terminar antes de exportar.
Dependências de artifacts React
Artifacts React podem import de uma pequena lista de permissões (React, Tailwind via classnames, ícones lucide-react). A exportação captura o código-fonte JSX; o consumidor precisa configurar as mesmas dependências se quiser executá-lo localmente.
As exportações do ChatExport AI incluem um README.md dentro do ZIP para artifacts React listando as dependências necessárias, além de um snippet mostrando como montar um projeto Vite + React que execute o artifact.
Diagramas Mermaid renderizados offline
A exportação SVG de um diagrama Mermaid é totalmente autossuficiente — abra em qualquer navegador, sem necessidade de internet. A exportação do código-fonte .mmd permite editar e re-renderizar depois.
Fluxo de trabalho: do protótipo no Claude ao código enviado
O fluxo que funcionou melhor para mim:
- Peça ao Claude para construir o protótipo como um artifact React. Itere inline 2 a 3 vezes.
- Exporte a conversa como um ZIP. A transcrição explica as decisões de design; os arquivos do artifact são executáveis.
- Coloque o artifact em um projeto Vite real. Adicione as dependências listadas. O componente funciona como está no projeto.
- Substitua os comentários em prosa no estilo prompt por JSDoc de verdade. Adicione testes. Envie.
Tempo total do prompt até executar localmente: ~5 minutos. A exportação é o que torna isso rápido — é a ponte entre “o Claude construiu isso” e “isso está no meu repositório”.
Experimente
Abra o Claude. Peça para “criar uma página HTML autossuficiente que seja um diagrama Mermaid de um fluxo de cadastro de usuário”. Quando o artifact renderizar, exporte a conversa como ZIP via ChatExport AI. O ZIP contém a transcrição mais um .html independente, mais o código-fonte .mmd, mais o .svg renderizado.
Esse é o fluxo completo de artifacts do Claude.
Relacionados
- Guia de exportação do Claude.
- Claude para Markdown — fluxo só com Markdown, artifacts como arquivos separados.
- Para desenvolvedores — fluxos de exportação de IA fiéis ao código.