Vibe Coding

Sie müssen keine einzige Zeile Programmiercode lesen können, um eigene Programme verwirklichen zu können! Lassen Sie es uns ausprobieren!

Sie brauchen ein KI-System, das eine HTML-Seite erstellen kann (z. B. BYLKI). Suchen Sie sich ein System aus und fragen Sie das System, ob es eine HTML-Datei als Download-Datei generieren kann. Ziemlich sicher wird es ja sagen. Und schon können wir mit Projekt 1 beginnen: dem Zufallsgenerator.

Kopieren Sie folgenden Prompt in ein KI-System Ihrer Wahl:

Erstelle eine einfache Webseite mit einem Zufallsgenerator.
Die Seite soll:
 - eine große Zahl anzeigen,
 - einen gut sichtbaren Button mit der Aufschrift „Neue Zahl“ haben,
Die Gestaltung soll übersichtlich und modern sein und auch auf einem Tablet gut funktionieren.
Erstelle alles in einer einzigen HTML-Datei, sodass ich die Datei direkt im Browser öffnen kann.

• Sagen Sie der KI, aus welchem Zahlenraum die Zahlen stammen sollen.
• Wollen Sie womöglich die Farbe ändern?
• Oder soll die Zahl gegen Ende immer langsamer wechseln, sodass die Spannung steigt?

Kopieren Sie folgenden Prompt in ein KI-System Ihrer Wahl:

Erstelle eine einfache Webseite für einen kurzen Rückblick zu Beginn einer Unterrichtsstunde.
Die Seite soll:
  - eine Frage anzeigen,
  - darunter drei große Antwortmöglichkeiten zeigen,
  - nach dem Antippen sofort anzeigen, ob die Antwort richtig oder falsch war,
  - die richtige Antwort deutlich hervorheben.

Die Gestaltung soll übersichtlich, modern und auf einem Tablet gut bedienbar sein.
Verwende zunächst diese Frage:

„Welche Funktion hat Dopamin im Gehirn?“
  
Antwortmöglichkeiten:
* A: Es macht uns automatisch glücklich.
* B: Es beeinflusst Motivation, Lernen und die Erwartung von Belohnungen.
* C: Es sorgt ausschließlich für Entspannung.

Richtig ist Antwort B.
Erstelle alles in einer einzigen HTML-Datei, die direkt im Browser geöffnet werden kann.

• Momentan kann dies Tool nur diese eine Frage anzeigen. Wäre es nicht praktisch, wenn man im Tool selbst eine neue Frage eingeben könnte? Treten Sie mit der KI in den Dialog und formuliert Sie Ihre Wünsche! Ein Lösungsvorschlag verbirgt sich hinter der Fußnote ¹⁾

Tipps:

• Beschreiben Sie erst ihrer Kollegin / ihrem Kollegen, was ihnen vorschwebt - das hilft oft, die Gedanken in klare Worte zu fassen.
• Beschreiben Sie der KI möglichst genau, was sie wollen.
• Fragen Sie die KI, ob sie noch weitere Informationen benötigt.

Auf de nachfolgenden Seite können Sie Ihr Projekt²⁾ hochladen und testen:

• Link: https://vibe-coding.herr-zimmerer.de
• Passwort: Name der Schule in Kleinbuchstaben