Estilize com Palavras: Deixe Tudo Bonito
Estilize com Palavras: Deixe Tudo Bonito
Aqui vai o segredo que ninguém te conta: quando você faz vibe coding, você não estiliza com código — você estiliza com adjetivos.
Você não decora propriedades de CSS. Você descreve o visual que quer, do jeito que faria um briefing para um designer: com sensações, adjetivos e referências. "Escuro, com efeito de vidro, premium — como um app de música." A IA traduz a vibe em classes.
Veja um exemplo real.
Você diz:
"Deixe meu cartão de perfil escuro e com efeito de vidro, com cantos suavemente arredondados e um toque premium — como a tela de reprodução do Spotify."
A IA produz:
<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 virou uma classe:
- escuro →
bg-gradient-to-br from-slate-950 to-indigo-950 - efeito de vidro →
bg-white/10 backdrop-blur-md border border-white/20 - premium, cantos suaves →
rounded-2xl p-8
Esse é o truque inteiro: adjetivos entram, classes saem. Quanto melhores as suas referências ("como um app de música", "como a página inicial de um banco", "como um fliperama neon"), melhor o resultado.
Abaixo está o seu cartão de perfil da lição anterior — sem nenhum estilo. Fundo branco simples, texto padrão, zero vibe. Sua missão: trazê-lo de volta à vida, um visual descrito de cada vez.
Instruções
Dê ao <body> um fundo escuro em degradê — primeiro descreva a vibe para si mesmo: escuro, profundo, premium. Depois adicione as classes
Dica: Tente: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
Estilize o contêiner do cartão: vidro fosco, cantos suavemente arredondados, espaçamento interno generoso — aquele visual 'de vidro, premium'
Transforme o link de CTA em um botão em degradê — chamativo, colorido, impossível de ignorar
Adicione um efeito de hover para o botão reagir quando o mouse encostar nele — pequenos detalhes fazem tudo parecer vivo
Seu Código
Descreva o que você quer construir para esta etapa e eu escrevo o código — depois clique em Aplicar para inseri-lo no seu editor. Esta etapa: Dê ao <body> um fundo escuro em degradê — primeiro descreva a vibe para si mesmo: escuro, profundo, premium. Depois adicione as classes