Kleine WebApps mit KI erstellen: Drei Schritte, 5-10 Minuten

Worum es geht:

Eine App in unter 10 Minuten entwickeln – klingt nach einem typischen KI-Versprechen. Aber geht das wirklich? Ja. Wenn man realistisch bleibt.

Das Ziel: In wenigen Minuten ein MVP („Minimum Viable Product“), also eine Idee entwickeln, eine kleine To-do-Listen-App, die Aufgaben erfassen, als erledigt markieren und löschen kann.

Ich nutze dazu Claude! Denn Claude kann mit am besten programmieren und visualisiert Ergebnisse direkt.
Da ich keine Zeit und Muße für IT-Schnick-Schnack habe, soll die App eine HTML sein. Vorteil: läuft in jedem Browser und ist lokal abgespeichert.

Die gute Nachricht: Mit dem richtigen Vorgehen klappt das schneller denn je.

Die schlechte Nachricht: Ganz ohne Nachdenken und Strukturieren geht’s dann doch nicht. Wie in jedem Projekt: Je schneller es fertig sein soll, desto schlechter die Qualität -> desto länger dauert die Reparatur. 😉

Schritt 1: Die Idee vorstellen und Lücken schließen

Was genau soll die App können? Weiß ich eigentlich alles was ich anfordern muss? Weis ich schon alles was ich nicht weis? Hm…

Meine Anforderungen waren bisher nur:
• Aufgaben hinzufügen per Tastatur (Enter)
• Aufgaben als erledigt markieren (Checkbox oder Shortcut)
• Aufgaben löschen
• Offene Aufgaben oben, erledigte unten anzeigen
• Minimalistisches Design in Schwarz-Weiß
• Bedienung möglichst ohne Maus

Und so erzähle ich es der KI. Ich will X, Y und Z.

Die Faustregel lautet: Was du der KI nicht sagst, weiß Sie nicht. Was Du nicht weist, kann die KI erstrecht nicht wissen. Sprich: Anforderungen müssen in der Regel spezifischer angeben werden, als Du jetzt gerade kannst. Und diese Brücke schläge die KI.

Also: Sage (Schreibe, diktiere) alles was Du haben willst. Alles! Dann lass Deine Anforderungen vom KI-Chat analysieren und Unzureichlichkeiten aufdecken. Was braucht eine KI noch, um ein optimales Ergebnis zu produzieren? z.B. mit:

Nenne kritische Informationen, die meinen Anforderungen fehlen, sodass ein optimales Ergebnis von einem KI-Tool produziert werden kann.

Die meisten von uns sein keine 360-Grad-Experten und in meinem Fall wurden 10 Aspekte für eine vollumfänglichen Anforderung thematisiert:

Kritische Entscheidungen & wichtige Informationen für KI-Prompts

Wenn du ein KI-Tool (z. B. ChatGPT oder einen Code-Generator) für die Entwicklung deiner Web App nutzen willst, solltest du folgende Punkte unbedingt in deinen Prompt aufnehmen:

    •   **Ziel und Zweck der App**: Was soll die Web App können? Welche Hauptfunktionen sind gewünscht?

    •   **Benutzeroberfläche (UI/UX)**: Gibt es Designvorgaben, Farbschemata oder spezielle Layout-Wünsche?

    •   **Interaktive Elemente**: Welche Interaktionen sind nötig (z. B. Formulareingaben, Buttons, dynamische Listen)?

    •   **Responsivität**: Soll die App auf Mobilgeräten und Desktops gleichermaßen gut funktionieren?

    •   **Barrierefreiheit**: Gibt es Anforderungen an Accessibility (z. B. für Screenreader)?

    •   **Technische Vorgaben**: Sollen bestimmte Frameworks verwendet werden?

    •   **Datenschutz/Sicherheit**: Gibt es besondere Anforderungen an Datenschutz oder Sicherheit (z. B. DSGVO, sichere Formularverarbeitung)?

    •   **Performance**: Sind z.B. Ladezeiten wichtig?

    •   **Erweiterbarkeit**: Soll die App später um Funktionen ergänzt werden?

    •   **Beispiele/Referenzen**: Gibt es Vorbilder oder Apps, an denen sich das Design oder die Funktionalität orientieren soll?

Tipp: Gib auch diese Antworten wieder möglichst zeitsparend ein - es wird eh nochmal sauber formuliert und strukturiert (von KI). So schnell wie möglich, so sauber wie nötig.

Schritt 2: Den Prompt formulieren lassen

Nun fordere einen finalen Prompt von der KI an. Hilfreich ist es hier wieder einen Dialog zu ermöglichen. Formuliere das Ziel (den Kontext; “Ich will eine Web-App”), eine Aufgabe (“Formuiere einen Prompt - wenn Du noch Informationen brauchst, frag mich”) und die Anforderungen (“Das Ziel soll mit X, Y und Z erreicht werden.”)

Das mag trocken klingen, spart aber Zeit – und Token (also die Menge an Interaktion, die Du täglich ggf. kostenfrei verfügbar hast).

Je präziser der Prompt, desto besser der Output. Deshalb lassen wir das besser von einem „native Speaker“ formulieren: ;)

Ziel

Ich will von einem KI-Tool eine Web-Anwendung entwickeln lassen. Ich habe dazu einen Prompt mit Anforderungen formuliert.

Aufgabe

Kritisiere den Prompt konstruktiv und weise mich auf wesentliche Verbesserungs-Möglichkeiten hin. Frage wenn nötig nach, damit ich Dir bestmöglich helfen kann meine Anforderungen zu verstehen, sodass Du mir bestmöglich Hilfe leisten kannst, den Prompt für eine KI verständlich zu machen.

Dann mein Prompt:

[per Spracheingabe alle Anforderungen diktiert (siehe oben) was mir wichtig war - mäßig strukturiert - wie man erst Ideen eben formuliert, wenn man allein ist…]

Das Ergebnis von ChatGPT sah schon ungleich brauchbarer aus, als ich es in absehbarer Zeit produziert hätte, mit vielen Aspekten, die mir als noch-nicht-Experten nie eingefallen wären.

Schreibe eine minimalistische Web-App (schwarz/weiß/grau), um To-Dos zu erfassen, zu verwalten und zu filtern.

Funktionalitäten:
* Neues To-Do per Texteingabe + Enter
* Navigation mit Tastatur (↑/↓), Auswahl mit Space, Löschen mit Del
* Erledigte To-Dos: grau, durchgestrichen, nach unten verschoben
* Alle To-Dos zentral dargestellt
* Filteroption: “alle”, “offen”, “erledigt” (per Taste 1–3)
* Nur zwei Mausaktionen erlaubt: Klick zum Erledigen / Löschen

Design:
* Farben: #000, #fff, #ccc
* Schriftart: z. B. Inter oder Roboto, groß genug für Lesbarkeit
* Keine auffälligen Animationen (nur dezente Fade-In/-Out)

Technisch:
* Tech-Stack: React + Tailwind (alternativ: Vanilla JS + CSS)
* Datenhaltung: lokal im localStorage
* Responsives Design (mobile-first, max 600px Breakpoint)
* Keine externen Abhängigkeiten außer React/Tailwind
* Fokus auf Performance (Lighthouse > 90)

Entwicklerhinweise:
* Struktur: Komponentenbasiert, modular
* Kommentare im Code (Funktion pro Komponente)
* Legende als Komponente HelpOverlay, via “H”-Taste einblendbar
* README.md mit Architekturüberblick + Erweiterungshinweisen

Hinweis: Die Detailtiefe hat ChatGPT formuliert. Ich habe z.B. die Farben nur als “weiß, grau, schwarz” genannt.

Schritt 3: Umsetzung und Nachschärfen

Gib den KI-optimierten Prompt nun in Claude ein. Da manche KI-Tools harte Limits für kostenfreie Nutzung haben, lohnt sich eine Formulierung wie „schreibe XY möglichst effizient und kurz, möglichst wenige Zeichen gebraucht werden“.

Mein erster Versuch wurde als TSX-Datei (TypeScript für React) erstellt. Ja genau - musste ich auch erstmal googeln…
TSX hat einige Vorteile, die KI hat also Gradios abgeliefert. TSX ist aber nicht ohne Weiteres nutzbar. HTML hingegen ist es – einfach im Browser öffnen.

Daher bat ich um Wiederholung: „bitte erstelle das Ergebnis im Format HTML“.
Die App-Darstellung ist nun etwas reduziert, Funktion sind vollständig vorhanden.

Und das Ergebnis war eine Punktlandung!

• ✅ Live-Eingabe neuer To-Dos ✅
• ✅ Abhaken per Checkbox ✅
• ✅ Löschen mit Button ✅
• ✅ automatische Sortierung (offen oben)

Fazit: KI hilft – wenn man weiß, was man will

Künstliche Intelligenz ist keine Wunderlampe. Doch Sie kommt dem recht nahe, wenn man Sie lässt. Dazu muss man lediglich wissen Sie zu bedienen.

In Summary:

1. Semi-Strukturierte Gedanken von der KI strukturieren lassen

2. Strukturierte Gedanken anreichern - mit Fach-Domänen-Wissen durch die KI + Formatierung für KI optimieren (durch KI)

3. Ausführen und Änderungen in wenigen Sekunden umsetzen lassen

Und wieder gilt. Menschen werden nicht von KI ersetzt, sondern von anderen Menschen die KI benutzen. Und Experten einer Fach-Domäne produzieren wahrscheinlich bessere und schnellere Ergebnisse, als die besten fachfremde KI-Nutzer.

Take Away: Wenn du künftig etwas umsetzen, möchtest, das Dir grundsätzlich fachfremd ist - nutze die KI um Deine Ziele so wahrscheinlich und schnell wie nie zuvor in der Geschichte zu erreichen. Die KI kein Dein Freund sein und Dir helfen.