MÓDULO 2.4

🎨 Artifacts

Canvas paralelo ao chat onde o Claude monta documento, código, HTML/React renderizado, SVG, Mermaid. Geração, edição inline, export.

6
Tópicos
40
Minutos
Inter.
Nível
Prático
Tipo
1

🎨 O que é um Artifact

Conteúdo separado do chat, renderizado em painel paralelo: documento longo, código, HTML/React interativo, SVG, Mermaid. Mantém chat limpo e dá visualização rica.

📐 Layout típico

┌─────────────────┬──────────────────────┐
│                 │                      │
│  CHAT           │  ARTIFACT            │
│  (mensagens)    │  (documento/código   │
│                 │   renderizado)       │
│                 │                      │
└─────────────────┴──────────────────────┘
2

📄 Tipos suportados

5 tipos principais. Pedir certo desbloqueia capacidade.

📝

Markdown

Documento longo, relatório, doc técnica

💻

Código

Python, JS, Go, qualquer linguagem

🌐

HTML / React

Interativo, roda em sandbox

🎨

SVG

Ilustração vetorial, logo, ícone

📊

Mermaid

Diagrama de fluxo, sequência, ER

🔄

Múltiplos

Pode ter vários artifacts no chat

3

✏️ Edição iterativa

Próximas mensagens pedem mudanças localizadas ("muda o título", "adiciona seção sobre X", "trade o azul pelo verde"). Artifact é atualizado.

💡 Padrão de edição

"Edita o artifact: [mudança específica]". Quanto mais cirúrgica a instrução, mais rápida a iteração. "Refaz tudo" desperdiça tempo.

4

💾 Export e download

Output só vira valor quando sai do Claude e entra no seu fluxo: repo, drive, email, deploy.

1

Copy

Copia o conteúdo bruto. Pra colar no editor, terminal, doc externo.

2

Download

Arquivo .md / .html / .svg / .py direto no disco.

3

Publish

Em casos suportados, gera URL pública pra mostrar/embutir. Cuidado com exposição.

5

🌐 React/HTML interativo

Artifact React/HTML roda em sandbox real. Clica botão, vê acontecer. Caminho mais rápido entre ideia e tela funcional.

🚀 Casos onde brilha

  • • Protótipo de UI / componente
  • • Calculadora interativa (juros, ROI, conversão)
  • • Demo de algoritmo visual
  • • Form com validação
  • • Dashboard estático com mock
6

⚠️ Limitações

Artifact é protótipo, não produção. Saber as limitações evita esperar o que não há.

✗ Não tem

  • ✗ Network external (CORS bloqueia)
  • ✗ Persistência entre sessões
  • ✗ Conexão real com API
  • ✗ Acesso a localStorage cross-session

✓ Caminho de produção

  • ✓ Download e leva pro repo
  • ✓ Integra com framework real
  • ✓ Adiciona backend separado
  • ✓ Deploy via Vercel/Netlify/etc

✅ Resumo do Módulo

✓
Canvas paralelo ao chat — mantém chat limpo
✓
5 tipos: MD, código, HTML/React, SVG, Mermaid
✓
Edição cirúrgica > refazer tudo
✓
Copy / Download / Publish pra sair do Claude
✓
React/HTML roda em sandbox real
✓
Protótipo, não produção — sem rede external, sem persistência

Próximo módulo:

2.5 — Opus / Sonnet / Haiku

← AnteriorPróximo →