Stylen mit Worten: Mach es schön
Stylen mit Worten: Mach es schön
Hier ist das Geheimnis, das dir niemand verrät: Beim Vibe Coding stylst du nicht mit Code — du stylst mit Adjektiven.
Du lernst keine CSS-Eigenschaften auswendig. Du beschreibst den Look, den du willst, so wie du einen Designer briefen würdest: mit Gefühlen, Adjektiven und Referenzen. „Dunkel, glasig, edel — wie eine Musik-App.“ Die KI übersetzt den Vibe in Klassen.
Schau dir ein echtes Beispiel an.
Du sagst:
„Mach meine Profilkarte dunkel und glasig, mit weich abgerundeten Ecken und einem Premium-Gefühl — wie der Now-Playing-Screen von Spotify.“
Die KI liefert:
<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">
Jedes Adjektiv wurde zu einer Klasse:
- dunkel →
bg-gradient-to-br from-slate-950 to-indigo-950 - glasig →
bg-white/10 backdrop-blur-md border border-white/20 - edel, weiche Ecken →
rounded-2xl p-8
Das ist der ganze Trick: Adjektive rein, Klassen raus. Je besser deine Referenzen („wie eine Musik-App“, „wie die Landingpage einer Bank“, „wie eine Neon-Spielhalle“), desto besser das Ergebnis.
Unten siehst du deine Profilkarte aus der letzten Lektion — komplett ohne Styling. Weißer Hintergrund, Standardtext, null Vibe. Deine Mission: Hauch ihr wieder Leben ein, ein beschriebener Look nach dem anderen.
Anweisungen
Gib dem <body> einen dunklen Farbverlauf als Hintergrund — beschreib dir den Vibe erst selbst: dunkel, tief, edel. Dann füge die Klassen hinzu
Tipp: Probier: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
Style den Karten-Container: Milchglas, weich abgerundete Ecken, großzügiges Padding — dieser „glasige, edle“ Look
Verwandle den CTA-Link in einen Verlaufs-Button — fett, farbig, unmöglich zu übersehen
Füge einen Hover-Effekt hinzu, damit der Button reagiert, wenn die Maus ihn berührt — kleine Details lassen Dinge lebendig wirken
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Gib dem <body> einen dunklen Farbverlauf als Hintergrund — beschreib dir den Vibe erst selbst: dunkel, tief, edel. Dann füge die Klassen hinzu