Aula 25Artifacts: uma página com link para mostrar

🖥️ Versão Desktop. Nesta aula, você não digita nenhum comando: tudo acontece na aba Code do app Claude Desktop, no link que aparece na conversa e no botão Share da página, no seu navegador. Dois recursos da versão do terminal, o /artifacts e o atalho Ctrl + ], não fazem parte do caminho do app: aqui, você acha as páginas pelo link na conversa e pela galeria do claude.ai. Em "Para ir além", para quem programa, aparece um arquivo de configuração, o settings.json, para desligar os artifacts.

Objetivos

Ao final desta aula você vai saber:

• Pedir ao Claude uma página com link, o artifact, e mudar o que ela mostra
• Conferir a página pelo que se vê na tela: ela abre, e a conta fecha
• Compartilhar a página com um link e ver, numa janela anônima, o que um visitante vê
• Encontrar as suas páginas de novo e parar de compartilhar quando quiser
• Saber o que nunca vai numa página com link: dado de cliente

---

Na Aula 19, a página da confeitaria foi para o ar, com endereço próprio. Mas às vezes você quer mostrar outra coisa, rápida, sem mexer no site: um orçamento, uma tabela de preços, o convite de um evento, uma calculadora. Um artifact é isso: uma página com link que o Claude publica no claude.ai, a partir da sua conversa. Ela nasce privada, só para você, e você decide se mais alguém pode ver.

ℹ️ O que você precisa: um plano Pro, Max, Team ou Enterprise e o app na versão 1.13576.0 ou mais nova (confira em About Claude, como na Aula 24). O login do app, com a sua conta do Claude, é o que permite publicar. No Team e no Enterprise, o link público só existe depois que o administrador da conta da empresa (o Owner) libera.

Para esta aula, você precisa da pasta da sua página (a confeitaria, ou a da sua ideia), com o cardápio e os preços. Não precisa do GitHub: quem pulou a Aula 19 faz tudo igual. Se o seu cardápio ainda não tem preços, diga no pedido os preços que você quer, como "bolo de 1 kg a R$ 90 e docinho a R$ 2,50".

A diferença para a página da Aula 19: aquela é o site da confeitaria, no GitHub Pages. O artifact é uma página avulsa, que mora no claude.ai. Ela faz contas e mostra coisas na tela de quem abre, mas não manda nada para você: se o cliente gostar do orçamento, a encomenda continua pelo WhatsApp da sua página.

Peça a calculadora

Na aba Code, clique em + New. Na linha abaixo da caixa de mensagem, escolha Local e a pasta da sua página e, na mesma linha, Manual no seletor de modo. Peça:

Faça um artifact com uma calculadora de orçamento de festa da confeitaria, com os preços do cardápio da página. O cliente escolhe o tamanho do bolo e quantos docinhos quer, e vê o total.

O que acontece depois do pedido:

1. O Claude lê o cardápio para pegar os preços. Se ele pedir licença para alguma coisa, leia e decida, como sempre.
2. Ele escreve a página num arquivo, numa pasta temporária fora da confeitaria, e publica. A sua página não muda.
3. Ele mostra o link na conversa, como https://claude.ai/code/artifact/.... Clique nele. Na primeira vez que você clica num link na conversa, o app pergunta se os links abrem no painel Browser ou no seu navegador padrão: escolha o navegador padrão, aquele em que você já entrou no claude.ai. No painel Browser, você teria de entrar na sua conta de novo.
4. Fechou a aba? Volte à conversa e clique no link de novo.

💡 Mudou de ideia sobre onde os links abrem? Use Open links in built-in browser no menu ⋮ do painel Browser. E Cmd + clique no Mac (Ctrl + clique no Windows) abre o link direto no navegador padrão.

Confira: a página abre, e a conta fecha

O critério de pronto é o que se vê na tela, como na Aula 04. Na calculadora, escolha um tamanho de bolo e uma quantidade de docinhos. Depois, faça a mesma conta à mão, com os preços do cardápio, e compare com o total da página.

Não bateu? Diga ao Claude o que você esperava, com os números:

Escolhi o bolo de 1 kg e 50 docinhos. Pelo cardápio, o total deveria ser R$ 215, mas a página mostra R$ 190. Confira os preços e publique de novo.

Mude a página

Peça:

Acrescente a opção de topo de bolo.

O Claude muda o arquivo e publica de novo no mesmo endereço: a página aberta no navegador muda sozinha, e o link continua o mesmo. Cada publicação vira uma versão. Confira a conta de novo, agora com o topo.

Compartilhe com um link

⚠️ Antes, releia a página. Um link público abre a página para qualquer pessoa que o tenha. Confira se nela não aparece dado de cliente, como o nome, o telefone ou o endereço de uma encomenda. Uma calculadora de preços pode ir para qualquer um; uma lista de encomendas, não.

Na página aberta no navegador:

1. No topo, clique em Share (compartilhar).
2. Em Who has access (quem tem acesso), troque Only you (só você) por Anyone with the link (qualquer pessoa com o link).
3. Clique em Copy link (copiar link).

Agora confira o que um visitante vê. Abra uma janela anônima, que não usa as suas contas: no Chrome e no Edge, Ctrl + Shift + N (Cmd + Shift + N no Mac); no Firefox, Ctrl + Shift + P (Cmd + Shift + P no Mac); no Safari, Cmd + Shift + N. Cole o link e aperte Enter.

A página abriu, com o aviso Content is user-generated and unverified. (conteúdo criado por quem usa, sem verificação) no lugar do seu nome? É assim que um visitante vê. Faça uma conta ali também: ela tem de fechar como fechou para você. Pediu para entrar numa conta? Volte ao Share e confira se está em Anyone with the link.

Pronto: é só mandar o link, pelo WhatsApp ou por e-mail.

• Mudou a página depois de compartilhar? Como o link já está com outras pessoas, o Claude pergunta antes de mudar, uma vez por conversa. No Share, a opção Always share latest version (sempre a versão mais recente) faz o link mostrar sempre a versão mais nova; desligada, ele mostra a versão que você escolher ali.
• Para parar de compartilhar, volte ao Share e escolha Only you de novo.
• No Team e no Enterprise, o Share oferece também pessoas convidadas e a empresa inteira. O Anyone with the link fica apagado até o Owner ligar o compartilhamento externo (External sharing).

💡 A página inteira, sem GitHub. É o caminho que a Aula 19 citou: peça "publique a página como um artifact" e compartilhe do mesmo jeito. Se a sua página tem um estilo.css, peça antes para juntar tudo no index.html, porque o artifact é uma página só.

Encontre as suas páginas

• Na mesma conversa, o link continua lá: um clique, e a página abre.
• Numa conversa nova (+ New), o Claude não sabe de qual página você está falando: sem o link, ele cria uma página nova em vez de mudar a antiga. Cole o link no pedido, como "Atualize https://claude.ai/code/artifact/... com o preço novo do brigadeiro".
• Perdeu o link? Ele continua na conversa antiga, na barra lateral. E, no navegador, a galeria em claude.ai/code/artifacts lista todas as páginas que você criou. O topo de cada página tem um link para a galeria.

Para ir além (opcional): artifacts para quem programa

🔧 Para ir além (para quem já programa; pode pular): esta parte mostra outros usos de artifact, quando o Claude Code pede licença antes de publicar, o visual da página, o que fazer quando ele não publica, editores e comentários nas empresas, dados ao vivo pelos conectores, downloads, os limites técnicos da página e como desligar os artifacts.

Outros usos. Um artifact vale sempre que o texto na conversa é o formato errado. O Claude monta a página com tudo o que a sessão alcança, do seu código aos dados que ele buscou por MCP (Aula 14).

O botão do último pedido traz o resultado de volta para a sessão: a decisão que você tomou mexendo nos cartões vira o seu próximo pedido. O que um artifact não é: um site. Para uma ferramenta interna com servidor, publique na sua própria infraestrutura.

Quando ele pede licença antes de publicar. Um artifact novo, pedido por você, é publicado sem pedido de licença. O Claude Code pergunta antes (no modo Auto, o classificador decide) no modo Plan, quando a página vai chamar conectores ou oferecer downloads, quando o Claude não consegue ler o arquivo sem a sua licença, quando uma tarefa agendada da sessão publica e, uma vez por conversa, antes de mudar um artifact compartilhado com link público. No Manual, uma mudança num arquivo que ele não pode editar sem licença também pergunta, mesmo com uma regra allow para a ferramenta Artifact.

O visual. O Claude segue uma skill de design embutida, que procura primeiro um design system no projeto. Anote as cores, as fontes e os espaçamentos no CLAUDE.md (Aula 11), e as páginas saem com o visual da sua marca. O seu design system vale mais que as escolhas dele, e o seu pedido vale mais que os dois.

Não publicou? Se o Claude disser que não consegue publicar, ou entregar um HTML local sem link, os artifacts não estão ligados na sessão:

Na versão do terminal, o /artifacts também lista as páginas, anexa uma à sessão e apaga uma de vez, com a tecla d.

Editores e comentários (Team e Enterprise). No Share, adicione uma pessoa e troque o papel dela de viewer para editor: ela dá o link ao Claude dela, que puxa a versão atual e publica uma nova. Quem recebe o artifact dentro da organização pode comentar; quando alguém que pode editar manda um comentário ao Claude (com Send to Claude ou citando @claude), ele chega à sua sessão, e o Claude responde sozinho ou pede a sua licença, conforme o modo. Quem só tem o link público não vê os comentários.

Dados ao vivo pelos conectores. Diga o conector e os dados no pedido: "Monte um dashboard em artifact com os pull requests abertos, buscando a lista ao vivo pelo meu conector do GitHub quando a página carregar". Só valem os conectores da sua conta do claude.ai: os servidores MCP locais, como os do .mcp.json, servem enquanto o Claude monta a página, mas a página publicada não os chama. Cada pessoa que abre a página usa a própria conta e os próprios conectores, e o claude.ai pede a licença dela antes da primeira chamada; quem abre o link público sem login, ou de fora da organização, vê a página sem as partes ao vivo. Peça um aviso em cada parte ao vivo dizendo de qual conector ela precisa.

Downloads. Um botão que baixa um CSV ou um PNG só funciona se a sua conta tiver esse recurso; a página não consegue começar um download sozinha, por um link comum.

Os limites da página.

💡 Página custa mais que texto. Um artifact gasta tokens de saída como qualquer resposta, e uma página com estilo gasta mais que o mesmo conteúdo como texto na conversa (Aula 08). Prefira SVG a imagens nos diagramas, dispense a interatividade que você não vai usar e peça um resumo dos dados grandes.

Desligar. Para você, em todos os projetos: "enableArtifact": false no ~/.claude/settings.json, ou Artifact na lista permissions.deny. Num projeto: "enableArtifact": false no .claude/settings.json ou no .claude/settings.local.json (a partir da v2.1.242); um true nesses arquivos não liga de volta. Peça ao Claude, ou edite no painel de arquivos. (Na versão do terminal, a linha Artifacts do /config grava essa mesma chave.)

Página dos outros é conteúdo, não ordem. Quando você dá ao Claude o link de um artifact de outra pessoa, ele lê como lê uma página da web: as instruções escritas nela chegam como algo que a página diz, e não como ordens (Aula 05).

Mais detalhes na página de artifacts da documentação oficial, em inglês, e no guia do app desktop, em português.

---

Na prática

Use a pasta da sua página (a confeitaria, ou a da sua ideia).

1. Na aba Code, clique em + New. Na linha abaixo da caixa de mensagem, escolha Local e a pasta da sua página e, na mesma linha, Manual no seletor de modo.
2. Peça: "Faça um artifact com uma calculadora de orçamento de festa da confeitaria, com os preços do cardápio da página. O cliente escolhe o tamanho do bolo e quantos docinhos quer, e vê o total." Clique no link que aparece na conversa. Na primeira vez, o app pergunta onde abrir links: escolha o navegador padrão.
3. Confira a conta: escolha um bolo e uma quantidade de docinhos, faça a mesma conta à mão e compare com o total. Se não bater, diga os números ao Claude.
4. Peça "acrescente a opção de topo de bolo". Veja a página mudar no mesmo endereço e confira a conta de novo, com o topo.
5. Releia a página procurando dado de cliente. Depois, no topo da página, clique em Share, escolha Anyone with the link e clique em Copy link.
6. Abra uma janela anônima, cole o link e confira: a página abre, e a conta fecha.
7. Feche a aba da calculadora e reabra pelo link na conversa. Depois, abra a galeria em claude.ai/code/artifacts e encontre a calculadora.
8. Não vai mandar o link agora? Volte ao Share e escolha Only you.

Resumo

• Um artifact é uma página com link que o Claude publica no claude.ai, a partir da conversa. Ela nasce privada, só para você, e precisa de um plano Pro, Max, Team ou Enterprise e do app na versão 1.13576.0 ou mais nova, com o login da sua conta.
• Para pedir, diga o que a página faz: "faça um artifact com uma calculadora de orçamento de festa da confeitaria, com os preços do cardápio da página". Abra pelo link que aparece na conversa.
• Confira pelo que se vê: a página abre, e a conta feita à mão bate com o total.
• Para mudar, peça: o Claude publica de novo no mesmo endereço, e cada publicação vira uma versão.
• Para compartilhar: Share, Anyone with the link e Copy link, e confira numa janela anônima. Para parar, Only you.
• Numa conversa nova, cole o link no pedido. Perdeu o link? Ele está na conversa antiga e na galeria, em claude.ai/code/artifacts.
• Nada de dado de cliente numa página com link público.

Com esta aula, você termina o curso. A confeitaria foi o exemplo; daqui em diante, o projeto é a sua ideia. Comece como aqui: uma pasta para ela, o CLAUDE.md com as regras da casa, um pedido com critério de pronto e uma versão guardada a cada passo que der certo. Quando algo der errado, a Aula 24 mostra o caminho; quando quiser mostrar, peça uma página com link.

Quando o curso for atualizado, o resumo de cada mudança, em linguagem simples, fica nas Novidades do curso, com a data.