Vibe Skills

Chọgharịa narị narị nka edoziri maka Claude, Cursor, na ndị ọzọ.

Siga um Jogo 3D na Vercel até Domingo à Noite: O Guia de Implantação de 48 Horas

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

Isso não é "construir um protótipo no seu laptop e chamar 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 fornece o scaffolding do Three.js e um vercel.json funcional. Cursor lida com o loop de iteração. Vercel lida com a implantação. Você cuida do design.

Este guia é para desenvolvedores independentes, codificadores de vibes, participantes de hackathons e qualquer pessoa que esteja cansada de abas localhost:5173 pela metade. Cobrimos por que essa stack funciona, a anatomia da implantação de 48 horas, cinco habilidades de jogos 3D criadas para o fluxo de trabalho e o passo a passo de sexta a domingo.

Vibe Skills

Chọgharịa narị narị nka edoziri maka Claude, Cursor, na ndị ọzọ.

Chọgharịa Nka

Malite Ugbu a N'efu

Por que Vercel + Three.js + Habilidades de IA é a Stack para Desenvolvedores Solo

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

O nível gratuito cobre um lançamento de fim de semana confortavelmente:

100 GB de largura de banda por mês. Um build do Three.js de 5 MB com 10.000 jogadas é de 50 GB. Você ficará sem fim de semana antes de ficar sem largura de banda.
Implantações estáticas ilimitadas com HTTPS e um subdomínio *.vercel.app.
Suporte a domínio personalizado no nível 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.
Prévia de implantações para cada commit - cada push recebe seu próprio URL, para que você possa 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. Configuração de cena Three.js, controlador de jogador, pipeline de build e um vercel.json pronto para Vercel são gerados em um comando. Então, 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 fundação, um editor de IA para iteração e Vercel para a implantação. Solo, gratuito e rápido.

Vibe Skills

Chọgharịa narị narị nka edoziri maka Claude, Cursor, na ndị ọzọ.

Chọgharịa Nka

Malite Ugbu a N'efu

A Anatomia de 48 Horas: Conceito de Sexta-feira para Implantação de Domingo

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

Fase	Bloco de tempo	O que você faz	O que é entregue ao final da fase
Fase 1: Conceito	Sexta-feira 18h - 22h	Escolha o gênero, escreva um documento de design de 1 página, instale a habilidade de jogo 3D Vibe Skills, envie o iniciador para o GitHub, conecte-se à Vercel	URL `nome-jogo.vercel.app` ativo com a cena boilerplate
Fase 2: Construção	Sábado 9h - 20h	Substitua o placeholder pela sua mecânica principal, adicione 1 nível, faça o estado de vitória/derrota funcionar	Build jogável no mesmo URL da Vercel, implantado automaticamente a cada push
Fase 3: Polimento	Domingo 10h - 16h	Som, suco, popup de tutorial, revisão de bugs, verificação de desempenho no celular	Um build que não quebra nos primeiros 60 segundos em nenhum dispositivo
Fase 4: Lançamento	Domingo 16h - 20h	Defina o domínio personalizado (opcional), grave GIF, escreva a página itch.io, poste o link	URL público + página itch.io + um post de lançamento nas redes sociais

A razão pela qual isso funciona é o push de sexta-feira para a Vercel. Assim que o URL existir, cada commit de sábado e domingo é implantado automaticamente. Não há "pânico de implantação de domingo à noite" porque a implantação já ocorreu na sexta-feira e tem rodado em piloto automático durante todo o fim de semana.

Como é "Vibe Coding" um Jogo 3D na Vercel

Vibe coding significa descrever o que você quer em inglês claro e deixar um editor de IA escrever o código, e então iterar na 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 ao vivo, depois implantado automaticamente em produção no main.

Um fim de semana de jogo Vercel com vibe coding se parece com isto:

Abra a pasta inicial da habilidade no Cursor.
Descreva um recurso no chat: "salto duplo se a barra de espaço for pressionada duas vezes dentro de 200ms".
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.
Mescle para main quando a sensação estiver travada. O URL de produção atualiza em 60 segundos.

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

5 Habilidades de Jogos 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 vem com um projeto Three.js baseado em Vite, um vercel.json funcional, um pnpm build que produz um bundle estático que a Vercel pode servir da ponta, e um caminho de implantação testado. Todas estão na categoria de Jogos 3D na Vibe Skills.

1. Starter de Jogo Three.js + Vercel

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. Vem com um vercel.json que define os cabeçalhos de cache corretos para bundles de ativos Three.js. pnpm dev roda localmente; um clique no painel da Vercel conecta o repositório GitHub e você tem um URL ao vivo.

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

2. Caminhador Vercel em Primeira Pessoa

Um controlador em primeira pessoa polido (WASD + bloqueio de ponteiro do mouse + gravidade + corrida + pulo) com ganchos de passos, cabeça balançando e um vercel.json que lida corretamente com os cabeçalhos CSP de bloqueio de ponteiro. Este tropeça muitos desenvolvedores solo na produção. A habilidade resolve para você.

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

3. Kit de Tiro de Arena para Navegador

Uma arena de cima para baixo (controle 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 ativos, divide o código da IA e carrega música sob demanda. Ganchos multijogador incluídos; o fim de semana envia single-player.

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

4. Plataforma de Puzzle Vercel

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

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

5. Sandbox de Condução Vercel

Sensação de conduçã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 uma implantação otimizada 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, condução off-road, demos de sensação de carro para um portfólio.

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

Passo a Passo de Sexta a Domingo

Esta é a programação exata. Ajuste a hora de início, mas mantenha a ordem. O marco principal é a implantação da Vercel na sexta-feira à noite. Tudo depois disso é iteração.

Sexta-feira 18h - 20h: Escolha a Habilidade, Envie para o GitHub, Conecte a Vercel

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

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 (crystal-runner, lunar-fishing, 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 o GitHub (gratuito), clique em "Adicionar Novo Projeto", escolha o repositório. A Vercel detecta automaticamente o Vite e configura o build. Clique em Implantar. Em 60 segundos você tem um URL crystal-runner.vercel.app. Abra-o no seu telefone. Compartilhe com um amigo. A barra de implantação agora é zero para o resto do fim de semana.

Sexta-feira 20h - 22h: Escreva o Documento de Design

Passo 4: Responda a cinco perguntas em inglês claro. 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 único recurso que torna isso memorável em 30 segundos?

Passo 5: Envie o documento de design. Envie-o para o repositório. A Vercel irá reimplantar. A disciplina de enviar cada mudança significativa mantém o URL ao vivo honesto.

Sábado 9h - 13h: Construa 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 pega 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 demo de tecnologia. Sempre conecte a tela de vitória primeiro, depois todo o resto.

Sábado 13h - 20h: Adicione Um Nível

Passo 8: Construa um nível polido. Não três meio assados. 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 vanilla) em 30 segundos.

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

Domingo 10h - 16h: Polimento

Passo 11: Adicione três sons. Loop de passos, pad ambiente, sininho 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 suco. Partículas no impacto, tremor de tela no impacto, popups de números na pontuação. Suco é 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 sofre dano" - ele escreverá o gancho de tremor da câmera em cinco segundos.

Passo 13: Execute uma passagem do Lighthouse. Abra o URL da Vercel em um telefone e execute o Lighthouse do Chrome DevTools. Bundles Three.js geralmente são 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 o brotli da Vercel cuidarão do resto.

Passo 14: Revisão de bugs. Jogue seu URL ao vivo cinco vezes seguidas. Corrija qualquer coisa que quebre duas vezes. Ignore qualquer coisa que quebre uma vez.

Domingo 16h - 20h: Lançamento

Passo 15: (Opcional) Defina um domínio personalizado. Se você comprou um nome-jogo.com com antecedência, adicione-o nas configurações do projeto da Vercel. 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 ao vivo, não o localhost. O GIF é o que é clicado no Twitter, Bluesky e Reddit.

Passo 17: Crie uma página itch.io (opcional, mas de alta alavancagem). Título, tagline de uma linha, três capturas de tela, o GIF, controles, créditos e um embed do seu iframe *.vercel.app (itch.io suporta embeds de 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 starter.

Como Evitar as Três Falhas Mais Comuns de Implantação 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 19h.

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 sua implantação será um 404.
Caminhos de ativos que funcionam localmente, mas dão 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 hardcoded /assets/... geralmente funcionam, mas caminhos absolutos do Windows copiados e colados definitivamente não funcionarão.
Cabeçalhos CSP que bloqueiam o bloqueio de ponteiro ou o contexto de áudio. Jogos em primeira pessoa precisam de bloqueio de ponteiro. O áudio precisa de ativação por gesto do usuário. Qualquer habilidade da categoria de Jogos 3D vem 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.

A implantação funciona na sexta-feira, então quando essas coisas quebram no domingo, é sempre devido a 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

A camada gratuita da Vercel realmente aguenta se meu jogo receber tráfego?

Sim, para um lançamento de fim de semana e as primeiras semanas. A camada gratuita oferece 100 GB de largura de banda por mês, o que equivale a cerca de 20.000 jogadas de um build Three.js de 5 MB. Se você atingir esse limite, o plano Pro custa US$ 20/mês e aumenta para 1 TB. Para um lançamento de fim de semana, o gratuito é mais do que suficiente. As habilidades na Vibe Skills vêm com configurações de build que minimizam o tamanho do bundle, o que estica a camada gratuita por mais tempo.

Posso usar um domínio personalizado na camada gratuita da Vercel?

Sim. A camada gratuita 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 tiver um domínio, o URL nome-jogo.vercel.app é curto o suficiente para ser compartilhado em qualquer plataforma.

Essa stack é boa 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 juízes. 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 jogabilidade a partir das suas descrições.

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

A causa mais comum é um erro de TypeScript ou uma variável de ambiente ausente. A Vercel mostra o log de build com a linha que falhou destacada. Um clique no painel reverte para o último build funcionando e o promove para produção. Como cada push é uma prévia de implantação, você nunca está a mais de um commit de um build funcionando. É 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 da Vibe Skills?

Sim. As habilidades na Vibe Skills vêm com uma licença amigável para uso 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 em cima dela.

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 no scaffolding Three.js de uma habilidade Vibe Skills. A habilidade em si é agnóstica em relação ao 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 20h, e então passe sábado e domingo iterando em um URL ao vivo.

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

Navegue por habilidades de jogos 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 ao vivo até domingo à noite.