Vibe Skills

Navegue por centenas de habilidades prontas para Claude, Cursor e muito mais.

Lance um Jogo 3D na Vercel até Domingo à Noite: O Playbook de Deploy de 48 Horas

Você pode ir de uma sexta-feira à noite vazia para o link seu-jogo.vercel.app até o jantar de domingo. A stack é Three.js, Cursor, uma habilidade de IA da Vibe Skills e o plano gratuito da Vercel. Custo total para o fim de semana: $0. Infraestrutura total que você tem que cuidar: também zero.

Isso não é "construa um protótipo no seu laptop e chame de pronto". Este é um URL público que qualquer pessoa no mundo pode abrir em um navegador, com HTTPS, cache de ponta e um domínio personalizado, se você quiser um. A habilidade de IA lança o esqueleto do Three.js e um vercel.json funcional. Cursor lida com o loop de iteração. Vercel lida com o deploy. Você lida com o design.

Este guia é para desenvolvedores independentes, programadores de vibe, participantes de hackathon e qualquer pessoa que esteja cansada de abas localhost:5173 pela metade. Cobrimos por que essa stack funciona, a anatomia do deploy de 48 horas, cinco habilidades de jogo 3D criadas para o fluxo de trabalho e o passo a passo de sexta a domingo.

Vibe Skills

Navegue por centenas de habilidades prontas para Claude, Cursor e muito mais.

Explorar Habilidades

Comece Grátis Agora

Por Que Vercel + Three.js + Habilidades de IA É a Stack para Desenvolvedor Solo

Vercel é o alvo de deploy mais preguiçoso possível para um jogo Three.js. Envie para o GitHub, Vercel percebe, constrói o projeto e retorna um URL em 60 segundos. Sem servidor para provisionar, sem arquivo Docker, sem configuração NGINX, sem configuração SSL. O pacote Three.js é apenas HTML, JS e ativos WebGL estáticos, que é exatamente o que a rede de ponta da Vercel foi construída para servir.

O plano gratuito cobre um lançamento de fim de semana confortavelmente:

100 GB de largura de banda por mês. Um build Three.js de 5 MB com 10.000 plays é 50 GB. Você ficará sem fim de semana antes de ficar sem largura de banda.
Deploy estáticos ilimitados com HTTPS e um subdomínio *.vercel.app.
Suporte a domínio personalizado no plano gratuito - traga seu próprio nome-jogo.com se você tiver um, caso contrário, o URL gratuito vercel.app é compartilhável em todas as plataformas sociais.
Deploy de prévia para cada commit - cada push recebe seu próprio URL, então você pode compartilhar um build com um amigo e continuar iterando sem quebrá-lo.

Adicione uma habilidade de IA da Vibe Skills e o boilerplate desaparece também. A configuração da cena Three.js, o controlador do jogador, o pipeline de build e um vercel.json pronto para Vercel são gerados em um comando. Em seguida, o Cursor transforma o resto do fim de semana em um chat onde você descreve a jogabilidade que deseja e ajusta a saída. Essa é a stack completa: uma habilidade de marketplace para a base, um editor de IA para iteração e Vercel para o deploy. Solo, gratuito e rápido.

Vibe Skills

Navegue por centenas de habilidades prontas para Claude, Cursor e muito mais.

Explorar Habilidades

Comece Grátis Agora

A Anatomia de 48 Horas: Conceito de Sexta a Deploy de Domingo

Todo fim de semana que realmente vai ao ar segue os mesmos passos. O truque é planejar o deploy na sexta-feira, não no domingo à tarde, para que as últimas seis horas sejam dedicadas ao polimento em vez de lutar contra um erro de build.

Fase	Bloco de tempo	O que você faz	O que é enviado ao final da fase
Fase 1: Conceito	Sexta 18:00 - 22:00	Escolher gênero, escrever documento de design de 1 página, instalar habilidade de jogo 3D Vibe Skills, enviar inicializador para o GitHub, conectar à Vercel	URL `nome-jogo.vercel.app` ativo com a cena boilerplate
Fase 2: Construir	Sábado 9:00 - 20:00	Substituir o placeholder pela sua mecânica principal, adicionar 1 nível, fazer o estado de vitória/derrota funcionar	Build jogável no mesmo URL Vercel, com deploy automático a cada push
Fase 3: Polimento	Domingo 10:00 - 16:00	Som, "juice", popup de tutorial, passagem de bugs, verificação de desempenho no celular	Um build que não quebra nos primeiros 60 segundos em qualquer dispositivo
Fase 4: Lançamento	Domingo 16:00 - 20:00	Configurar domínio personalizado (opcional), gravar GIF, escrever página itch.io, postar o link	URL público + página itch.io + postagem de lançamento nas redes sociais

A razão pela qual isso funciona é o push para Vercel na sexta-feira. Assim que o URL existe, cada commit de sábado e domingo é implantado automaticamente. Não há "pânico de deploy no domingo à noite" porque o deploy já aconteceu na sexta-feira e está rodando em piloto automático durante todo o fim de semana.

Como é "Programar com Vibe" um Jogo 3D na Vercel

Programar com vibe significa descrever o que você quer em inglês simples e deixar um editor de IA escrever o código, depois iterar sobre a saída. Para um jogo Three.js na Vercel, o loop é incomumente limpo: cada mudança no Cursor está a um pnpm dev de feedback local, depois a um git push de um URL de prévia ativo, depois implantado automaticamente em produção no main.

Um fim de semana de jogo Vercel programado com vibe se parece com isso:

Abra a pasta inicial da habilidade no Cursor.
Descreva um recurso no chat: "pulo duplo se o espaço for pressionado duas vezes em 200ms".
O Cursor edita o arquivo do controlador. Salve. pnpm dev recarrega. Você sente o pulo no navegador.
Se parecer certo, git push. Vercel constrói um URL de prévia. Envie para um amigo.
Faça merge para main quando a sensação estiver travada. O URL de produção é atualizado em 60 segundos.

A IA faz a digitação. Vercel faz o deploy. Você faz a sensação e o design.

5 Habilidades de Jogo 3D de IA Que Tornam Isso Possível na Vibe Skills

Essas habilidades são criadas para o fluxo de trabalho de fim de semana Vercel + Three.js + Cursor. Cada uma delas envia um projeto Three.js baseado em Vite, um vercel.json funcional, um pnpm build que produz um pacote estático que a Vercel pode servir da ponta, e um caminho de deploy testado. Todas estão na categoria 3D Games na Vibe Skills.

1. Three.js + Vercel Game Starter

A escolha padrão. Gera uma cena Three.js com um controlador de jogador, câmera em terceira pessoa, rig de iluminação, skybox e um plano de chão com colisões. Envia com um vercel.json que define os cabeçalhos de cache corretos para pacotes de assets Three.js. pnpm dev executa localmente; um clique no painel da Vercel conecta o repositório GitHub e você tem um URL ativo.

Melhor para: qualquer gênero, exceto 2D puro. Use isso se você ainda não sabe o que está construindo.

2. First-Person Vercel Walker

Um controlador em primeira pessoa polido (WASD + travamento do ponteiro do mouse + gravidade + sprint + pulo) com hooks de passos, movimento da cabeça e um vercel.json que lida corretamente com os cabeçalhos CSP de travamento do ponteiro. Este item confunde muitos desenvolvedores solo em produção. A habilidade resolve isso para você.

Melhor para: simuladores de caminhada, protótipos de terror, jogos narrativos, exposições de museus.

3. Browser Arena Shooter Kit

Uma arena de cima para baixo (controlador twin-stick, gerador de ondas, IA básica de inimigo, sistema de projéteis, HUD de pontuação) com um build ajustado para Vercel que comprime assets, divide o código da IA e carrega música de forma preguiçosa. Hooks multijogador incluídos; o fim de semana envia single-player.

Melhor para: shooters arcade, bullet hell, entradas de jam que precisam carregar rapidamente no celular.

4. Vercel Puzzle Platformer

Um plataforma em terceira pessoa (pulo variável, tempo de coyote, detecção de beirada), checkpoints, três níveis stub que você pode editar no Blender ou em código e um loop de respawn. O vercel.json é configurado para recargas instantâneas de nível em cache na ponta, para que o playtesting pareça ágil em um telefone.

Melhor para: puzzle platformers, protótipos de parkour, experimentos de design de nível.

5. Vercel Driving Sandbox

Sensação de direção arcade (curva de aceleração, física de drift, lag da câmera, terreno básico) com um carro low-poly, um template de pista e um deploy ajustado para malhas de terreno grandes. Cabeçalhos HTTP pré-definidos fazem o contexto WebGL iniciar mais rápido no Safari, historicamente o navegador mais lento para Three.js.

Melhor para: corridas arcade, direção off-road, demos de sensação de carro para um portfólio.

Navegue por todas as habilidades de jogo 3D na Vibe Skills →

Sexta-feira a Domingo Passo a Passo

Este é o cronograma exato. Ajuste o horário de início, mas mantenha a ordem. O marco chave é o deploy da Vercel na sexta-feira à noite. Tudo depois disso é iteração.

Sexta 18:00 - 20:00: Escolher Habilidade, Enviar para o GitHub, Conectar Vercel

Passo 1: Escolha uma habilidade de jogo 3D na Vibe Skills. Navegue pela categoria 3D Games, escolha a que corresponde ao seu gênero e instale o iniciador em uma nova pasta. Abra-o no Cursor. Você deve ver uma cena Three.js com um jogador em movimento às 19:00.

Passo 2: Crie um repositório GitHub e envie. git init, git remote add, git push. Use o slug do seu jogo como nome do repositório (corredor-de-cristais, pesca-lunar, o que for). O nome do repositório geralmente se torna seu URL.

Passo 3: Conecte o repositório à Vercel. Faça login na Vercel com GitHub (gratuito), clique em "Add New Project", escolha o repositório. A Vercel detecta automaticamente o Vite e configura o build. Clique em Deploy. Em 60 segundos, você terá um URL corredor-de-cristais.vercel.app. Abra no seu celular. Compartilhe com um amigo. A barra de deploy agora é zero para o resto do fim de semana.

Sexta 20:00 - 22:00: Escrever o Documento de Design

Passo 4: Responda a cinco perguntas em inglês simples. Abra uma página Notion ou um arquivo markdown dentro do repositório e responda:

O que o jogador está fazendo a cada 5 segundos? (o loop principal)
Qual é a condição de vitória e a condição de derrota?
Quanto tempo dura uma partida ou um nível?
Qual é o gancho visual? (paleta, iluminação, referência de estilo)
Qual é o recurso que torna isso memorável em 30 segundos?

Passo 5: Faça commit do documento de design. Envie-o para o repositório. A Vercel fará redeploy. A disciplina de enviar cada mudança significativa mantém o URL ativo honesto.

Sábado 9:00 - 13:00: Construir a Mecânica Principal

Passo 6: Substitua a mecânica placeholder pelo seu único recurso. Este é o único recurso que importa. Use o chat do Cursor para descrevê-lo ("quando o jogador pegar um cristal, congele inimigos próximos por 2 segundos e toque um sino"). Itere localmente com pnpm dev. Quando parecer certo, envie.

Passo 7: Conecte o estado de vitória/derrota. Um build de 60 segundos com um final real parece um jogo. Um build de 60 minutos sem final parece uma demonstração de tecnologia. Sempre conecte a tela de vitória primeiro, depois todo o resto.

Sábado 13:00 - 20:00: Adicionar Um Nível

Passo 8: Construa um nível polido. Não três semiprontos. Use cubos placeholder para geometria. Use o personagem padrão da habilidade. Ajuste a sensação - altura do pulo, lag da câmera, intensidade das partículas.

Passo 9: Adicione uma sobreposição de tutorial. Um popup de duas frases "WASD para mover, clique para atirar" no primeiro lançamento salva seu lançamento de jogadores confusos que desistem em 8 segundos. O Cursor pode gerar a sobreposição React (ou DOM puro) em 30 segundos.

Passo 10: Envie a cada hora. Cada push recebe um URL de prévia Vercel. Envie cada um para um amigo. O loop de feedback é a arma secreta dessa stack.

Domingo 10:00 - 16:00: Polimento

Passo 11: Adicione três sons. Loop de passos, pad ambiente, toque de vitória. Mesmo três sons elevam um protótipo de fim de semana dramaticamente. Fontes gratuitas: freesound.org, opengameart.org.

Passo 12: Adicione "juice". Partículas ao acertar, tremor de tela ao impactar, popups de números ao pontuar. Juice é o que faz um build de 48 horas parecer um de 6 meses em um GIF. Peça ao Cursor para adicionar um "tremor de tela de intensidade 0.3 por 150ms quando o jogador leva dano" - ele escreverá o hook de tremor de câmera em cinco segundos.

Passo 13: Execute uma passagem do Lighthouse. Abra o URL Vercel em um celular e execute o Lighthouse do Chrome DevTools. Pacotes Three.js geralmente variam de 400 KB a 1,5 MB. Se você estiver acima de 3 MB, peça ao Cursor para habilitar a divisão de código nos módulos pesados. O gzip e brotli da Vercel cuidarão do resto.

Passo 14: Passagem de bugs. Jogue seu URL ativo cinco vezes seguidas. Corrija qualquer coisa que quebre duas vezes. Ignore qualquer coisa que quebre uma vez.

Domingo 16:00 - 20:00: Lançamento

Passo 15: (Opcional) Configure um domínio personalizado. Se você comprou um nome-jogo.com com antecedência, adicione-o nas configurações do projeto da Vercel. O SSL é automático. Caso contrário, o URL *.vercel.app é bom - ele tem HTTPS, é compartilhável e carrega em todos os lugares.

Passo 16: Grave um GIF de 15 segundos do melhor momento. Use o URL ativo, não o localhost. O GIF é o que recebe cliques no Twitter, Bluesky e Reddit.

Passo 17: Crie uma página itch.io (opcional, mas de alto alavancagem). Título, uma linha de tag, três capturas de tela, o GIF, controles, créditos e um embed do seu iframe *.vercel.app (itch.io suporta embeds iframe para jogos HTML5). Agora você tem dois URLs - um para compartilhamento casual e outro para o público gamer.

Passo 18: Poste o link. Twitter, Bluesky, seu Discord da comunidade de desenvolvedores, r/IndieDev, r/threejs, r/WebGames. Sempre comece com o GIF. Sempre inclua o URL. Se você usou uma habilidade Vibe Skills, mencione-a na postagem do devlog - outros desenvolvedores que estiverem lendo vão querer o mesmo iniciador.

Como Evitar as Três Falhas Mais Comuns de Deploy na Vercel

Três coisas quebram quase todo fim de semana solo de Three.js + Vercel. Todas as três são correções de 5 minutos se você as pegar na sexta-feira à noite, e buracos de coelho de 5 horas se você as descobrir no domingo às 19:00.

Diretório de saída de build incorreto. O padrão do Vite é dist/. A Vercel detecta automaticamente o Vite e usa dist/. Se você personalizou a saída, defina outputDirectory em vercel.json ou nas configurações do projeto, ou seu deploy será um 404.
Caminhos de assets que funcionam localmente, mas 404 em produção. Use caminhos relativos ou o helper import.meta.env.BASE_URL do Vite para qualquer arquivo GLB, textura ou áudio carregado em tempo de execução. Caminhos /assets/... codificados em hard geralmente funcionam, mas caminhos absolutos do Windows copiados e colados definitivamente não funcionarão.
Cabeçalhos CSP que bloqueiam o travamento do ponteiro ou o contexto de áudio. Jogos em primeira pessoa precisam de travamento do ponteiro. O áudio precisa de ativação por gesto do usuário. Qualquer habilidade da categoria 3D Games envia com o bloco headers correto em vercel.json para lidar com isso. Se você escreveu o seu do zero, copie a configuração do repositório da habilidade.

O deploy funciona na sexta-feira, então quando essas coisas quebram no domingo, é sempre por causa de uma mudança recente. git bisect é seu amigo. Ainda melhor: continue enviando a cada 30 minutos para que o commit quebrado seja pequeno.

Perguntas Frequentes

O plano gratuito da Vercel realmente aguentará se meu jogo tiver tráfego?

Sim, para um lançamento de fim de semana e as primeiras semanas. O plano gratuito oferece 100 GB de largura de banda por mês, o que equivale a aproximadamente 20.000 plays de um build Three.js de 5 MB. Se você atingir esse teto, o plano Pro custa $20/mês e aumenta para 1 TB. Para um lançamento de fim de semana, o gratuito é mais do que suficiente. Habilidades na Vibe Skills enviam com configurações de build que minimizam o tamanho do pacote, o que estica o plano gratuito por mais tempo.

Posso usar um domínio personalizado no plano gratuito da Vercel?

Sim. O plano gratuito suporta domínios personalizados com HTTPS automático. Compre um domínio (Namecheap, Cloudflare Registrar, Porkbun), aponte-o para a Vercel, e a Vercel cuida do certificado SSL. A configuração leva cerca de 10 minutos. Se você não tem um domínio, o URL nome-jogo.vercel.app é curto o suficiente para compartilhar em qualquer plataforma.

Essa stack é adequada para uma submissão de game jam?

Sim, e é uma das melhores stacks para submissões de jam. A maioria das jams (Ludum Dare, GMTK, js13k, GitHub Game Off) aceita qualquer URL jogável na web. Um link *.vercel.app funciona exatamente como um URL do itch.io para os jurados. Muitos vencedores de jams enviam para ambos - itch.io para o público gamer, Vercel como o URL canônico rápido.

Preciso saber Three.js antes de começar?

Você precisa de JavaScript suficiente para ler o que o Cursor escreve e ajustar valores. Você não precisa escrever Three.js do zero. As habilidades na Vibe Skills geram a configuração do motor, câmera, controlador e configuração de build. O Cursor cuida do código de gameplay a partir das suas descrições.

O que acontece se meu build Vercel falhar no domingo às 19h?

A causa mais comum é um erro TypeScript ou uma variável de ambiente ausente. A Vercel mostra o log do build com a linha que falhou destacada. Um clique no painel reverte para o último deploy funcional e o promove para produção. Como cada push é um deploy de prévia, você nunca está a mais de um commit de um build funcional. É por isso que enviar a cada 30 minutos no sábado e domingo é importante.

Posso vender ou modificar o código de uma habilidade de jogo 3D Vibe Skills?

Sim. Habilidades na Vibe Skills enviam com uma licença amigável para comercial que permite que você lance o código em seu próprio jogo na Vercel, itch.io, Steam ou em qualquer outro lugar. Os criadores mantêm a propriedade intelectual da habilidade, você mantém a propriedade intelectual do jogo construído sobre ela.

E se eu não quiser usar o Cursor?

Qualquer editor de IA que possa editar arquivos de projeto funciona. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - qualquer um deles pode iterar sobre o esqueleto Three.js de uma habilidade Vibe Skills. A habilidade em si é independente de editor.

Lance-o Neste Fim de Semana

A razão pela qual a maioria dos desenvolvedores solo nunca lança um jogo 3D não é o motor, o gênero ou o teto de habilidade. É a sexta-feira à noite em que eles "apenas pesquisam um pouco mais" e nunca começam. No próximo fim de semana livre que você tiver, siga o plano de quatro fases: instale uma habilidade de jogo 3D Vibe Skills, envie para o GitHub, conecte a Vercel, implante até sexta-feira às 20:00, e depois passe sábado e domingo iterando em um URL ativo.

Seu portfólio de dez jogos lançados no fim de semana na Vercel vale mais do que seu projeto hipotético de motor dos sonhos de seis meses. O que foi lançado sempre vence. O URL gratuito da Vercel é a prova.

Navegue por habilidades de jogo 3D na Vibe Skills →

Pule a maratona de boilerplate Three.js. Instale uma habilidade de jogo 3D na Vibe Skills, envie para a Vercel e tenha um URL ativo até domingo à noite.