Todos os tutoriais

Vibe coding de um jogo com o Claude Code (e deixe a IA fazer toda a pixel art)

Publicado em 4 de outubro de 2026

Fazer vibe coding de um jogo é rápido até você precisar de arte. O seu assistente escreve um jogo de plataforma funcionando em uma tarde, e aí tudo na tela é um retângulo colorido, porque ele sabe escrever código, mas não sabe desenhar.

Este tutorial conecta o Claude Code ou o Codex à PixelVibing para que o seu assistente crie a arte enquanto escreve o código: ele percebe que falta um sprite, gera esse sprite no estilo do seu jogo e o coloca no seu projeto, sem parar para perguntar nada a você.

Um level design de 6×4 tiles, gerado a partir de "a harbour square at dusk" (uma praça portuária ao entardecer), o tipo de asset que o seu assistente consegue criar sozinho.

Passo 1: Instale a CLI e rode o setup

Na pasta do seu jogo:

npm install -g @pixelvibing/cli
cd my-game
pixel-vibing-cli setup

Usa o Codex? Rode pixel-vibing-cli setup --harness codex no lugar.

O setup faz quatro coisas:

1. Faz o seu login no navegador, sem senha e sem chave para colar.
2. Vincula a pasta a um projeto da PixelVibing e ao guia de estilo dele.
3. Instala as Skills da PixelVibing para o Claude Code ou o Codex, que ensinam o seu assistente quando e como criar arte.
4. Conecta o servidor MCP da PixelVibing, com o seu token mantido fora de todos os arquivos.

Passo 2: É só pedir

Abra o seu assistente na pasta e peça um jogo, não assets:

Faça um jogo de pesca aconchegante num porto, com toda a arte dele.

Veja como é uma sessão real. O seu assistente decide cada passo e o executa:

Cada asset é baixado para a pasta pixelvibing/ do projeto, pronto para o código que vai usá-lo.

Passo 3: Mantenha o guia de estilo fiel

O guia de estilo é o que faz o décimo sprite continuar combinando com o primeiro. Ele define a câmera, a paleta, o contorno, o sombreamento e a escala, e o seu assistente o lê antes de cada asset. Conforme o jogo cresce (uma região com neve, uma fase noturna, uma paleta nova), o seu assistente também atualiza o guia, para que a arte nova siga as novas regras.

pixel-vibing-cli guide show

Prefere configurar você mesmo? Adicione o servidor MCP

Sem setup para rodar, em três passos:

1. Entre no app web e crie um token de conta em Account → Account tokens.
2. Cole isto no seu terminal, com o seu token no lugar de YOUR_TOKEN:

claude mcp add --transport http pixelvibing https://mcp.pixelvibing.com --header "Authorization: Bearer YOUR_TOKEN"

3. Abra o Claude Code na pasta do seu jogo e peça o seu primeiro asset.

Desse jeito, o token fica no histórico do seu terminal e nas configurações do Claude Code; o pixel-vibing-cli setup o mantém fora dos dois. Você pode revogar um token a qualquer momento.

Quanto custa?

Toda geração gasta créditos, e o comando mostra o custo e o seu saldo antes de começar. Sem --yes, ele pergunta primeiro, e sem ninguém no terminal ele não começa nada, então um assistente não tem como gerar uma conta pelas suas costas. Um bom hábito: peça ao seu assistente para dizer quanto um lote vai custar antes de começar.

Dicas para vibe coding com arte feita por IA

1. Descreva o jogo, não a lista de assets. O seu assistente descobre o que está faltando.
2. Deixe ele exportar. pixel-vibing-cli export <pixi|phaser|godot> gera sheets que a sua engine carrega direto.
3. Ajuste à mão quando quiser. Todo asset abre no Editor; veja Como editar pixel art de IA no Editor da PixelVibing.

Perguntas frequentes

Quais assistentes funcionam? O Claude Code e o Codex, com Skills instaladas pelo setup; outros assistentes podem usar o servidor MCP.

Preciso de chaves de API? Não. Você entra na sua conta; não há chave para encontrar, colar ou pagar.

Ainda posso gerar à mão? Sim, no app web e no Editor, no mesmo projeto.

Próximo: o seu jogo precisa de um HUD. Leia Como criar UI de jogo em pixel art: um HUD e ícones com IA.