Vibe Skills

Праглядзіце сотні гатовых навыкаў для Claude, Cursor і іншых.

Publiez un jeu 3D sur Vercel d'ici dimanche soir : Le guide de déploiement en 48 heures

Vous pouvez passer d'un vendredi soir vierge à un lien votre-jeu.vercel.app avant le dîner du dimanche. La pile technologique est Three.js, Cursor, une compétence IA de Vibe Skills, et le niveau gratuit de Vercel. Coût total pour le week-end : 0 $. Infrastructure totale dont vous devez vous occuper : également zéro.

Il ne s'agit pas de "créer un prototype sur votre ordinateur portable et de considérer que c'est terminé". Il s'agit d'une URL publique que n'importe qui dans le monde peut ouvrir dans un navigateur, avec HTTPS, le caching en périphérie et un domaine personnalisé si vous le souhaitez. La compétence IA fournit le squelette Three.js et un fichier vercel.json fonctionnel. Cursor gère la boucle d'itération. Vercel gère le déploiement. Vous gérez la conception.

Ce guide s'adresse aux développeurs indépendants, aux codeurs "vibe", aux participants de hackathons et à toute personne fatiguée des onglets localhost:5173 à moitié terminés. Nous expliquons pourquoi cette pile fonctionne, l'anatomie du déploiement en 48 heures, cinq compétences de jeu 3D conçues pour le flux de travail, et le déroulement étape par étape du vendredi au dimanche.

Vibe Skills

Праглядзіце сотні гатовых навыкаў для Claude, Cursor і іншых.

Даследаваць навыкі

Пачаць бясплатна зараз

Pourquoi Vercel + Three.js + Compétences IA est la pile technologique pour le développeur solo

Vercel est la cible de déploiement la plus simple possible pour un jeu Three.js. Poussez sur GitHub, Vercel le remarque, construit le projet et vous renvoie une URL en 60 secondes. Pas de serveur à provisionner, pas de fichier Docker, pas de configuration NGINX, pas de configuration SSL. Le bundle Three.js est juste du HTML statique, du JS et des assets WebGL, ce qui est exactement ce pour quoi le réseau de périphérie de Vercel a été conçu.

Le niveau gratuit couvre confortablement un lancement de week-end :

100 Go de bande passante par mois. Une compilation Three.js de 5 Mo à 10 000 parties représente 50 Go. Vous manquerez de week-end avant de manquer de bande passante.
Déploiements statiques illimités avec HTTPS et un sous-domaine *.vercel.app.
Support de domaine personnalisé sur le niveau gratuit - apportez votre propre nom-jeu.com si vous en avez un, sinon l'URL gratuite vercel.app est partageable sur toutes les plateformes sociales.
Déploiements de prévisualisation pour chaque commit - chaque push obtient sa propre URL, vous pouvez donc partager une build avec un ami et continuer à itérer sans la casser.

Ajoutez une compétence IA de Vibe Skills et le code de base disparaît également. La configuration de la scène Three.js, le contrôleur du joueur, le pipeline de build et un vercel.json prêt pour Vercel sont générés en une seule commande. Ensuite, Cursor transforme le reste du week-end en une conversation où vous décrivez le gameplay souhaité et ajustez le résultat. C'est la pile complète : une compétence de marketplace pour la fondation, un éditeur IA pour l'itération, et Vercel pour le déploiement. Solo, gratuit et rapide.

Vibe Skills

Праглядзіце сотні гатовых навыкаў для Claude, Cursor і іншых.

Даследаваць навыкі

Пачаць бясплатна зараз

L'anatomie en 48 heures : Du concept du vendredi au déploiement du dimanche

Chaque week-end de lancement qui réussit suit les mêmes étapes. L'astuce est de planifier le déploiement le vendredi, pas le dimanche après-midi, afin que les six dernières heures soient consacrées à la finition plutôt qu'à la lutte contre une erreur de build.

Phase	Bloc temporel	Ce que vous faites	Ce qui est livré à la fin de la phase
Phase 1 : Concept	Vendredi 18h - 22h	Choisir le genre, rédiger un document de conception d'une page, installer la compétence de jeu 3D Vibe Skills, pousser le starter sur GitHub, se connecter à Vercel	URL `nom-jeu.vercel.app` en direct avec la scène de base
Phase 2 : Construction	Samedi 9h - 20h	Remplacer le placeholder par votre mécanique principale, ajouter 1 niveau, faire fonctionner l'état de victoire/défaite	Build jouable à la même URL Vercel, déployée automatiquement à chaque push
Phase 3 : Finition	Dimanche 10h - 16h	Son, "juice", popup de tutoriel, passage de bugs, vérification des performances sur mobile	Une build qui ne plante pas dans les 60 premières secondes sur aucun appareil
Phase 4 : Lancement	Dimanche 16h - 20h	Définir le domaine personnalisé (facultatif), enregistrer un GIF, écrire la page itch.io, poster le lien	URL publique + page itch.io + un post de lancement sur les réseaux sociaux

La raison pour laquelle cela fonctionne est le push du vendredi vers Vercel. Une fois l'URL créée, chaque commit du samedi et du dimanche se déploie automatiquement. Il n'y a pas de "panique de déploiement du dimanche soir" car le déploiement a déjà eu lieu vendredi et fonctionne en pilote automatique tout le week-end.

À quoi ressemble le "Vibe Coding" d'un jeu 3D sur Vercel

Le "vibe coding" consiste à décrire ce que vous voulez en langage clair et à laisser un éditeur IA écrire le code, puis à itérer sur le résultat. Pour un jeu Three.js sur Vercel, la boucle est exceptionnellement propre : chaque changement dans Cursor est à un pnpm dev de retours locaux, puis à un git push d'une URL de prévisualisation en direct, puis déployé automatiquement en production sur main.

Un week-end de jeu Vercel en "vibe coding" ressemble à ceci :

Ouvrez le dossier de démarrage de la compétence dans Cursor.
Décrivez une fonctionnalité dans le chat : "double saut si l'espace est pressé deux fois en moins de 200 ms".
Cursor modifie le fichier du contrôleur. Sauvegardez. pnpm dev recharge. Vous ressentez le saut dans le navigateur.
Si cela semble correct, git push. Vercel crée une URL de prévisualisation. Envoyez-la à un ami.
Fusionnez vers main lorsque le ressenti est verrouillé. L'URL de production se met à jour en 60 secondes.

L'IA fait la frappe. Vercel fait le déploiement. Vous faites le ressenti et la conception.

5 Compétences de jeu 3D IA qui rendent cela possible sur Vibe Skills

Ces compétences sont conçues pour le flux de travail week-end Vercel + Three.js + Cursor. Chacune est livrée avec un projet Three.js basé sur Vite, un vercel.json fonctionnel, un pnpm build qui produit un bundle statique que Vercel peut servir depuis la périphérie, et un chemin de déploiement testé. Toutes se trouvent dans la catégorie Jeux 3D sur Vibe Skills.

1. Starter de jeu Three.js + Vercel

Le choix par défaut. Génère une scène Three.js avec un contrôleur de joueur, une caméra à la troisième personne, un rig d'éclairage, un skybox et un plancher avec des collisions. Livré avec un vercel.json qui définit les bons en-têtes de caching pour les bundles d'assets Three.js. pnpm dev s'exécute localement ; un clic dans le tableau de bord Vercel connecte le dépôt GitHub et vous obtenez une URL en direct.

Idéal pour : tout genre sauf le 2D pur. Utilisez-le si vous ne savez pas encore ce que vous construisez.

2. Marcheur à la première personne pour Vercel

Un contrôleur à la première personne soigné (WASD + verrouillage du pointeur de la souris + gravité + sprint + saut) avec des hooks de pas, un léger mouvement de la tête et un vercel.json qui gère correctement les en-têtes CSP pour le verrouillage du pointeur. Celui-ci pose problème à de nombreux développeurs solo en production. La compétence le résout pour vous.

Idéal pour : simulations de marche, prototypes d'horreur, jeux narratifs, expositions de musée.

3. Kit de tir d'arène pour navigateur

Une arène vue du dessus (contrôleur à double joystick, générateur de vagues, IA ennemi basique, système de projectiles, HUD de score) avec une build optimisée pour Vercel qui compresse les assets, divise le code de l'IA et charge la musique en différé. Hooks multijoueurs inclus ; le week-end livre le mode solo.

Idéal pour : jeux de tir d'arcade, bullet hell, participations à des jams qui doivent se charger rapidement sur mobile.

4. Puzzle Platformer pour Vercel

Un jeu de plateforme à la troisième personne (saut variable, temps de coyote, détection de rebord), des points de contrôle, trois niveaux fictifs que vous pouvez éditer dans Blender ou en code, et une boucle de réapparition. Le vercel.json est configuré pour des rechargements de niveau instantanés en cache périphérique, de sorte que le jeu se sent fluide sur téléphone.

Idéal pour : jeux de plateforme puzzle, prototypes de parkour, expériences de conception de niveaux.

5. Bac à sable de conduite pour Vercel

Sensation de conduite arcade (courbe d'accélération, physique de dérive, lag de caméra, terrain basique) avec une voiture low-poly, un modèle de piste et un déploiement optimisé pour les meshes de terrain volumineux. Les en-têtes HTTP prédéfinis font que le contexte WebGL démarre plus rapidement sur Safari, historiquement le navigateur le plus lent pour Three.js.

Idéal pour : courses d'arcade, conduite tout-terrain, démos de sensations de voiture pour un portfolio.

Parcourez toutes les compétences de jeu 3D sur Vibe Skills →

Étape par étape du vendredi au dimanche

Voici le programme exact. Ajustez l'heure de début, mais gardez l'ordre. L'étape clé est le déploiement Vercel du vendredi soir. Tout le reste est de l'itération.

Vendredi 18h - 20h : Choisir la compétence, pousser sur GitHub, connecter Vercel

Étape 1 : Choisir une compétence de jeu 3D sur Vibe Skills. Parcourez la catégorie Jeux 3D, choisissez celle qui correspond à votre genre et installez le starter dans un nouveau dossier. Ouvrez-le dans Cursor. Vous devriez voir une scène Three.js avec un joueur en mouvement vers 19h.

Étape 2 : Créer un dépôt GitHub et pousser. git init, git remote add, git push. Utilisez le slug de votre jeu comme nom de dépôt (crystal-runner, lunar-fishing, peu importe). Le nom du dépôt devient souvent votre URL.

Étape 3 : Connecter le dépôt à Vercel. Connectez-vous à Vercel avec GitHub (gratuit), cliquez sur "Add New Project", choisissez le dépôt. Vercel détecte automatiquement Vite et configure la build. Cliquez sur Deploy. En 60 secondes, vous avez une URL crystal-runner.vercel.app. Ouvrez-la sur votre téléphone. Partagez-la avec un ami. La barre de déploiement est maintenant à zéro pour le reste du week-end.

Vendredi 20h - 22h : Rédiger le document de conception

Étape 4 : Répondre à cinq questions en langage clair. Ouvrez une page Notion ou un fichier markdown dans le dépôt et répondez :

Que fait le joueur toutes les 5 secondes ? (la boucle principale)
Quelle est la condition de victoire et la condition de défaite ?
Quelle est la durée d'une partie ou d'un niveau ?
Quel est l'accroche visuelle ? (palette, éclairage, référence de style)
Quelle est la caractéristique unique qui rend ce jeu mémorable en 30 secondes ?

Étape 5 : Commiter le document de conception. Poussez-le dans le dépôt. Vercel redéploiera. La discipline de pousser chaque changement significatif maintient l'URL en direct honnête.

Samedi 9h - 13h : Construire la mécanique principale

Étape 6 : Remplacer la mécanique placeholder par votre caractéristique unique. C'est la seule caractéristique qui compte. Utilisez le chat Cursor pour la décrire ("quand le joueur ramasse un cristal, geler les ennemis proches pendant 2 secondes et jouer un carillon"). Itérez localement avec pnpm dev. Quand cela semble correct, poussez.

Étape 7 : Câbler l'état de victoire/défaite. Une build de 60 secondes avec une vraie fin ressemble à un jeu. Une build de 60 minutes sans fin ressemble à une démo technique. Câblez toujours l'écran de victoire en premier, puis tout le reste.

Samedi 13h - 20h : Ajouter un niveau

Étape 8 : Construire un niveau soigné. Pas trois à moitié faits. Utilisez des cubes placeholder pour la géométrie. Utilisez le personnage stock de la compétence. Ajustez le ressenti - hauteur du saut, lag de la caméra, intensité des particules.

Étape 9 : Ajouter une superposition de tutoriel. Un popup de deux phrases "WASD pour bouger, cliquez pour tirer" au premier lancement évite que des joueurs confus abandonnent en 8 secondes. Cursor peut générer la superposition React (ou DOM vanilla) en 30 secondes.

Étape 10 : Poussez toutes les heures. Chaque push obtient une URL de prévisualisation Vercel. Envoyez chacune à un ami. La boucle de rétroaction est l'arme secrète de cette pile.

Dimanche 10h - 16h : Finition

Étape 11 : Ajouter trois sons. Boucle de pas, nappe ambiante, jingle de victoire. Même trois sons améliorent considérablement un prototype de week-end. Sources gratuites : freesound.org, opengameart.org.

Étape 12 : Ajouter du "juice". Particules à l'impact, tremblement d'écran à l'impact, popups de chiffres sur le score. Le "juice" est ce qui fait qu'une build de 48 heures ressemble à une build de 6 mois dans un GIF. Demandez à Cursor d'ajouter un "tremblement d'écran d'intensité 0.3 pendant 150 ms lorsque le joueur subit des dégâts" - il écrira le hook de tremblement de caméra en cinq secondes.

Étape 13 : Exécuter une analyse Lighthouse. Ouvrez l'URL Vercel sur un téléphone et lancez Chrome DevTools Lighthouse. Les bundles Three.js sont généralement d'environ 400 Ko à 1,5 Mo. Si vous dépassez 3 Mo, demandez à Cursor d'activer la division du code sur les modules lourds. Le gzip et le brotli de Vercel s'occuperont du reste.

Étape 14 : Passage des bugs. Jouez votre URL en direct cinq fois de suite. Corrigez tout ce qui plante deux fois. Ignorez tout ce qui plante une fois.

Dimanche 16h - 20h : Lancement

Étape 15 : (Facultatif) Définir un domaine personnalisé. Si vous avez acheté un nom-jeu.com à l'avance, ajoutez-le dans les paramètres du projet Vercel. Le SSL est automatique. Sinon, l'URL *.vercel.app est très bien - elle a HTTPS, elle est partageable et elle se charge partout.

Étape 16 : Enregistrer un GIF de 15 secondes du meilleur moment. Utilisez l'URL en direct, pas localhost. Le GIF est ce qui obtient des clics sur Twitter, Bluesky et Reddit.

Étape 17 : Créer une page itch.io (facultatif mais très efficace). Titre, slogan d'une ligne, trois captures d'écran, le GIF, les contrôles, les crédits et un embed de votre iframe *.vercel.app (itch.io prend en charge les embeds iframe pour les jeux HTML5). Vous avez maintenant deux URL - une pour le partage informel et une pour le public des joueurs.

Étape 18 : Poster le lien. Twitter, Bluesky, votre Discord de communauté de développeurs, r/IndieDev, r/threejs, r/WebGames. Commencez toujours par le GIF. Incluez toujours l'URL. Si vous avez utilisé une compétence Vibe Skills, mentionnez-la dans le post du devlog - les autres développeurs qui lisent voudront le même starter.

Comment éviter les trois échecs de déploiement Vercel les plus courants

Trois choses font planter presque tous les week-ends Three.js + Vercel en solo. Les trois sont des correctifs de 5 minutes si vous les attrapez le vendredi soir, et des labyrinthes de 5 heures si vous les découvrez le dimanche à 19h.

Répertoire de sortie de build incorrect. Vite par défaut sur dist/. Vercel détecte automatiquement Vite et utilise dist/. Si vous avez personnalisé la sortie, définissez outputDirectory dans vercel.json ou les paramètres du projet, sinon votre déploiement sera un 404.
Chemins d'assets qui fonctionnent localement mais qui renvoient 404 en production. Utilisez des chemins relatifs ou l'aide import.meta.env.BASE_URL de Vite pour tout fichier GLB, texture ou audio chargé à l'exécution. Les chemins codés en dur /assets/... fonctionnent généralement, mais les chemins absolus Windows copiés-collés ne fonctionneront absolument pas.
En-têtes CSP qui bloquent le verrouillage du pointeur ou le contexte audio. Les jeux à la première personne ont besoin du verrouillage du pointeur. L'audio a besoin d'une activation par geste utilisateur. Toute compétence de la catégorie Jeux 3D est livrée avec le bloc headers approprié dans vercel.json pour gérer cela. Si vous avez écrit votre propre code à partir de zéro, copiez la configuration du dépôt de la compétence.

Le déploiement fonctionne le vendredi, donc lorsque ces éléments échouent le dimanche, c'est toujours à cause d'un changement récent. git bisect est votre ami. Encore mieux : continuez à pousser toutes les 30 minutes pour que le commit défectueux soit petit.

Questions fréquemment posées

Le niveau gratuit de Vercel tiendra-t-il vraiment si mon jeu reçoit du trafic ?

Oui, pour un lancement de week-end et les premières semaines. Le niveau gratuit vous donne 100 Go de bande passante par mois, ce qui correspond à environ 20 000 parties d'une build Three.js de 5 Mo. Si vous atteignez ce plafond, le plan Pro coûte 20 $/mois et vous donne 1 To. Pour un lancement de week-end, le gratuit est plus que suffisant. Les compétences sur Vibe Skills sont livrées avec des configurations de build qui minimisent la taille du bundle, ce qui prolonge encore plus le niveau gratuit.

Puis-je utiliser un domaine personnalisé sur le niveau gratuit de Vercel ?

Oui. Le niveau gratuit prend en charge les domaines personnalisés avec HTTPS automatique. Achetez un domaine (Namecheap, Cloudflare Registrar, Porkbun), pointez-le vers Vercel, et Vercel gère le certificat SSL. La configuration prend environ 10 minutes. Si vous n'avez pas de domaine, l'URL nom-jeu.vercel.app est suffisamment courte pour être partagée sur n'importe quelle plateforme.

Cette pile est-elle adaptée à une soumission de jam de jeu ?

Oui, et c'est l'une des meilleures piles pour les soumissions de jam. La plupart des jams (Ludum Dare, GMTK, js13k, GitHub Game Off) acceptent n'importe quelle URL jouable sur le web. Un lien *.vercel.app fonctionne exactement comme une URL itch.io pour les juges. De nombreux gagnants de jams livrent sur les deux plateformes - itch.io pour le public des joueurs, Vercel comme URL canonique rapide.

Dois-je connaître Three.js avant de commencer ?

Vous avez besoin de suffisamment de JavaScript pour lire ce que Cursor écrit et ajuster les valeurs. Vous n'avez pas besoin d'écrire Three.js à partir de zéro. Les compétences de Vibe Skills génèrent la configuration du moteur, la caméra, le contrôleur et la configuration de la build. Cursor gère le code de gameplay à partir de vos descriptions.

Que se passe-t-il si ma build Vercel échoue le dimanche à 19h ?

La cause la plus fréquente est une erreur TypeScript ou une variable d'environnement manquante. Vercel affiche le journal de build avec la ligne défaillante mise en surbrillance. Un clic dans le tableau de bord revient à la dernière build fonctionnelle et la promeut en production. Comme chaque push est un déploiement de prévisualisation, vous n'êtes jamais plus loin qu'un commit d'une build fonctionnelle. C'est pourquoi pousser toutes les 30 minutes le samedi et le dimanche est important.

Puis-je vendre ou modifier le code d'une compétence de jeu 3D Vibe Skills ?

Oui. Les compétences sur Vibe Skills sont livrées avec une licence conviviale pour le commerce qui vous permet de publier le code dans votre propre jeu sur Vercel, itch.io, Steam ou ailleurs. Les créateurs gardent la propriété intellectuelle de la compétence, vous gardez la propriété intellectuelle du jeu construit dessus.

Et si je ne veux pas utiliser Cursor ?

Tout éditeur IA capable de modifier les fichiers du projet fonctionne. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - n'importe lequel d'entre eux peut itérer sur le squelette Three.js d'une compétence Vibe Skills. La compétence elle-même est indépendante de l'éditeur.

Publiez-le ce week-end

La raison pour laquelle la plupart des développeurs solo n'expédient jamais de jeu 3D n'est pas le moteur, le genre ou le plafond de compétences. C'est le vendredi soir où ils "font juste un peu plus de recherche" et ne commencent jamais. Le prochain week-end libre que vous aurez, suivez le plan en quatre phases : installez une compétence de jeu 3D Vibe Skills, poussez sur GitHub, connectez Vercel, déployez avant vendredi 20h, puis passez le samedi et le dimanche à itérer sur une URL en direct.

Votre portfolio de dix jeux de week-end livrés sur Vercel vaut plus que votre projet hypothétique de moteur de rêve de six mois. Celui qui est livré gagne toujours. L'URL Vercel gratuite en est la preuve.

Parcourez les compétences de jeu 3D sur Vibe Skills →

Évitez le marathon de code boilerplate Three.js. Installez une compétence de jeu 3D sur Vibe Skills, poussez sur Vercel et ayez une URL en direct d'ici dimanche soir.