Dai stile con le parole: rendila bellissima
Dai stile con le parole: rendila bellissima
Ecco il segreto che nessuno ti racconta: quando fai vibe coding, non dai stile con il codice — dai stile con gli aggettivi.
Non memorizzi proprietà CSS. Descrivi il look che vuoi, come faresti un brief a un designer: con sensazioni, aggettivi e riferimenti. "Scura, effetto vetro, premium — come un'app musicale." L'IA traduce la vibe in classi.
Guarda un esempio reale.
Tu dici:
"Rendi la mia scheda profilo scura ed effetto vetro, con angoli morbidi e arrotondati e un feel premium — come la schermata now-playing di Spotify."
L'IA produce:
<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">
Ogni aggettivo è diventato una classe:
- scura →
bg-gradient-to-br from-slate-950 to-indigo-950 - effetto vetro →
bg-white/10 backdrop-blur-md border border-white/20 - premium, angoli morbidi →
rounded-2xl p-8
Tutto il trucco è qui: aggettivi in entrata, classi in uscita. Migliori sono i tuoi riferimenti ("come un'app musicale", "come la landing page di una banca", "come una sala giochi al neon"), migliore sarà il risultato.
Qui sotto c'è la tua scheda profilo della lezione scorsa — spogliata di ogni stile. Sfondo bianco semplice, testo di default, zero vibe. La tua missione: riportarla in vita, un look descritto alla volta.
Istruzioni
Dai al <body> uno sfondo con gradiente scuro — prima descrivi la vibe a te stesso: scuro, profondo, premium. Poi aggiungi le classi
Suggerimento: Prova: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
Dai stile al contenitore della scheda: vetro smerigliato, angoli morbidi e arrotondati, padding generoso — quel look 'effetto vetro, premium'
Trasforma il link CTA in un pulsante con gradiente — audace, colorato, impossibile da ignorare
Aggiungi un effetto hover così il pulsante reagisce quando il mouse lo tocca — sono i piccoli dettagli a far sembrare vive le cose
Il tuo codice
Descrivi ciò che vuoi creare per questo passaggio e scriverò il codice — poi clicca su Applica per inserirlo nel tuo editor. Questo passaggio: Dai al <body> uno sfondo con gradiente scuro — prima descrivi la vibe a te stesso: scuro, profondo, premium. Poi aggiungi le classi