Créer un site web pro en 1h pour $0 — le workflow vibecoding complet
Un site portfolio peut valoir +$5 000. Celui-là a coûté $0 et pris 1 heure.
Pas de dev. Pas d'abonnement. Juste Claude, v0, Gemini, et Replit — tous en version gratuite. Voici le workflow exact, étape par étape.
Source : thread de @51bodila — 2025
Le résultat d'abord
Un site complet généré depuis un seul prompt. Design propre, déployé, URL partageable. Temps total : 1h. Budget : $0.
Voici comment reproduire ça.
1. Décide ce que tu veux builder
Portfolio, store, catalogue, CV, landing page — peu importe.
Si tu séches : fais ton CV. C'est le cas d'usage le plus rapide et le plus utile. Tu peux le montrer à un recruteur dans l'heure.
2. Trouve ton inspiration design
Avant de prompter, tu as besoin d'une référence visuelle. Ouvre Dribbble ou Designrocket.
Prends des screenshots des éléments qui te plaisent. Un header, une card, une couleur, une typo. Peu importe.
Pourquoi c'est important : coller un screenshot dans Claude ou v0 + une description donne un résultat 3x plus précis qu'un prompt texte seul. L'IA comprend immédiatement l'esthétique que tu vises.
Formation
Intégrez LLM dans votre workflow
Workshop pratique sur vos cas d'usage. Pas de slides génériques — on build ensemble.
3. Génère le site avec un prompt
Voici le prompt universel à copier-coller et adapter :
Create a [type de site : portfolio / CV / landing page / store] website for [ton nom / ton projet].
Design inspiration: [décris le style ou colle un screenshot]
Content to include:
- [Section 1 : ex. Hero avec nom + titre]
- [Section 2 : ex. Projets avec 3 cards]
- [Section 3 : ex. Contact avec email]
Style: [ex. dark mode, minimaliste, couleurs : noir + orange]
Tech: HTML, CSS, JavaScript — single file, no dependencies.
Add something unique of your own choice to make the site even better.
Colle ce prompt dans Claude, v0, ou Gemini. Les trois gèrent la génération de sites en version gratuite.
4. Itère sans perdre tes crédits
Règle d'or : groupe toutes tes modifications en un seul prompt. Pas de messages séparés pour chaque changement.
Make these changes:
1. Change the hero background to a gradient (dark blue → purple)
2. Add a subtle scroll animation on each section
3. Replace placeholder text with: [ton vrai contenu]
4. Add a "Download CV" button in the header
Un prompt = une salve de modifications. Tu économises tes crédits et tu avances plus vite.
5. Switche entre AIs pour contourner les limites
C'est le truc que 99% des gens ratent.
Quand tu atteins la limite d'usage gratuite sur Claude → copie tout ton code → colle-le dans v0 ou Gemini. L'IA reconnaît immédiatement ton site et continue là où tu t'es arrêté.
Here is my website code. Continue from here and [prochaine modification].
[colle ton code HTML complet]
Zéro perte de contexte. Zéro blocage. Tu orchestres plusieurs AIs gratuites en parallèle.
6. Déploie sur Replit en 3 minutes
Une fois le site prêt :
- Demande à l'IA de te fournir le code en fichier téléchargeable
- Va sur Replit → crée un nouveau projet HTML/CSS/JS
- Upload ou colle ton code
- Clique sur Publish (bouton en haut à droite)
Tu obtiens une URL unique, partageable immédiatement. Gratuit.
Option custom domain : ~$8/an. Pas obligatoire pour commencer.
Le piège classique
Envoyer 12 messages séparés pour 12 modifications différentes.
Résultat : tu brûles tes crédits en 20 minutes, tu perds le fil, et l'IA perd le contexte entre chaque échange.
Fix : une liste numérotée dans un seul prompt. Toujours.
Cheat sheet
| Étape | Outil | Coût |
|---|---|---|
| Inspiration design | Dribbble | $0 |
| Génération code | Claude / v0 / Gemini | $0 |
| Contourner les limites | Switch entre AIs | $0 |
| Déploiement | Replit | $0 |
| Domaine custom | n'importe quel registrar | ~$8/an |
Prompt clé : "Add something unique of your own choice to make the site even better" — les bons LLMs savent exactement quoi faire avec ça.
Règle d'or : 1 prompt = toutes tes modifications groupées.
Limite d'usage : copie le code → change d'AI → continue.
Source complète : thread @51bodila
Tu veux aller plus loin que le site basique ? Portfolio → SaaS, landing page → produit IA complet. On t'accompagne pour maîtriser le vibecoding et shipper des produits qui se vendent. Rejoins la communauté sur Telegram pour la suite.
Communauté
Rejoins les builders IA
Tips, prompts, retours d'expérience. Le Telegram des gens qui buildent avec l'IA.
