Claude Artifacts para mockups instantâneos
Entre o PRD e o app funcional tem um passo barato e poderoso: o mockup clicável direto no Claude. Sem montar projeto, sem deploy — você descreve a tela e ela aparece, navegável, no chat. Este post mostra como usamos isso pra encurtar a distância entre ideia e forma.
O que são os Artifacts
Artifacts é o painel do Claude onde ele renderiza o que gera — incluindo interfaces em HTML/React funcionando ali mesmo. Você pede "uma tela de listagem de health scores com filtro por cluster" e recebe algo clicável em segundos, pra reagir em cima.
Por que isso é ouro na ideação
- Velocidade brutal. Conceito vira tela em minutos, não horas.
- Conversa concreta. "Acho que o filtro devia ficar no topo" é muito mais produtivo olhando uma tela do que imaginando.
- Iteração ao vivo. "Move o botão", "deixa mais denso", "adiciona um estado vazio" — e ele refaz na hora.
- Custo zero de descarte. Não gostou? Joga fora sem dó. Não tem projeto, build nem branch envolvidos.
Como usamos no ClubPetro
A gente trata o Artifact como rascunho visual de alta fidelidade, não como código de produção. Fluxo típico:
- Descreve a tela com o contexto do nosso domínio (CSM, redes, health score).
- Pede variações ("me mostra duas versões do layout").
- Refina a escolhida ao vivo.
- Usa a tela aprovada como referência pra construir pra valer no nosso design system (
@repo/ui, 60+ componentes Radix).
O Artifact alinha a visão; a construção real respeita os nossos tokens e componentes.
Boas práticas
- Dê referência visual e de marca. Quanto mais contexto (densidade, tom, exemplos), mais perto do nosso padrão.
- Foque no fluxo, não no pixel. Nessa fase importa a estrutura e a navegação, não a cor exata.
- Não copie o código direto pra produção. O Artifact não conhece nosso design system; ele inspira, não substitui.
⚠️ Armadilha #8: colar o React do Artifact direto no app. Ele ignora
@repo/ui, tokens de tailwind e nossos padrões de acessibilidade — vira inconsistência visual e dívida. Use como mockup, reconstrua no sistema.
Próximo da série: #09 — Lovable: do prompt ao app funcional.