Como usar Claude Artifacts: tutorial passo a passo
Um passo a passo completo do tutorial de Claude Artifacts de 12 minutos do Kevin Stratvert: construa um dashboard interativo a partir de um CSV, refine-o com prompts no chat, corrija detalhes com a ferramenta de anotação e adicione IA integrada, dados salvos, conectores e Live Artifacts. 14 etapas, cada uma com captura de tela real.
A versão curta
- Artifacts são miniapps interativos — dashboards, ferramentas, jogos — que o Claude constrói a partir de uma descrição em linguagem comum. Uma conta gratuita do Claude basta para começar.
- Envie um CSV e em cerca de um minuto o Claude entrega um dashboard funcional com gráficos que exibem valores ao passar o mouse; cada ajuste depois disso é só mais um prompt no chat, sem código.
- A ferramenta de anotação corrige um elemento exato; compartilhar é uma URL de um clique para "qualquer pessoa com o link", e fixar mantém seus Artifacts favoritos no topo da biblioteca.
- Os Artifacts também podem chamar o próprio Claude, lembrar dados entre sessões e alcançar Slack ou Trello por meio de conectores MCP — e os Live Artifacts no app desktop se mantêm atualizados sozinhos.
How to Use Claude Artifacts (Full Tutorial)
Canal: Kevin Stratvert · 12:42
Sobre as capturas de tela
Todas as capturas de tela deste guia foram retiradas do vídeo acima e permanecem propriedade de Kevin Stratvert. Cada etapa tem um link para o momento exato em que acontece no vídeo. O texto passo a passo, as legendas e as perguntas frequentes são escritas por nós.
De um CSV a um dashboard (etapas 1–10)
- 1
Abra a biblioteca de Artifacts
Entre em claude.ai — uma conta gratuita serve — e clique em Artifacts na barra lateral esquerda. As abas All e Yours listam tudo o que você criou, Shared with you reúne os Artifacts que outras pessoas mandaram para você, e a caixa de pesquisa filtra a biblioteca inteira.
O hub de Artifacts: abas All, Yours e Shared with you, com New artifact no canto.Assistir a partir de 0:50 - 2
Clique em New artifact
Clique no botão New artifact no canto superior direito. O Claude abre uma nova tarefa e, em vez de construir no escuro, entrevista você primeiro. Ele chama o Artifact de "web page" — é só a base sobre a qual ele constrói, não importa o que você vá fazer no fim.
Um clique inicia uma tarefa guiada — perguntas antes do código.Assistir a partir de 1:02 - 3
Responda às perguntas iniciais
Para este dashboard escolhemos Dashboard, o estilo Bold & colorful e, como foco, Sales & revenue trends. Seu questionário pode ser um pouco diferente — tudo bem. Responda o que for relevante, ou pule as perguntas e descreva tudo você mesmo em uma mensagem.
Tipo, estilo, foco: essas respostas guiam a primeira versão do Claude.Assistir a partir de 1:40 - 4
Anexe seu CSV
Quando o Claude perguntar de onde virão os dados, diga que vai enviar os seus. Clique no ícone de mais na caixa de mensagem, escolha Add files or photos (Ctrl U / Cmd U também funciona) e selecione seu CSV. O Claude analisa as colunas e decide como visualizá-las antes de construir.
Ícone de mais → Add files or photos → escolha o CSV; o Claude o estuda antes de escrever qualquer interface.Assistir a partir de 2:19 - 5
Publique a primeira versão
Um ou dois minutos depois, o Claude publica o Artifact. O dashboard aparece à direita — métricas principais no topo, gráficos abaixo — e o chat resume o que foi construído: 1,207 pedidos em 5 sabores e 4 regiões, direto do CSV. Clique no ícone de expandir para ver melhor.
"The Bake Sheet" — cartões de KPI e gráficos gerados a partir de um único CSV enviado.Assistir a partir de 2:42 - 6
Passe o mouse pelos gráficos para ver valores exatos
Isto é um app de verdade, não uma imagem. Deslize o cursor pela linha de tendência e um tooltip mostra o faturamento exato de cada sabor naquele mês; os gráficos de barras e as tabelas reagem do mesmo jeito. Ninguém escreveu código de gráfico — o Claude construiu tudo a partir do arquivo.
Um tooltip de junho destrincha o faturamento por sabor — interativo desde a primeira publicação.Assistir a partir de 2:58 - 7
Refine conversando, sem programar
Não gostou de algo? É só pedir. "Add a dark mode toggle to the dashboard" basta — o Claude republica uma versão atualizada com um botão de sol/lua no cabeçalho que muda o tema inteiro e lembra da sua escolha. Continue pedindo no mesmo tópico para mudanças maiores.
Um prompt depois: um botão com ícone de lua no cabeçalho e um tema escuro completo.Assistir a partir de 4:02 - 8
Corrija um detalhe com a ferramenta de anotação
Para mudar um único elemento, abra a ferramenta de anotação no canto superior direito do Artifact e destaque o ponto exato — aqui, o título "Kevin's Cookie Company". Uma caixa de comentário se abre: diga ao Claude o que mudar e escolha Send to Claude para aplicar na hora, ou Add comment para deixar a nota sem mexer em nada.
Destaque, escreva a correção e aplique — ou deixe como comentário de revisão.Assistir a partir de 4:50 - 9
Compartilhe com qualquer pessoa que tiver o link
Clique em Share, defina General access como Anyone with the link e escolha qual versão publicar — o Claude guarda cada revisão, então você pode, de propósito, compartilhar um retrato mais antigo. Copy link entrega uma URL em que o dashboard roda e continua interativo em qualquer navegador.
General access → Anyone with the link; o seletor de versão decide o que os visitantes veem.Assistir a partir de 5:10 - 10
Fixe o Artifact e guarde o chat para edições
De volta à biblioteca, passe o mouse sobre o Artifact, abra o menu de três pontos e escolha Pin — itens fixados ficam reunidos em uma seção Pinned para acesso de um clique. Para fazer mais mudanças depois, reabra o chat original do Artifact em Chat and tasks: aquela conversa continua sendo a sala de edição do Artifact.
O menu de três pontos fixa o card; o chat original continua aberto para edições futuras.Assistir a partir de 5:42
Suba de nível: IA integrada, dados salvos, conectores, Live Artifacts (etapas 11–14)
- 11
Construa uma ferramenta que usa o próprio Claude
Os Artifacts podem chamar o Claude diretamente. Crie um novo Artifact, escolha Something else e descreva a ferramenta — aqui: funcionários digitam ingredientes de cookies e o Claude gera cinco ideias de nome. Sem chave de API e sem backend; no primeiro uso, o Artifact simplesmente pede ao visitante permissão para acessar o Claude.
O Batch Namer: digite ingredientes, clique em Generate 5 names e receba sugestões escritas por IA.Assistir a partir de 7:02 - 12
Faça ele lembrar dos dados
Peça ao Claude para adicionar favoritos e ele checa uma questão de design primeiro: o que for salvo fica privado neste navegador ou é compartilhado com todos que abrirem o Artifact? Aqui escolhemos compartilhado. As ideias salvas persistem — feche a aba e amanhã os nomes estrelados continuam lá. É a base de trackers, listas e ferramentas leves de projeto.
Salvamento privado ou compartilhado — depois cada sugestão ganha uma estrela que sobrevive entre sessões.Assistir a partir de 8:20 - 13
Conecte ao Slack e muito mais
Por meio de conectores MCP (Model Context Protocol), um Artifact pode agir fora do Claude. Peça um botão de compartilhar no Slack, aprove a conexão, escolha um canal e cada ideia salva ganha um botão que a publica para a equipe. Apps sem conector nativo continuam alcançáveis via Zapier MCP — milhares de ações extras.
Slack conectado: a ideia salva agora se publica sozinha em #new-cookie-ideation.Assistir a partir de 9:40 - 14
Mantenha tudo atualizado com Live Artifacts
No app desktop do Claude, os Live Artifacts puxam dados atuais de apps conectados e arquivos locais em vez de um retrato congelado. Este dashboard de vendas se compila sozinho a partir de relatórios de PDV e planilhas do Google Drive; aperte Reload no cabeçalho e ele se redesenha com os números mais recentes — construa uma vez e abra sempre uma visão atual.
O botão Reload do app desktop busca de novo os dados conectados sob demanda.Assistir a partir de 12:04