// ressources

Bien démarrer

Tout ce qu'il faut pour faire ses premiers pas en vibe coding éclairé. Des prompts aux outils, du premier projet au premier déploiement.

🧰 Le kit de démarrage

Voici la stack minimale recommandée pour commencer le vibe coding aujourd'hui :

⌨️

1. Un IDE agentique

Cursor (gratuit, 2000 complétions/mois) ou Windsurf (gratuit, 500 requêtes/mois). Ces deux IDE comprennent votre projet entier et peuvent modifier plusieurs fichiers à la fois.

Fiche Cursor → Fiche Windsurf →

☁️

2. Un hébergeur

Vercel ou Netlify (tous deux gratuits pour les projets perso). Connectez votre repo GitHub et le déploiement se fait automatiquement à chaque push.

Fiche Vercel → Fiche Netlify →

🗄️

3. Un backend

Supabase (gratuit, PostgreSQL + auth + stockage) si votre projet a besoin d'une base de données, d'authentification ou d'une API.

Fiche Supabase →

🔀

4. Git & GitHub

Indispensable dès le premier jour. Créez un repo, committez souvent. GitHub Desktop si le terminal vous fait peur.

✍️ Templates de prompts

Des prompts éprouvés pour les situations les plus courantes. Copiez, adaptez, utilisez.

🚀 Démarrer un projet from scratch

Prompt

Je veux créer [type d'app] qui permet de [fonctionnalité principale].
L'utilisateur doit pouvoir [action 1], [action 2], et [action 3].

Contraintes :
- Stack : [ex: React + Tailwind, ou Python + Flask]
- Design : [ex: minimaliste, sombre, dashboard]
- Données : [ex: stockées dans Supabase, ou fichier JSON local]

Génère la structure complète du projet et le code de chaque fichier.

🔧 Ajouter une fonctionnalité

Prompt

Dans mon projet [nom], je veux ajouter [fonctionnalité].

Contexte : [expliquer le fichier/component concerné et son rôle actuel]
Comportement attendu : [décrire précisément ce que l'utilisateur doit voir/pouvoir faire]
Contraintes : [style existant à respecter, compatibilité, perfs]

Modifie UNIQUEMENT les fichiers nécessaires. Ne casse rien d'autre.

🐛 Debugger un problème

Prompt

J'ai ce bug : [décrire le comportement observé et le comportement attendu].

Voici l'erreur (si applicable) : [copier le message d'erreur complet]
Le problème semble venir de [fichier/composant suspect].

Peux-tu :
1. Identifier la cause probable
2. Proposer une correction
3. Expliquer pourquoi le bug s'est produit (pour que j'apprenne)

🎨 Améliorer le design

Prompt

Voici le composant actuel : [coller le code ou décrire].
Je veux lui donner un style [ex: néo-brutaliste, glassmorphism, minimal].

Inspirations :
- [lien 1 si applicable]
- [lien 2 si applicable]

Garde la structure HTML/React intacte autant que possible.
Modifie uniquement le CSS/classes de style.

📦 Déployer pour la première fois

Prompt

Mon projet est prêt à être déployé sur [Vercel / Netlify / Railway].

Stack : [ex: Astro, React + Vite, Next.js]
Base de données : [ex: Supabase, PocketBase, aucune]
Variables d'environnement nécessaires : [les lister]

Quelles sont les étapes pour déployer ? Génère-moi une checklist
et les commandes ou configurations nécessaires.