In den letzten Unterrichtsblöcken habt ihr intensiv mit KI gearbeitet – ihr habt Avatare entworfen, Präsentationen gestaltet, Logos entwickelt und Präsentationen erstellt. Was ihr dabei ganz intuitiv gemacht habt, nennt man in der Branche Vibe Coding.
Ihr habt die KI nicht einfach nur angewiesen, etwas zu machen, sondern ihr habt ihr gesagt, wie es sich anfühlen soll:
Bei Avataren: Habt ihr die Emotion und den Stil im Prompt festgelegt („fröhlich und verspielt“ oder „futuristisch und seriös“).
Bei Präsentationen: Habt ihr Farben, Layout und Schrift gewählt, um einen professionellen Vibe zu erzeugen.
All das war bereits Vibe Coding – die bewusste Steuerung der KI, um eine emotionale und ästhetische Konsistenz über verschiedene Medien hinweg zu gewährleisten. Ihr habt gelernt, dass der Prompt der Schlüssel zur Schaffung einer ganzheitlichen Produktidentität ist.
Vom Avatar zur App: KI-gestützte App- & Website-Erstellung
Nun gehen wir für das Projekt einen Schritt weiter und wenden dieses strategische Wissen auf den Kern der digitalen Produktentwicklung an: Apps und Websites.
Gerade in der App- und Webentwicklung, wo der Konkurrenzdruck hoch ist, ist der „Vibe“ entscheidend. Nutzer entscheiden in Sekundenbruchteilen, ob eine Anwendung intuitiv, vertrauenswürdig oder einfach nur cool ist. Dort, wo Design, Code, Text und Funktion nahtlos ineinandergreifen müssen, ist der Begriff Vibe Coding am bekanntesten. Er beschreibt den Prozess, bei dem ihr eure gesamte Erfahrung im Prompt-Design und in der Asset-Generierung nutzt, um einen KI-Builder zu steuern.
Daher gibt es heute eine Vielzahl an leistungsstarken KI-Tools, die dich bei der Website- und App-Erstellung unterstützen. Der Markt ist riesig und umfasst prominente Builder wie Uizard, Framer und Canva mit KI, aber auch neuere Spezialisten. Tools wie Lovable AI werden oft direkt mit Buildern wie Bolt.new verglichen, da beide den Fokus auf schnelle, ästhetische Prototypen legen.
Die Vorteile von Bolt.new für unser Projekt liegen in seiner Geschwindigkeit und Einfachheit: Das Tool ist darauf ausgelegt, mit minimalem Input – also präzisen Vibe-Coding-Prompts – in kürzester Zeit einen sauberen, anpassbaren UI/UX-Entwurf zu liefern. Dies ermöglicht es uns, die gelernten Konzepte besonders klar zu demonstrieren und schnell von der Idee zum visuellen Prototyp zu gelangen.
Aufgabe: Video-Analyse
Schaut euch das Video: „Website in 5 Minuten erstellen mit KI“ an und beantwortet die Fragen:
Teil A: Analyse der KI-Builder-Strategie
Vibe-Quelle: Im Video kopiert der Ersteller das Design und den Inhalt der Website „retaili“. Warum ist das Kopieren einer bestehenden Website ein sehr effektiver Weg, um den „Vibe“ oder den Stil einer neuen Seite zu generieren?
Prompt-Steuerung: Analysiere den Prompt, den der Ersteller für seine Website „zentrovo“ verwendet ([01:40]). Welche Elemente dieses Prompts legen den Vibe fest (z. B. „modern“, „KI Website“) und welche die reine Funktionalität?
Iteratives Vibe Coding: Der Ersteller passt das Design nachträglich für die mobile Ansicht an ([04:26]). Welche natürliche Sprachbeschreibung nutzt er, um die Designfehler (Vibe-Brüche) zu korrigieren?
Teil B: Praktische Anwendung – Dein Vibe-Prompt
Aufgabe: Nutze deine eigene Produktidee (App oder Website) aus dem letzten Unterrichtsblock. Du nutzt Bolt.new, um das Herzstück deines Projekts zu erstellen.
Vibe-Strategie:
Basierend auf dem von dir definierten Markenporträt und Logo (deiner eigenen Idee): Welche drei Adjektive beschreiben den gewünschten Vibe für deine Website oder App? (Denke an: Funktionalität, Stil, Emotion.)
Master-Prompt entwickeln:
Formuliere einen detaillierten Prompt (ca. 2-3 Sätze), mit dem du Bolt.new anweisen würdest, deine Startseite oder den Hauptscreen deiner App zu erstellen. Der Prompt muss folgende Elemente enthalten:
Funktion: Was soll die Seite/der Screen tun (z. B. „Registrierungsseite für [Produktname]“).
Stil (Vibe): Die drei Adjektive aus deiner Vibe-Strategie.
Farben: Die Hauptfarben deines Logos.
Spezial-Feature: Ein Call-to-Action (z. B. „Jetzt gratis testen“) oder ein visuelles Element, das in der ersten Sektion (Hero) eingebaut werden soll.
Teil C: Reflexion
Warum ist die Kombination von Bolt.new (Geschwindigkeit) und einem klaren Vibe-Prompt (Strategie) ideal für die Entwicklung von Prototypen?
Das Video zeigt, dass der Code generiert und die Website auf Netlify gehostet wird. Welche Bedeutung hat die Automatisierung dieser Schritte für deine Rolle als angehender Informatikassistent?
Prompt-Design für App- & Website-Erstellung
Nachdem du gesehen hast, dass ein einfacher Prompt oft nicht ausreicht, um den gewünschten „Vibe“ zu treffen, lernst du nun, deine Anweisungen für den KI-Builder zu optimieren.
Ein effektiver Prompt besteht aus drei Hauptteilen: Funktion, Vibe und Struktur.
1. Funktion & Zweck: Was soll das Produkt leisten?
Die KI braucht klare, sachliche Anweisungen darüber, was das Produkt tun muss.
Element
Fokus
Beispiel-Prompt-Erweiterung
Produktname & Rolle
Definiere das Produkt und seine Aufgabe.
„Erstelle die Startseite für die App FoxMind, die KI-gestützte Lernhilfe.“
Kern-Feature (Call to Action)
Gib an, welches Element im Mittelpunkt stehen muss.
„Der Hero-Bereich muss einen prominenten Button mit dem Text ‚Jetzt kostenlos starten‘ enthalten.“
Zielgruppe
Für wen ist die Seite gedacht?
„Das Design richtet sich an Berufsschüler im Alter von 16 bis 20 Jahren.“
Inhalte
Gib die Hauptsektionen vor.
„Füge Sektionen für ‚Preise‘, ‚Testimonials‘ und ‚Über uns‘ hinzu.“
2. Vibe & Ästhetik: Das Geheimnis der Konsistenz
Der Vibe Code ist die bewusste Steuerung der emotionalen Wahrnehmung. Hier nutzt du deine Kenntnisse der Visuellen KI und des Audio-Brandings.
Element
Fokus
Beispiel-Prompt-Erweiterung
Stimmung & Gefühl (Der Vibe)
Verwende starke Adjektive, die das Gefühl vermitteln.
„Das Design soll spielerisch, aber seriös wirken und Vertrauen ausstrahlen.“
Farben & Typografie
Definiere die Markenfarben und den Schriftstil (siehe Logo).
„Nutze das Farbschema Türkis (#00A0B0) und Dunkelgrau (#333). Die Typografie soll modern und abgerundet sein.“
Bildstil
Definiere, welche Art von Bildern oder Illustrationen generiert werden sollen.
„Generiere minimalistische, geometrische Illustrationen mit fließenden Linien, keine Fotos.“
Akustik (optional)
Gib Hinweise für Tonalität und Jingle-Stimmung.
„Der Ton muss motivierend und freundlich sein; das Farbschema muss zu einem kurzen, elektronischen Jingle passen.“
3. Struktur & Format: Klare Anweisungen für den Output
Auch der Output der KI muss präzise gesteuert werden.
Element
Fokus
Beispiel-Prompt-Erweiterung
Layout & Anordnung
Definiere die grobe Anordnung der Elemente.
„Die Navigation muss sticky (feststehend) sein. Ordne alle Sektionen vertikal an.“
Formatanpassung
Lege die Ausrichtung fest.
„Optimiere das Layout sofort für Desktop und Mobile (responsive Design).“
Ausgabedichte
Wie viel Text soll auf den Screen?
„Halte den Text minimal; verwende stattdessen Icons und Listen.“
Der ideale Vibe-Prompt (Zusammenfassung)
„Erstelle eine moderne, minimalistische Registrierungsseite für die Lern-App FoxMind. Der Vibe soll verspielt und gleichzeitig seriös sein. Nutze das Farbschema Türkis und Dunkelgrau. Der Hero-Bereich muss einen Call-to-Action ‚Jetzt kostenlos starten‘ enthalten. Verwende abgerundete Ecken und klare, serifenlose Typografie. Generiere keine Fotos, sondern geometrische Illustrationen, die zum Logo passen. Optimiere das Design für Mobile First.“
Vibe Coding mit begrenzten Tokens
So nutzt du den Free-Plan optimal:
Was bedeutet das Token-Limit?
Bolt.new erlaubt dir 300.000 Tokens pro Tag im kostenlosen Tarif
Tokens sind KI-Einheiten – sie werden verbraucht bei:
Prompts (Eingaben)
KI-Antworten (z. B. generierter Code, Layouts, Texte)
Je länger und komplexer dein Prompt oder die Antwort, desto mehr Tokens werden verbraucht
Strategien für effizientes Arbeiten
1. Plane deine Struktur vor dem Prompting
Überlege dir vorher, was du brauchst: Seitenaufbau, Funktionen, Designstil
Skizziere deine App oder Website grob auf Papier oder in einem Padlet
So vermeidest du ständiges Umformulieren und sparst Tokens
2. Nutze präzise Prompts
Formuliere klar und knapp: „Erstelle eine Startseite für eine App zur mentalen Gesundheit – ruhig, modern, mit drei Hauptfunktionen.“
Vermeide vage oder zu offene Prompts wie: „Mach was Schönes“ oder „Erstelle eine coole Seite“
3. Ändere Farben und Layouts direkt im Code
Wenn du z. B. nur den Farbton ändern willst, bearbeite den CSS-Code direkt
Beispiel: Statt einen neuen Prompt zu schreiben, ändere background-color: #f5f5f5; zu #e0e0e0;
Das spart Tokens und fördert technisches Verständnis
4. Arbeite in kleinen, klaren Schritten
Teile deine Arbeit in Tagesetappen: z. B.
Tag 1: Layout generieren
Tag 2: Texte anpassen
Tag 3: Farben und Icons
So bleibt der Aufwand gering (ca. 10–15 Min/Tag) und du nutzt dein Token-Budget sinnvoll
5. Dokumentiere deine Fortschritte
So vermeidest doppelte Prompts und behältst den Überblick
Halte fest, was du schon gemacht hast und was noch fehlt
Nutze z. B. ein digitales Logbuch, Padlet oder eine einfache Tabelle
Eigener Vibe oder Vorlage nutzen?
Nachdem ihr den Master-Prompt für eure App- oder Website-Idee entwickelt habt, stehen euch zwei Wege offen, um mit dem KI-Builder (wie Bolt.new) den ersten Prototypen zu erstellen. Beide Methoden nutzen euer Wissen über Vibe Coding, aber auf unterschiedliche Weise.
Option 1: Vibe Coding aus dem Master-Prompt (Der Königsweg)
Dies ist die direkte Anwendung eures gesamten gelernten Wissens.
Vorgehen: Ihr nutzt euren eigenen Master-Prompt (der den Vibe, die Funktion, die Farben und die Struktur eurer Marke enthält) als alleinige Eingabe für den KI-Builder.
Vorteil: Die KI generiert ein Design, das einzigartig ist und eurem Markenporträt (z. B. FoxMind) zu 100 % entspricht. Ihr habt die volle kreative Kontrolle über den „Vibe“.
Basis: Alle eure bisher erstellten Assets (Logos, Farbschemata, Tonalität) dienen als konzeptionelle Grundlage für den Prompt.
Option 2: Den Vibe einer bestehenden Website kopieren
Falls der reine Text-Prompt nicht den gewünschten Vibe liefert oder ihr eine sehr spezifische Ästhetik nachbilden wollt, könnt ihr die visuelle Sprache einer anderen Website nutzen.
Vorgehen: Ihr wählt eine professionelle Website, deren Stil euch gefällt, und lasst die KI diesen Vibe übernehmen.
Vorteil: Dies ist extrem schnell und garantiert ein professionelles, visuell ansprechendes Layout und Design-System.
Nachteil: Ihr müsst danach manuell sicherstellen, dass die Farben und Texte mit eurem eigenen Vibe (z. B. Türkis von FoxMind) übereinstimmen.
Technik: So kopiert der KI-Builder den Vibe
Der KI-Builder kopiert nicht den Code, sondern die Design-Strategie einer Seite. Dies geschieht durch den Einsatz von Visueller KI (Computer Vision):
Visuelle Eingabe: Du lieferst der KI die Vorlage. Dies geschieht entweder durch das Hochladen von Screenshots der gewünschten Website oder, bei manchen Tools, durch das direkte Eingeben der URL.
Musteranalyse: Die KI zerlegt das Bild. Sie identifiziert:
Layout: Wo sind die Elemente positioniert? (z. B. 3-spaltiger Aufbau, zentrierter Text).
Design-Vibe: Welche Typografie (Schriftart) wird verwendet? Welche Farbpalette dominiert? Wie groß sind die Abstände zwischen den Elementen?
Kombinierter Prompt: Du gibst der KI den Befehl: „Kopiere den Stil dieser Vorlage, aber ersetze den Inhalt durch meinen Master-Prompt von [dein Produkt].“**
Neugenerierung: Die KI generiert eine neue, einzigartige Website – aber sie wendet den gelernten Vibe (Farben, Abstände, Schriftstil) der kopierten Seite auf deine eigenen Texte und Funktionen an.
Dieser Prozess erlaubt euch, in kürzester Zeit einen hochwertigen, professionellen Design-Vibe zu erhalten, den ihr dann mit euren eigenen Inhalten füllen und perfektionieren könnt.
Hauptaufgabe: Vom Vibe-Prompt zum Grundgerüst
In dieser Hauptaufgabe setzt ihr die Prinzipien des Vibe Codings direkt auf eure App- oder Website-Idee an. Ziel dieses Blocks ist es, ein solides, konsistentes Grundgerüst zu erstellen, das in den kommenden 5 Unterrichtsstunden weiterentwickelt wird. Die sorgfältige Planung der Struktur (Gliederung) ist dabei entscheidend, da nachträgliche Änderungen am Grundgerüst durch die KI teuer sind und zu Inkonsistenzen führen können.
Wichtiger Hinweis: Token-Management
Faustregel: Euer Master-Prompt und der Generierungsvorgang können 1–2 große Prompts eures täglichen Kontingents (ca. 300.000 Tokens pro Tag) verbrauchen.
Strategie: Plant den Master-Prompt so präzise, dass das Grundgerüst im ersten Anlauf perfekt sitzt! Nachträgliche strukturelle Änderungen verbrauchen schnell weitere Tokens und sind ineffizient.
Erstellt einen kostenlosen Account beim KI-Builder Bolt.new. Stellt sicher, dass der Zugang funktioniert.
Strukturplanung der Seite/App:
Nehmt euren Master-Prompt und gliedert den Inhalt sehr detailliert.
Definiert die Reihenfolge und den Titel jeder einzelnen Sektion und Seite eurer Website/App.
Ziel: Diese genaue Struktur müsst ihr in eurem Master-Prompt als klare, nummerierte Anweisung an die KI geben.
Phase 2: Master-Prompt und Grundgerüst-Generierung
Visuelle Basis festlegen (Der Vibe-Input):
Wählt eure Vorgehensweise:
A) Eigener Vibe (Empfohlen): Ihr nutzt nur euren detaillierten Master-Prompt (mit Farben, Stil und Ästhetik).
B) Vibe Kopieren: Ihr wählt eine professionelle Website, deren Stil euch gefällt, und ladet 2–3 Screenshots als Beispielbilder in Bolt.new hoch.
Master-Prompt-Eingabe:
Gebt euren finalen Master-Prompt (der nun die Strukturplanung aus Phase 1 enthält) zusammen mit den optionalen Beispielbildern (aus den letzten Unterrichtsstunden) in Bolt.new ein.
Grundgerüst generieren:
Lasst die KI den Prototypen generieren.
Dokumentiert: Macht einen Screenshot des ersten Entwurfs und legt ihn ab.
Phase 3: Kontrolle & Sicherung
Vibe-Check: Überprüft den generierten Entwurf kritisch. Hat die KI die Struktur und den Grund-Vibe (Farben, Schriftart) korrekt umgesetzt? Korrigiert nur die Struktur und den Vibe, nicht die Inhalte.
Sicherung: Speichert den Link zu eurem Projekt in Bolt.new.
Ausblick & Hausaufgabe: Tägliches Vibe-Tuning und Dokumentation
Dieses Grundgerüst ist die Basis für die kommenden 5 Blöcke. Jetzt geht es darum, sich an das iterative Prompt-Tuning zu gewöhnen und den Vibe eures Projekts zu verfeinern.
Tägliches Vibe-Tuning: Prüft zu Hause über die Woche hinweg täglich, ob das Gerüst stabil ist.
Effiziente Nutzung der Tokens: Nutzt euer kleines, tägliches Token-Kontingent, um gezielte, kleinere Anpassungen am Design vorzunehmen. Das Ziel ist es, das Prompten zu üben.
Wählt pro Tag ein Element: Konzentriert euch pro Tag auf die Optimierung eines Elements eurer Seite, um den Vibe zu perfektionieren. Das kann sein:
Die Farbpalette (z.B. den Farbton des Haupt-Buttons).
Ein Textfeld (z.B. den Slogan präziser formulieren).
Das Layout einer Sektion (z.B. die Spaltenanzahl ändern).
Die Schriftart oder die Schriftgröße für den mobilen View.
Dokumentationspflicht:
Notiert für jeden Tag (ein Objekt): Was genau wurde angepasst und welchen Prompt habt ihr dafür verwendet?
Belegt die Änderung mit einem kurzen Screenshot des Ergebnisses.
Ziel: Stellt sicher, dass das Grundgerüst strukturell und ästhetisch (der Vibe!) bereit ist. Wir werden im nächsten Block einen genauen Plan erstellen, wann welche Inhalte und Funktionen integriert werden.
