M3: Artifacts — mini-apps direto no chat

Nível: Gratuito Duração: ~15 minutos Você precisa de: Conta grátis no claude.ai (a do módulo 1)

O que você vai conquistar

• Criar uma mini-app (calculadora, landing ou dashboard) em 5–10 minutos sem tocar em código.
• Compartilhá-la com um cliente via link do Claude ou subir para um hosting gratuito.
• Conhecer as 6 categorias de Artifacts e saber quando usar cada uma no seu trabalho como freelancer.

Ao final você vai ter um Artifact real publicado, pronto para colocar numa proposta.

O que é um Artifact

Um Artifact é qualquer bloco de conteúdo independente que o Claude gera e que pode existir fora do chat: um componente React interativo, um SVG, um documento HTML, um bloco de código, uma planilha em CSV ou um texto longo como um contrato.

O diferencial não é só o Claude gerar — é que ele gera em um painel lateral separado do chat, com pré-visualização em tempo real. E desde maio de 2025 você pode publicar com um clique em claude.ai/share/... (link público, sem precisar de login).

As 6 categorias de Artifacts

1. React components — mini-apps interativas com estado, botões, formulários. A mais poderosa.
2. SVG — gráficos vetoriais: ícones, diagramas, infográficos simples.
3. HTML — páginas estáticas completas: landings, páginas de obrigado, mockups de e-mail.
4. Code — trechos de código em qualquer linguagem, prontos para copiar.
5. Markdown — documentos longos (contratos, briefs, relatórios) com formatação.
6. CSV/texto — dados tabulares, tabelas de preços, listas de contatos.

Casos de uso para freelancers brasileiros

• SMM: carrossel de 7 slides em SVG com medidas exatas para o Instagram.
• Design: calculadora de preços para orçamentos em tempo real — perfeito para mandar no WhatsApp Business.
• Copywriting: página de obrigado pós-compra em HTML que o cliente publica direto no site.
• Marketing: dashboard de métricas em React com dados colados à mão — pronto para apresentar na reunião.
• Atendimento ao cliente: formulário de onboarding interativo para novos clientes do Hotmart checkout.

Passo a passo: criar seu primeiro Artifact

1. Peça ao Claude para criar um Artifact

O Claude detecta automaticamente quando o output deveria ser um Artifact. Mas você pode pedir de forma explícita:

«Cria um Artifact React com uma calculadora de orçamento para serviços de SMM. Entradas: horas por mês e valor por hora. Saída: total mensal e anual com um visual de detalhamento.»

2. Editar o Artifact

No painel lateral você vê o código e a preview. Peça mudanças no chat:

«Muda a cor primária para #D97148. Adiciona um campo para desconto em porcentagem.»

3. Publicar o Artifact

Botão «Publish» no canto superior do painel. O Claude gera um link claude.ai/share/... que qualquer pessoa pode abrir sem login.

Mini-exercício (15 minutos)

1. Peça ao Claude um Artifact para o seu caso (calculadora, landing mini, FAQ interativo).
2. Itere 2 vezes com mudanças específicas.
3. Publique com o botão Publish.
4. Compartilhe o link com alguém da sua equipe ou mande num DM de teste.

Limitações atuais

• Gratuito: Artifacts disponíveis, Publish disponível.
• Tamanho: componentes muito complexos (>500 linhas) podem ser truncados.
• APIs externas: os React Artifacts não conseguem chamar APIs externas pelo browser (CORS). Para conectar dados reais, o fetch precisa vir do servidor.