Artifacts no Claude Code: a sessão vira página viva

Imagine que o Claude Code acabou de revisar um pull request grande pra você. No fluxo antigo, ele despejaria um muro de texto no terminal — diffs, raciocínio, o que testou — e você rolaria a tela tentando montar o quadro na cabeça. A novidade da Anthropic muda isso: em vez de texto, o Claude Code pode publicar uma página web viva com o PR comentado, os diffs anotados na margem, tudo do jeito que um revisor consegue de fato seguir.

Isso se chama Artifacts no Claude Code, e é a mesma ideia dos artifacts do Claude no navegador, agora saindo direto da sua sessão de terminal. Vou te explicar o que é, como criar um, e onde isso realmente ajuda.

O que é um artifact, em uma frase

Um artifact é uma página web interativa que o Claude Code publica da sua sessão para um link privado na claude.ai. Você abre no navegador e ela se atualiza no lugar conforme o Claude continua trabalhando. É uma forma de mostrar o que o terminal não exibe bem.

A regra mental é simples: use um artifact quando o texto puro for o meio errado pro que o Claude produziu. Um diff anotado, um gráfico, quatro layouts lado a lado pra comparar, uma linha do tempo que vai se preenchendo durante uma tarefa longa — tudo isso é mais fácil de olhar do que de ler linha por linha.

E o melhor: o Claude monta a página com todo o contexto da sessão — seu código, os dados que ele puxou pelos MCPs conectados, a própria conversa. Ele não está inventando uma maquete; está desenhando o que já viu.

Como criar um artifact

Não tem comando especial. Você pede em linguagem natural, descrevendo a saída visual que quer:

Faz um artifact que percorre esse PR com os diffs anotados inline e cor por severidade.

Monta um dashboard artifact das falhas de deploy da semana por serviço e mantém atualizado enquanto investiga.

O que acontece nos bastidores: o Claude escreve um arquivo .html ou .md no seu projeto e pede permissão antes de publicar a primeira vez — algo como "Claude wants to publish 'Deploy failures by service' to a private page on claude.ai". Você responde Yes, ele imprime a URL e seu navegador abre na página nova. Republicar um artifact já aprovado não pergunta de novo.

Dois atalhos úteis:

• Ctrl+] reabre o último artifact a partir do terminal.
• CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 no ambiente impede que o navegador abra sozinho a cada publicação.

A parte que muda o jogo: ele se atualiza vivo

Aqui está o pulo do gato. Quando o Claude revisa a página — porque você pediu ou porque uma tarefa longa avançou —, quem está com ela aberta vê a mudança no lugar, na hora. Você não reenvia link nenhum.

Adiciona um recorte por região abaixo do gráfico de resumo e republica.

Cada publicação vira uma versão. No botão Compartilhar, no topo da página, você escolhe qual versão os outros enxergam e pode voltar a uma anterior. É histórico de verdade, parecido em espírito com o /rewind por checkpoints, só que pra páginas compartilhadas.

Quer atualizar um artifact de outra sessão? Dá a URL pro Claude:

Atualiza https://claude.ai/code/artifact/5fbea6f3-... com os números de hoje.

Sem a URL, uma sessão nova sempre cria um artifact do zero em vez de mexer no existente.

Privado por padrão, compartilhável dentro da empresa

Todo artifact nasce visível só pra você. Quando quiser, use o Compartilhar pra liberar pra pessoas específicas da sua organização ou pra todo mundo dela. O cabeçalho mostra você como autor, e há uma galeria em claude.ai/code/artifacts com tudo que você já criou.

O compartilhamento para na fronteira da organização: quem abre o link precisa estar logado na claude.ai como membro da mesma empresa, e não existe opção de tornar um artifact público. Precisa mandar pra alguém de fora? Peça o arquivo HTML pro Claude e compartilhe o arquivo direto. Outra coisa importante: artifacts são visíveis, não coeditáveis — quem recebe vê suas versões, mas só você escreve.

O que dá pra construir

Como é uma página HTML única, vale qualquer coisa que você expresse em HTML, CSS e JavaScript inline. Os padrões que mais aparecem:

• Percorrer uma mudança — diff ou redesign com anotações ao lado das linhas, pro revisor ler seu raciocínio junto do código.
• Comparar alternativas — vários layouts, textos ou planos de implementação lado a lado, num grid com o trade-off embaixo de cada um.
• Ajustar com controles — sliders e toggles ligados ao que você está calibrando (uma curva de animação, por exemplo), pra testar valores na mão.
• Devolver o resultado pra sessão — um quadro de triagem com botão "copiar como prompt" que te dá o texto pra colar de volta no terminal.
• Acompanhar trabalho em andamento — uma checklist que o Claude vai marcando enquanto uma migração roda, pra quem tem o link seguir sem ler o terminal.

Esse último caso combina bem com quem já roda várias tarefas em paralelo no agent view: cada investigação longa pode ter sua própria página viva.

Os limites (pra não se frustrar)

Um artifact é uma captura de trabalho, não um aplicativo. É uma página única, autossuficiente, servida sob uma política de segurança rígida. Na prática:

• Sem backend — não guarda o que você digita num formulário, não autentica ninguém, não chama API na hora de exibir.
• Sem requisições externas — o Claude embute CSS, JS e imagens (como data URI) pra página renderizar sem buscar nada de fora.
• Página única — links relativos não resolvem; pra conteúdo com seções, ele usa âncoras internas.
• Arquivo .html, .htm ou .md, com até 16 MiB renderizados.

Vale um aviso sobre tokens: gerar uma página estilizada gasta mais saída do que o mesmo conteúdo em texto. Imagens embutidas são as vilãs. Prefira SVG/CSS pra diagramas e corte interatividade que você não vai usar — os mesmos hábitos de gastar menos tokens valem aqui.

Dica de acabamento: o Claude aplica uma skill de design embutida, mas respeita o design system do seu projeto se você registrar cores, fontes e espaçamentos no CLAUDE.md. Aí os artifacts saem com a cara do seu produto.

Onde funciona

Por enquanto, os Artifacts estão em beta e exigem:

• Plano Team ou Enterprise (no Team já vem ligado; no Enterprise um admin habilita);
• Sessão logada na claude.ai via /login (não funciona com chave de API, gateway ou credencial de nuvem);
• Modelo pela API da Anthropic — fora, portanto, de Bedrock, Vertex e Foundry;
• Claude Code no terminal ou no app de desktop.

Se o Claude disser que não consegue publicar ou só gravar um HTML local sem link, é sinal de que algum desses requisitos não está batendo.

Vale a pena?

Se você trabalha sozinho num projeto pessoal, o terminal já resolve. O ganho real dos Artifacts aparece quando há outras pessoas pra convencer: um PR que o revisor entende em dois minutos, um dashboard de incidente que o time acompanha sem te perguntar, uma comparação de opções que substitui três parágrafos no Slack por um link. É o Claude Code parando de só fazer o trabalho e começando a mostrá-lo — no formato certo, pra quem precisa ver.

Tá começando agora e quer chegar nesse nível de fluxo? Comece pelo guia do Claude Code no terminal e pegue o Plan Mode pra deixar ele planejar antes de agir.

Fonte: o recurso foi documentado pela Anthropic — Claude Code now supports artifacts e a documentação oficial de Artifacts. Os fatos vieram de lá; a redação, os recortes e os exemplos são deste blog.