Dale estilo con palabras: hazlo hermoso
Dale estilo con palabras: hazlo hermoso
Aquí va el secreto que nadie te cuenta: cuando haces vibe coding, no das estilo con código — das estilo con adjetivos.
No memorizas propiedades de CSS. Describes el look que quieres, como si le dieras un brief a un diseñador: con sensaciones, adjetivos y referencias. "Oscuro, vidrioso, premium — como una app de música." La IA traduce la vibra en clases.
Mira un ejemplo real.
Tú dices:
"Haz mi tarjeta de perfil oscura y vidriosa, con esquinas suavemente redondeadas y un aire premium — como la pantalla de reproducción de Spotify."
La 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">
Cada adjetivo se convirtió en una clase:
- oscuro →
bg-gradient-to-br from-slate-950 to-indigo-950 - vidrioso →
bg-white/10 backdrop-blur-md border border-white/20 - premium, esquinas suaves →
rounded-2xl p-8
Ese es todo el truco: entran adjetivos, salen clases. Cuanto mejores sean tus referencias ("como una app de música", "como la página de inicio de un banco", "como un arcade de neón"), mejor será el resultado.
Abajo está tu tarjeta de perfil de la lección anterior — despojada de todo estilo. Fondo blanco plano, texto por defecto, cero vibra. Tu misión: devolverle la vida, un look descrito a la vez.
Instrucciones
Dale al <body> un fondo con degradado oscuro — primero describe la vibra para ti: oscuro, profundo, premium. Luego agrega las clases
Pista: Prueba: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
Dale estilo al contenedor de la tarjeta: vidrio esmerilado, esquinas suavemente redondeadas, padding generoso — ese look 'vidrioso y premium'
Convierte el enlace CTA en un botón con degradado — llamativo, colorido, imposible de ignorar
Agrega un efecto hover para que el botón reaccione cuando el mouse lo toque — los pequeños detalles hacen que las cosas se sientan vivas
Tu código
Describe lo que quieres construir para este paso y escribiré el código — luego haz clic en Aplicar para llevarlo a tu editor. Este paso: Dale al <body> un fondo con degradado oscuro — primero describe la vibra para ti: oscuro, profundo, premium. Luego agrega las clases