Du style avec des mots : rendez-la magnifique
Du style avec des mots : rendez-la magnifique
Voici le secret que personne ne vous dit : quand vous faites du vibe coding, vous ne stylez pas avec du code — vous stylez avec des adjectifs.
Vous ne mémorisez pas les propriétés CSS. Vous décrivez le rendu que vous voulez, comme vous brieferiez un designer : avec des sensations, des adjectifs et des références. « Sombre, effet verre, premium — comme une app de musique. » L'IA traduit l'ambiance en classes.
Regardez un exemple réel.
Vous dites :
« Rends ma carte de profil sombre et translucide, avec des coins doucement arrondis et une touche premium — comme l'écran de lecture de Spotify. »
L'IA produit :
<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white">
<div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8">
Chaque adjectif est devenu une classe :
- sombre →
bg-gradient-to-br from-slate-950 to-indigo-950 - effet verre →
bg-white/10 backdrop-blur-md border border-white/20 - premium, coins doux →
rounded-2xl p-8
C'est tout le truc : des adjectifs en entrée, des classes en sortie. Plus vos références sont bonnes (« comme une app de musique », « comme la page d'accueil d'une banque », « comme une salle d'arcade néon »), meilleur est le résultat.
Ci-dessous, votre carte de profil de la leçon précédente — dépouillée de tout style. Fond blanc uni, texte par défaut, zéro vibe. Votre mission : la ramener à la vie, un look décrit à la fois.
Instructions
Donnez au <body> un fond en dégradé sombre — décrivez d'abord l'ambiance pour vous-même : sombre, profond, premium. Puis ajoutez les classes
Indice : Essayez : `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
Stylez le conteneur de la carte : verre dépoli, coins doucement arrondis, padding généreux — ce look « translucide et premium »
Transformez le lien CTA en bouton dégradé — audacieux, coloré, impossible à rater
Ajoutez un effet hover pour que le bouton réagisse quand la souris le touche — les petits détails rendent les choses vivantes
Votre code
Décrivez ce que vous voulez créer pour cette étape et je rédige le code — puis cliquez sur Appliquer pour l'insérer dans votre éditeur. Cette étape : Donnez au <body> un fond en dégradé sombre — décrivez d'abord l'ambiance pour vous-même : sombre, profond, premium. Puis ajoutez les classes