Claude Artifacts: crie protótipos e wireframes sem programar — 12 prompts!

Como usar o Claude para criar protótipos, wireframes e pitch decks sem saber programar — e sem pagar R$ 300/mês em ferramentas

A maioria das pessoas abre o Claude e pede textos. Elas nunca descobrem que, enquanto digitam, há uma camada inteira escondida nessa mesma conversa — capaz de renderizar interfaces interativas, gerar wireframes navegáveis e montar apresentações estruturadas em segundos. Tudo isso sem instalar nada, sem tutorial de YouTube de 4 horas e sem abrir o cartão de crédito.

O custo invisível de ignorar isso é real: startups gastam semanas em ciclos de feedback com designers antes de validar uma ideia. Freelancers perdem propostas porque não conseguem mostrar o produto antes de assinar o contrato. Estudantes entregam pitch decks no PowerPoint 2013 quando o investidor esperava algo que parecesse produto de verdade. Cada um desses problemas tem a mesma solução — e ela já está na aba que você tem aberta.

Neste guia, você vai aprender exatamente como usar os Artifacts do Claude para criar protótipos HTML navegáveis, wireframes em SVG e pitch decks estruturados. Copie 12 prompts prontos que já testei, veja os erros que descartei e entenda o que funciona de verdade.

Neste guia: como gerar protótipos, wireframes e pitch decks com o Claude. Copie 12 prompts prontos divididos em 3 séries.

Índice

• O método Artifacts — por que funciona
• O que você vai conseguir gerar
• Tabela 01: Tipos de output por caso de uso
• Tabela 02: HTML vs React vs SVG — quando usar cada um
• Tabela 03: Anatomia de um bom prompt de protótipo
• 12 prompts mestres prontos para copiar
• Amanda aconselha
• Comandos de atalho
• O que o Claude não consegue fazer
• SOS: o Artifact não apareceu
• Erros fatais
• Prompt fraco vs prompt forte
• Glossário rápido
• FAQ

Por que o método Artifacts funciona (3 pilares)

Pilar 1: Renderização imediata — você vê, não imagina

A diferença entre descrever uma interface e vê-la renderizada é a diferença entre ler a receita e provar o prato. Quando o Claude gera um Artifact, o código vira interface clicável em segundos no painel lateral. Isso elimina o ciclo de “descreve → designer interpreta → você rejeita → repete” que consome semanas em projetos reais. Um usuário que validava telas com um designer em 3 sessões de feedback passou a aprovar protótipos na primeira conversa com o Claude.

Pilar 2: Iteração por linguagem natural — sem aprender atalhos

Figma, Whimsical e Adobe XD têm curvas de aprendizado reais. O Claude usa português. Você diz “mova o botão para baixo do formulário”, “mude a cor do cabeçalho para azul escuro” ou “adicione uma tela de confirmação” — e o Artifact é atualizado na mesma conversa. Não há atalho de teclado para memorizar, camada para selecionar ou plugin para instalar.

Pilar 3: Código exportável — não é imagem, é produto

O que o Claude gera não é uma captura de tela. É HTML, CSS e JavaScript reais — código que um desenvolvedor pode abrir, modificar e usar como base de implementação. Um pitch deck gerado como HTML tem animações, navegação entre slides e pode ser hospedado em um link público. Isso muda o nível da conversa com investidores.

O que você vai conseguir gerar com estes prompts

Tabela 01: Tipos de output por caso de uso

✔️ Até aqui você já sabe: que o Claude gera 6 tipos distintos de output visual, que cada caso de uso tem uma instrução específica, e que o resultado é sempre código — não imagem.

Tabela 02: HTML vs React vs SVG — quando usar cada um

Tabela 03: Anatomia — o que cada elemento de um prompt de protótipo faz por dentro

12 prompts prontos para protótipos, wireframes e pitch decks — copie e cole 📌

Cada prompt abaixo funciona como está — basta substituir os campos em [colchetes] com as informações do seu projeto. O Claude vai abrir o Artifact automaticamente no painel lateral.

Mantenha a instrução de formato (“em HTML”, “em React”, “em SVG”) exatamente como está — é ela que aciona a renderização visual. O resto você pode adaptar livremente.

📐 Série A — Wireframes (prompts A-01 a A-04)

📐 Prompt A-01 — Wireframe de app mobile em SVG

Crie um wireframe de baixa fidelidade em SVG para um app mobile de [tipo do app, ex.: agendamento de consultas médicas].

Telas a incluir (navegáveis por botões de texto simples):
1. Tela inicial com logo e botões de Login e Cadastro
2. Tela de dashboard com lista de [entidade principal, ex.: consultas] e botão de nova ação
3. Tela de detalhe com campos de informação e botão de confirmar

Estilo: escala de cinza, sem cores, caixas com bordas, textos em placeholder realistas para o domínio. Sem imagens — use ícones simples em SVG. Dimensões: 375x812px por tela (iPhone padrão).

📐 Prompt A-02 — Wireframe de fluxo de cadastro

Crie em HTML um wireframe de fluxo de cadastro em múltiplos passos para [produto ou serviço, ex.: plataforma de cursos online].

Passos:
- Passo 1: dados pessoais (nome, e-mail, senha)
- Passo 2: informações de perfil ([campos específicos, ex.: área de atuação, nível de experiência])
- Passo 3: confirmação e resumo

Design: wireframe sem cores, fundo branco, bordas em cinza (#ccc), texto em preto. Barra de progresso no topo. Botões "Voltar" e "Próximo" funcionais com JavaScript vanilla. Sem dependências externas.

📐 Prompt A-03 — Mapa de jornada do usuário em SVG

Crie um mapa de jornada do usuário em SVG para [persona, ex.: uma mãe de 35 anos que busca babá de confiança] usando o produto [nome do produto].

Inclua 5 etapas na horizontal: [lista as etapas, ex.: Descoberta → Pesquisa → Primeiro contato → Contratação → Pós-uso]

Para cada etapa, mostre em linhas separadas:
- Ação do usuário
- Emoção (ícone simples: 😊 😐 😟)
- Ponto de dor
- Oportunidade de melhoria

Estilo: diagrama horizontal clean, fundo branco, colunas separadas por linhas finas, texto compacto, sem gradientes.

📐 Prompt A-04 — Wireframe de dashboard web

Crie em HTML um wireframe de dashboard para [tipo de produto, ex.: sistema de gestão de vendas para pequenos varejistas].

Layout: sidebar fixa à esquerda com menu de navegação, área principal com:
- 4 cards de métricas no topo ([métricas, ex.: Receita do mês, Pedidos, Clientes ativos, Ticket médio])
- 1 gráfico de barras simplificado em SVG (dados fictícios coerentes com o setor)
- 1 tabela com as últimas 5 [entidades, ex.: vendas] com colunas de Data, Cliente, Valor e Status

Wireframe sem cores: apenas tons de cinza (#f5f5f5, #e0e0e0, #999, #333). Sem dependências externas. JavaScript apenas para interação de menu mobile.

🎨 Série B — Protótipos de alta fidelidade (prompts B-01 a B-04)

🎨 Prompt B-01 — Protótipo de landing page completa

Crie em HTML uma landing page completa para [produto, ex.: app de controle financeiro pessoal chamado "Bolso"].

Seções obrigatórias:
1. Hero: headline impactante, subtítulo de benefício, botão de CTA e mockup do app (use um retângulo estilizado com ícones SVG)
2. Problema/solução: 3 colunas com ícone, título e descrição curta
3. Como funciona: 3 passos numerados
4. Depoimentos: 2 cards com nome fictício, foto placeholder e texto de 2 linhas
5. CTA final com campo de e-mail e botão

Identidade visual: cor principal [hex, ex.: #2563eb], fonte [ex.: system-ui ou Georgia], fundo branco, bordas suaves (border-radius: 8px). Responsivo com media query para mobile. Arquivo HTML único, sem frameworks externos.

🎨 Prompt B-02 — Dashboard interativo com gráficos reais

Crie um dashboard React com Recharts para [contexto, ex.: painel de métricas de uma academia de ginástica].

Componentes:
- 4 KPI cards: [métricas coerentes, ex.: Alunos ativos (1.247), Receita mensal (R$ 48.320), Churn do mês (3,2%), NPS (72)]
- Gráfico de linha (LineChart): evolução dos últimos 6 meses de [métrica principal]
- Gráfico de barras (BarChart): comparativo por [segmento, ex.: plano de assinatura]
- Tabela simples com os 5 [itens, ex.: planos mais vendidos] e % do total

Dados: fictícios mas realistas para o setor. Cores: [cor principal, ex.: #10b981] para destaque. Use Tailwind para layout. Componente único com export default.

🎨 Prompt B-03 — Protótipo de app com múltiplas telas navegáveis

Crie em HTML um protótipo de alta fidelidade de um app de [categoria, ex.: delivery de comida saudável] com 4 telas navegáveis por botões.

Telas:
1. Splash/Login: logo centralizado, campo de e-mail, senha e botão "Entrar"
2. Home: barra de busca, carrossel horizontal de categorias, lista de [produtos, ex.: pratos] com card (imagem placeholder colorido, nome, preço, estrelas)
3. Detalhe do produto: imagem grande placeholder, nome, descrição 3 linhas, botão "Adicionar ao carrinho" fixo no rodapé
4. Carrinho: lista de itens adicionados, subtotal, campo de cupom e botão "Finalizar pedido"

Design: mobile-first (max-width: 390px centralizado), cor principal [hex], barra inferior de navegação com 4 ícones SVG. Transição suave entre telas com CSS (opacity + transform). Sem imagens externas.

🎨 Prompt B-04 — Componente React reutilizável com variantes

Crie um componente React de [nome do componente, ex.: card de produto para e-commerce] com as seguintes variantes:
- Default: imagem, nome, preço, botão "Comprar"
- Com desconto: badge de % de desconto, preço riscado e preço novo
- Esgotado: botão desativado, overlay semitransparente "Indisponível"

Props: { imageSrc, name, price, discount?, outOfStock? }
Use Tailwind para estilo. Inclua um preview com os 3 estados renderizados lado a lado.
Adicione comentários de JSDoc em cada prop. Export default do componente principal.

🎤 Série C — Pitch decks e apresentações (prompts C-01 a C-04)

🎤 Prompt C-01 — Pitch deck para investidores (estrutura clássica)

Crie em HTML um pitch deck navegável de 10 slides para uma startup de [categoria, ex.: edtech B2B para treinamento corporativo].

Slides (navegação por setas ← → e barra de progresso no topo):
1. Capa: nome da startup [ex.: SkillPath], tagline, logo placeholder
2. Problema: 3 bullets com dado estatístico real ou plausível para o setor
3. Solução: como o produto resolve, 1 frase central em destaque
4. Produto: descrição de 3 funcionalidades com ícone SVG cada
5. Mercado: TAM/SAM/SOM com círculos concêntricos em SVG
6. Modelo de negócio: tabela de planos (Básico / Pro / Enterprise) com preços fictícios
7. Tração: 3 métricas de crescimento com número grande em destaque
8. Concorrentes: tabela comparativa com 4 players e checkmarks
9. Time: 3 cards com nome, cargo e 1 linha de credencial
10. Investimento: valor buscado, uso dos recursos em gráfico de pizza SVG, CTA

Design: fundo escuro [hex, ex.: #0f172a], texto branco, destaque em [cor, ex.: #f59e0b], fonte system-ui, slide fullscreen (100vw x 100vh), transição com CSS.

🎤 Prompt C-02 — Apresentação de proposta comercial

Crie em HTML uma apresentação de proposta comercial para vender [serviço, ex.: consultoria de SEO] para [cliente alvo, ex.: e-commerces de moda com faturamento entre R$ 1M e R$ 10M].

Slides (8 ao total, navegáveis):
1. Capa com nome da empresa prestadora [ex.: Agência Rank] e nome do cliente
2. Diagnóstico: 3 problemas identificados no cliente (ficcionais mas plausíveis)
3. Nossa abordagem: metodologia em 4 etapas com ícones
4. Escopo detalhado: tabela com entregável, responsável e prazo
5. Cronograma: linha do tempo em SVG com 3 meses de implementação
6. Investimento: tabela de pacotes e botão de "Escolher plano"
7. Resultados esperados: 3 KPIs com projeção em gráfico de barras SVG
8. Próximos passos: 3 ações numeradas + dados de contato

Design: fundo branco, cor de destaque [hex], tipografia profissional. Sem fontes externas.

🎤 Prompt C-03 — One-pager de produto para enviar por e-mail

Crie em HTML um one-pager (página única, longa) de produto para [produto, ex.: software de gestão de frotas para transportadoras].

Seções em ordem:
- Header fixo: logo placeholder + botão "Falar com vendas"
- Hero: headline, subtítulo, botão CTA e barra de logos de clientes (3 logos texto placeholder)
- Problema em números: 3 dados estatísticos do setor em caixas de destaque
- Como funciona: 3 passos com número grande, título e 2 linhas de descrição
- Funcionalidades: grid 2x3 com ícone SVG, nome e 1 linha por feature
- Depoimento em destaque: citação longa, nome, cargo, empresa
- Planos: 3 colunas (Starter / Growth / Enterprise) com lista de features e botão
- FAQ: 4 perguntas em accordion funcional com JavaScript
- Rodapé: links de política, redes sociais placeholder e copyright

Otimizado para ser salvo como HTML e enviado como anexo ou hospedado no GitHub Pages.

🎤 Prompt C-04 — Relatório visual de métricas para cliente

Crie um relatório visual de métricas em React com Recharts para apresentar os resultados de [período, ex.: março de 2026] de uma campanha de [canal, ex.: tráfego pago no Google Ads] para o cliente [nome fictício, ex.: Clínica Bella Forma].

Estrutura:
- Cabeçalho: logo placeholder do cliente, período, nome da agência
- Resumo executivo: 4 KPI cards (Impressões, Cliques, Conversões, CPA)
- Gráfico de linha: evolução diária de cliques (dados fictícios de 30 dias, realistas)
- Gráfico de barras: top 5 campanhas por conversão
- Tabela de palavras-chave: top 10 termos com Cliques, CPC e Conversões
- Seção de conclusão: 3 bullets de insight e 2 recomendações para o próximo mês

Dados: fictícios mas coerentes com benchmarks de Google Ads para clínicas estéticas. Use Tailwind. Export default.

👉 Amanda aconselha:

Comandos de atalho: o que digitar quando o Artifact não saiu certo

✔️ Até aqui você já sabe: como acionar Artifacts, iterar sem reescrever prompts e corrigir os 8 problemas mais comuns com comandos de atalho precisos.

O que o Claude não consegue fazer (e o que usar no lugar)

O Claude é um gerador de código, não uma ferramenta de design com interface de arrastar e soltar. A vantagem está justamente nisso: o que ele entrega é funcional, editável e transferível — não uma imagem presa em uma ferramenta proprietária.

👀 Erros fatais (80% dos iniciantes cometem o erro #1)

• Erro 1 — “Sem formato declarado”: Pedir “crie um protótipo do meu app” sem dizer “em HTML” ou “em React”. O Claude entrega uma descrição textual da interface, não o código. Correção: Sempre inclua o formato no prompt: “Crie em HTML”, “Crie em React com Tailwind”, “Crie em SVG”.
• Erro 2 — “Contexto zero”: Descrever o projeto em 1 linha sem informar setor, público ou funcionalidades. O Claude inventa conteúdo genérico completamente desconectado do produto. Correção: Inclua ao menos: o nome do produto, o setor, quem vai usar e quais são as 3 funcionalidades principais.
• Erro 3 — “Reescrita total no segundo prompt”: Quando o primeiro Artifact não fica perfeito, apagar e começar do zero. Isso ignora 80% do trabalho já feito. Correção: Use os comandos de atalho da seção acima para ajustes cirúrgicos na mesma conversa.
• Erro 4 — “Muitas telas de uma vez”: Pedir 12 telas em um único prompt. O código fica incompleto, com telas cortadas e JavaScript quebrado. Correção: Máximo 4 a 5 telas por Artifact. Depois de aprovadas, peça as próximas em um novo prompt que referencia o estilo do anterior.
• Erro 5 — “Confundir protótipo com produto”: Entregar o Artifact do Claude como site oficial para clientes sem revisar. Há dados fictícios, sem acessibilidade real e sem backend. Correção: Use sempre como protótipo de validação — nunca como entregável final sem passar por um desenvolvedor.

Prompt fraco vs prompt forte — veja a diferença na prática

Este é o erro mais comum com qualquer IA: o prompt vago que todo mundo usa — e o prompt específico que entrega resultado real. A diferença não está na ferramenta. Está no que você digita.

Exemplo 01 — Wireframe de app

Crie um wireframe para meu app.

Crie em SVG um wireframe de baixa fidelidade para um app mobile de agendamento de consultas médicas, com 3 telas navegáveis (Login, Dashboard com lista de consultas, Detalhe). Escala de cinza, sem cores, caixas com bordas, textos placeholder realistas.

Exemplo 02 — Landing page

Crie uma landing page para meu produto.

Crie em HTML uma landing page para "Bolso", app de controle financeiro pessoal para autônomos. Seções: Hero com CTA, 3 benefícios, como funciona (3 passos), 2 depoimentos e CTA final. Cor principal: #2563eb, fonte system-ui, responsivo, arquivo HTML único.

Exemplo 03 — Pitch deck

Faça um pitch deck para minha startup.

Crie em HTML um pitch deck de 10 slides navegáveis por setas para SkillPath, plataforma de treinamento corporativo B2B. Slides: Capa, Problema, Solução, Produto, Mercado (TAM/SAM/SOM), Modelo de negócio, Tração, Concorrentes, Time, Investimento. Fundo #0f172a, destaque #f59e0b, fullscreen, CSS transition entre slides.

Exemplo 04 — Dashboard com dados

Crie um dashboard com gráficos.

Crie um dashboard React com Recharts para uma academia de ginástica. KPIs: Alunos ativos (1.247), Receita mensal (R$ 48.320), Churn (3,2%), NPS (72). Gráfico de linha: evolução de 6 meses de receita. Gráfico de barras: comparativo por plano (Mensal, Trimestral, Anual). Dados fictícios realistas. Cor #10b981, Tailwind, export default.

Exemplo 05 — Iteração após o primeiro Artifact

Mude o design.

Mantenha toda a estrutura e conteúdo. Faça apenas estas 3 mudanças: (1) mude a cor principal de #2563eb para #dc2626; (2) aumente o padding dos cards de 16px para 24px; (3) adicione um ícone SVG de sino ao lado do título do header.

Ferramentas além do Claude Artifacts: quando usar cada uma

Glossário rápido: termos técnicos deste guia

Se algum termo do guia pareceu novo, este glossário resolve em 30 segundos — sem precisar sair da página.

Conclusão: o protótipo que você precisava já estava na conversa 🙌

A maioria das ideias morrem não porque são ruins, mas porque nunca chegam a ter forma. O custo de contratar um designer para validar um conceito inicial, de aprender Figma do zero ou de esperar feedback de stakeholders sem nada concreto na mão é alto demais para a maioria dos projetos em estágio inicial. Os Artifacts do Claude não eliminam esses problemas — mas reduzem o custo de começar a quase zero.

Com os 12 prompts deste guia, você consegue gerar em menos de 10 minutos o que levaria horas em uma ferramenta tradicional: um wireframe navegável para validar com usuários, um protótipo estilizado para apresentar para clientes e um pitch deck interativo para mostrar para investidores. O código é exportável, editável e serve como ponto de partida real para um desenvolvedor — não é uma imagem presa em uma ferramenta.

O próximo passo é simples: abra o claude.ai, copie o Prompt A-01 desta lista, substitua os colchetes com os dados do seu projeto e envie. O protótipo vai aparecer no painel lateral em menos de 30 segundos. A partir daí, use os comandos de atalho para iterar — sem reescrever o prompt do zero, sem perder o trabalho anterior.

Ferramentas não criam produtos. Quem cria são as pessoas que param de esperar a condição perfeita e começam com o que têm. Você acabou de ganhar uma delas.

ps: obgda por chegar até aqui, é importante pra mim.