Von der Idee zum Widget — Schritt für Schritt mit KI
Mehr als ein Quick Link
Im ersten Teil dieser Serie haben wir in 5 Minuten ein Quick-Links-Widget gebaut. Nett, aber zugegeben: relativ simpel. Diesmal wird’s spannender.
Wir bauen einen Kantinen-Speiseplan — ein Widget, das:
- Tagesgerichte mit Preisen anzeigt
- Allergene und Veggie-Optionen markiert
- Auf dem Smartphone genauso gut funktioniert wie am Desktop
Schritt 1: Die Idee formulieren
Bevor du die KI anwirfst, überleg kurz: Was genau soll das Widget können? Je konkreter du bist, desto besser wird das Ergebnis.
Hier unser Prompt:
„Erstelle ein Kantinen-Speiseplan-Widget. Es soll den Wochenplan anzeigen, von Montag bis Freitag. Pro Tag gibt es 3 Gerichte: ein Hauptgericht, eine vegetarische Option und ein Tagesgericht. Jedes Gericht hat einen Namen, einen Preis und optionale Allergen-Icons (Gluten, Laktose, Nüsse). Der aktuelle Tag soll hervorgehoben sein."
Das sind vier Sätze. Aber sie enthalten alles Wesentliche:
- Struktur: 5 Tage, 3 Gerichte pro Tag
- Daten: Name, Preis, Allergene
- Verhalten: Aktueller Tag hervorgehoben
Schritt 2: Die KI arbeitet
Sobald du den Prompt abschickst, passiert folgendes:
Die KI liest die Dokumentation. Sie ruft den Widget-Builder-Guide ab und prüft, welche Template-Sprache (Handlebars), welches Styling (Tailwind CSS) und welche Formularfeld-Typen verfügbar sind.
Die KI baut das Template. Sie erstellt ein responsives Layout mit Tabs oder einer Übersicht für jeden Wochentag. Der aktuelle Tag wird automatisch hervorgehoben.
Die KI testet das Rendering. Bevor sie das Widget anlegt, rendert sie das Template mit Beispieldaten, um sicherzugehen, dass alles passt.
Das Ganze dauert ein paar Sekunden. Dann liegt das Widget in deinem Account.
Schritt 3: Das Ergebnis prüfen
Was du siehst:
- Wochentage als Tabs — Montag bis Freitag, aktueller Tag blau hinterlegt
- Drei Gerichte pro Tag — mit Preis und Allergen-Icons
- Responsive — auf dem Smartphone werden die Gerichte untereinander angezeigt
- Sauberes Design — passt zum restlichen Intranet
Schritt 4: Anpassen und verfeinern
Vielleicht gefällt dir nicht alles auf Anhieb. Kein Problem.
„Zeig die Allergene nicht als Text, sondern als kleine farbige Icons. Und füg eine Legende unter dem Widget hinzu, die erklärt was die Icons bedeuten."
Oder:
„Die Preise sollen rechtsbündig stehen. Und das vegetarische Gericht soll einen grünen Rand haben."
Die KI passt das Widget an und zeigt dir das Ergebnis. Du musst nicht bei null anfangen — sie arbeitet immer mit dem bestehenden Widget weiter.
Schritt 5: Aktualisieren — genauso einfach
Nächste Woche neuer Speiseplan? Kein Problem. Du öffnest wieder deinen KI-Assistenten und sagst:
„Aktualisiere den Speiseplan. Montag: Currywurst (5,50€), Gemüselasagne (4,80€), Gulaschsuppe (3,50€). Dienstag: …"
Die KI aktualisiert das bestehende Widget — du musst kein neues anlegen. Und wenn sich die Struktur mal ändert (z.B. ein viertes Gericht pro Tag), sagst du das einfach dazu.
Was wir gelernt haben
Drei Dinge, die wir mitgenommen haben:
1. Konkreter Prompt = besseres Ergebnis. Je genauer du beschreibst, was du brauchst, desto weniger Korrekturschleifen. „3 Gerichte pro Tag mit Preis und Allergenen" ist besser als „ein Speiseplan-Widget".
2. Iterieren ist normal. Das erste Ergebnis ist selten perfekt. Aber die Korrektur ist ein Einzeiler: „Mach die Preise rechtsbündig." Das ist schneller als jedes IT-Ticket.
3. Aktualisieren ist genauso einfach wie Erstellen. Du musst das Widget nicht jedes Mal neu bauen. Sag der KI, was sich geändert hat, und sie aktualisiert das bestehende Widget.
Nächster Schritt
Du hast jetzt gesehen, wie ein Quick-Links-Widget und ein Speiseplan-Widget entstehen. Im dritten Teil zeigen wir dir 5 weitere Widget-Ideen mit fertigen Prompts zum Nachmachen.
Oder du startest direkt selbst: Widget Builder ausprobieren →