Läuft komplett lokal: HTML, CSS, Vanilla JavaScript — keine externen Abhängigkeiten.
Ziel
Mit einem bewusst einfachen Prompt starten, das Ergebnis vergleichen und danach kreativ werden. Die Teilnehmer erleben den Chat-Modus und lernen nebenbei: Ein offener Prompt lässt der KI viel Spielraum — die Ergebnisse fallen unterschiedlich aus.
Vorbereitung
- Ein leerer Ordner als Projekt (in Kiro über Open a project).
- Kiro im Chat-Modus (Standard).
Teil 1 – Der erste, offene Prompt
Alle geben denselben, bewusst schlichten Prompt ein:
Erstelle einen Timer mit HTML, Vanilla JavaScript und CSS ohne externe Abhängigkeiten.Beobachten & vergleichen
- Ergebnis kurz ausprobieren (Datei im Browser öffnen, siehe Kasten unten).
- Vergleich in der Gruppe: Die Ergebnisse werden sich unterscheiden — Countdown vs. Stoppuhr, anderes Layout, andere Buttons, andere Farben.
- Diskussion: Warum? Ein offener Prompt lässt viel Interpretationsspielraum. Je präziser der Prompt (Format, Anforderungen, Beispiele), desto vorhersehbarer das Ergebnis.
So öffnest du die Datei im Browser: Im Kiro-Explorer (links) Rechtsklick auf die HTML-Datei → Reveal in File Explorer / Im Datei-Explorer anzeigen, dann im Windows-Explorer doppelklicken. Sie öffnet sich im Standardbrowser. Nach Änderungen die Seite mit F5 neu laden.
Teil 2 – Jetzt kreativ werden
Kein fester Prompt — die Teilnehmer gestalten ihren Timer nach eigener Idee. Sie können den bestehenden Timer umbauen (Folge-Prompt) oder komplett neu starten.
Beispiele als Inspiration (nur Ideen, gern eigene finden):
- „Mach aus dem Timer eine Rolex — analoge Uhr mit Zeigern und edlem Look.“
- „Gestalte den Timer im Star-Trek-LCARS-Design mit den typischen Farben und Formen.“
- „Baue einen Pomodoro-Timer (25 Min Arbeit / 5 Min Pause) mit Fortschrittsring.“
- „Mach einen Retro-Flip-Clock-Timer wie ein altes Klappzahlen-Display.“
- „Entwirf einen Countdown im Neon-/Synthwave-Stil mit Glow-Effekt.“
Tipp für gute Ergebnisse: Wer ein klares Bild im Kopf hat, sollte es beschreiben (Stil, Farben, Verhalten) — so wird sichtbar, wie sehr präzisere Prompts das Ergebnis steuern.
Lernpunkte
- Der Chat-Modus ist ideal für schnelles, exploratives Bauen.
- Gleicher Prompt ≠ gleiches Ergebnis: offene Prompts liefern unterschiedliche Resultate.
- Präzision (Stil, Format, Beispiele) macht Ergebnisse vorhersehbarer.
- Folge-Prompts bauen auf dem bestehenden Ergebnis auf (iteratives Arbeiten).