Erstelle Web-Apps in Minuten

Heute kann fast jeder mit einer KI eine kleine Webseite, eine interaktive Präsentation oder ein Berechnungstool erstellen.

Du beschreibst in normalen Worten, was du brauchst. Die KI erzeugt daraus den Programmcode. Viele KI-Anwendungen zeigen das Ergebnis sofort als Vorschau. Fehler können anschließend ebenfalls per Sprache oder Texteingabe verbessert werden.

Programmieren zu lernen bleibt wertvoll. Für einen ersten Prototyp reicht jedoch häufig eine gute Idee und eine klare Beschreibung.

Folgende Tipps sind als Impuls zu verstehen. Für leichtere oder umfassendere Erklärungen sowie mögliche Anbieter/Provider zur Entwicklung und veröffentlich nutze eine Web-Suche oder KI deiner Wahl.

Die einfachste Grundregel

Bitte die KI am Anfang immer um:

Eine vollständig funktionsfähige Browser-App als einzelne Datei namens index.html.

Diese eine Datei kannst du:

1. auf deinem Computer speichern,
2. durch einen Doppelklick im Browser öffnen,
3. per E-Mail weitergeben,
4. auf einen Webserver hochladen.

Eine solche Datei kann Texte, Farben, Schaltflächen, Berechnungen, Diagramme, Animationen und kleine Datenspeicher enthalten.

Was steckt in einer Webseite

Eine einfache Webseite besteht normalerweise aus drei Bestandteilen.

Bestandteil	Aufgabe
HTML	Inhalte und Aufbau
CSS	Farben, Abstände, Schrift und Gestaltung
JavaScript	Schaltflächen, Berechnungen und andere Funktionen

HTML bildet die Struktur einer Webseite. CSS bestimmt das Aussehen. JavaScript ergänzt Interaktionen und Funktionen.

Für den Einstieg können alle drei Bestandteile in einer einzigen Datei stehen:

mein-projekt
└── index.html

Bei einem größeren Projekt können daraus drei Dateien werden:

mein-projekt
├── index.html
├── style.css
└── script.js

Die KI kann beide Varianten erzeugen. Eine einzelne Datei ist für Anfänger meistens leichter zu speichern, zu testen und hochzuladen.

Was sich besonders einfach bauen lässt

Geeignete erste Projekte sind:

1. eine klickbare Präsentation,
2. ein Kostenrechner,
3. ein Quiz,
4. eine Checkliste,
5. ein Stundenplan,
6. ein kleiner Fragebogen,
7. eine Landingpage,
8. eine persönliche Webseite,
9. ein Lernspiel,
10. eine einfache Browser-App.

Solche Anwendungen können vollständig auf deinem Computer oder im Browser laufen.

Der einfachste Ablauf

1. Eine Idee auswählen

Formuliere die Idee zuerst in einem Satz.

Beispiele:

Ich möchte einen Rechner, der Fahrtkosten anhand von Kilometern und Verbrauch berechnet.

Ich möchte eine Präsentation mit acht Seiten über künstliche Intelligenz im Alltag.

Ich möchte eine kleine Webseite für meinen Verein.

2. Eine KI-Anwendung öffnen

Für den ersten Versuch eignen sich beispielsweise:

• ChatGPT
• Claude
• Gemini mit Canvas
• Google AI Studio
• Mistral Vibe

Auch Entwicklungsumgebungen wie Google Antigravity, Visual Studio Code mit Gemini Code Assist, Claude Code oder Codex können komplette Projektordner bearbeiten.

3. Den Startprompt eingeben

Dieser Prompt funktioniert für viele kleine Projekte:

Erstelle eine vollständig funktionsfähige Browser-App als einzelne Datei namens index.html.

Verwende nur HTML, CSS und JavaScript. Es sollen keine Installation, kein Server und keine zusätzlichen Programme erforderlich sein.

Die Anwendung soll direkt durch einen Doppelklick auf die Datei im Browser funktionieren.

Meine Idee:
[HIER DIE EIGENE IDEE BESCHREIBEN]

Anforderungen:
- übersichtliche und moderne Gestaltung
- gut lesbar auf Computer und Smartphone
- verständliche Beschriftungen
- alle Schaltflächen müssen funktionieren
- Eingabefehler sollen abgefangen werden
- keine externen Bibliotheken
- keine Anmeldung
- keine Datenbank

Erstelle den vollständigen Code und zeige eine Vorschau. Teste anschließend die wichtigsten Funktionen und behebe erkennbare Fehler.

4. Die Vorschau testen

Prüfe anschließend selbst:

1. Funktionieren alle Schaltflächen?
2. Stimmen die Berechnungen?
3. Ist der Text gut lesbar?
4. Funktioniert die Anwendung auch bei leeren Eingabefeldern?
5. Ist die Darstellung auf einem Smartphone brauchbar?
6. Werden Fehlermeldungen verständlich angezeigt?

Die Vorschau ist hilfreich. Sie ersetzt keinen eigenen Test.

5. Änderungen einzeln beschreiben

Du musst den Code meistens nicht selbst verändern. Beschreibe einfach, was anders werden soll.

Beispiele:

Mache die Schrift größer und erhöhe die Abstände.

Ergänze eine Schaltfläche, mit der alle Eingaben gelöscht werden.

Die Berechnung ist falsch. Prüfe die Formel mit drei Beispielwerten und korrigiere sie.

Die Anwendung soll auch auf einem Smartphone ohne seitliches Scrollen funktionieren.

Ergänze eine Druckansicht.

Kleine, eindeutige Änderungen funktionieren meistens besser als zehn Änderungswünsche gleichzeitig.

6. Die Datei speichern

Lade die erzeugte Datei herunter oder kopiere den vollständigen Code in einen Texteditor.

Speichere sie unter:

index.html

Wichtig ist die Endung .html.

Windows blendet Dateiendungen teilweise aus. Eine Datei namens index.html.txt funktioniert nicht als Webseite.

7. Die Datei lokal öffnen

Öffne den Ordner und klicke doppelt auf index.html.

Die Datei wird normalerweise im Standardbrowser geöffnet.

Für viele Präsentationen, Rechner, Quizze und Lernanwendungen ist kein Internetzugang erforderlich.

Beispielprompt für eine Präsentation

Erstelle eine interaktive Präsentation als einzelne Datei index.html.

Thema:
Sicherer und sinnvoller Einsatz von KI im Alltag

Die Präsentation soll:
- aus acht Folien bestehen
- im Vollbild funktionieren
- mit Pfeiltasten und Schaltflächen bedienbar sein
- eine Fortschrittsanzeige enthalten
- große, gut lesbare Texte verwenden
- auf einem Beamer gut erkennbar sein
- eine Druckansicht für den PDF-Export besitzen
- vollständig ohne Internetverbindung funktionieren

Verwende nur HTML, CSS und JavaScript.
Erstelle anschließend eine Vorschau und teste die Navigation.

Beispielprompt für ein Berechnungstool

Erstelle einen einfachen Fahrtkostenrechner als einzelne Datei index.html.

Eingaben:
- gefahrene Kilometer
- Verbrauch in Litern pro 100 Kilometer
- Preis pro Liter

Ausgaben:
- benötigte Kraftstoffmenge
- gesamte Kraftstoffkosten
- Kosten pro Person
- Kosten für Hin- und Rückfahrt

Die Anzahl der Personen soll ebenfalls eingegeben werden können.

Prüfe unvollständige oder ungültige Eingaben.
Zeige die verwendete Formel verständlich an.
Die Anwendung soll auf dem Smartphone gut funktionieren.
Verwende nur HTML, CSS und JavaScript.

Beispielprompt für eine einfache Webseite

Erstelle eine kleine professionelle Webseite als einzelne Datei index.html.

Thema:
[NAME UND ZWECK DER WEBSEITE]

Die Webseite soll enthalten:
- einen gut sichtbaren Titelbereich
- eine kurze Vorstellung
- drei Leistungsbereiche
- einen Abschnitt mit häufigen Fragen
- Kontaktinformationen
- eine einfache Navigation
- eine gute Darstellung auf Smartphones
- einen Link zum Impressum
- einen Link zum Datenschutz

Verwende nur HTML, CSS und JavaScript.
Nutze vorerst Platzhalter für Bilder und Kontaktdaten.

Bilder einfügen

Ein Bild ist eine zusätzliche Datei. Diese muss zusammen mit der HTML-Datei gespeichert werden.

Beispiel:

mein-projekt
├── index.html
└── teamfoto.jpg

Die HTML-Datei verweist anschließend auf das Bild:

<img src="teamfoto.jpg" alt="Unser Team">

Bei mehreren Bildern ist ein Unterordner übersichtlicher:

mein-projekt
├── index.html
└── bilder
    ├── teamfoto.jpg
    └── logo.png

Der Verweis lautet dann beispielsweise:

<img src="bilder/logo.png" alt="Logo">

Der Dateiname, die Schreibweise und der Speicherort müssen stimmen. Der Browser lädt ein Bild über den im HTML-Code angegebenen Pfad.

Für einfache Symbole kann die KI auch sogenannte SVG-Grafiken direkt in die HTML-Datei einbauen. Dann wird keine zusätzliche Bilddatei benötigt.

Welche KI-Anwendung eignet sich wofür

ChatGPT

ChatGPT kann HTML-Code direkt in einem interaktiven Codeblock anzeigen. Unterstützte HTML-Seiten und kleine Apps lassen sich innerhalb von ChatGPT als Vorschau öffnen und bearbeiten.

Geeignet für:

• schnelle Einzeldateien,
• Rechner,
• Quizze,
• Präsentationen,
• erste Prototypen.

Empfohlene Formulierung:

Erstelle das Ergebnis als vollständige einzelne HTML-Datei und öffne es in der Vorschau.

Claude

Claude kann HTML- und React-Anwendungen als sogenannte Artifacts erzeugen, anzeigen, bearbeiten und teilweise als Dateien bereitstellen.

Geeignet für:

• visuell ansprechende Prototypen,
• interaktive Anwendungen,
• schrittweise Verbesserungen,
• gemeinsame Besprechung einer Vorschau.

Empfohlene Formulierung:

Erstelle die Anwendung als HTML-Artifact. Sie soll später auch als einzelne index.html heruntergeladen werden können.

Gemini mit Canvas

In der Gemini-Webanwendung kann über „Canvas“ eine App, Präsentation oder Webseite erstellt werden. Die Oberfläche bietet eine Vorschau sowie eine Konsole für Fehler und Meldungen.

Vereinfachter Ablauf:

1. Gemini öffnen.
2. Unter dem Eingabefeld „Dateien hinzufügen“ auswählen.
3. „Canvas“ auswählen.
4. Den Prompt eingeben.
5. „Vorschau“ öffnen.
6. Bei Problemen „Konsole anzeigen“ auswählen.
7. Gemini um die Behebung der Fehler bitten.

Geeignet für:

• Präsentationen,
• Quizze,
• kleine HTML-Anwendungen,
• visuelle Experimente.

Google AI Studio

Der aktuelle offizielle Name lautet weiterhin Google AI Studio. Im „Build Mode“ können per natürlicher Sprache Webanwendungen erstellt, getestet und weiterentwickelt werden. Inzwischen sind auch komplexere Anwendungen mit Serverfunktionen und eine direkte Bereitstellung möglich.

Für Anfänger sollte der Prompt ausdrücklich begrenzen:

Erstelle eine einfache statische Anwendung mit HTML, CSS und JavaScript. Verwende keine Datenbank, keinen Server und keine Anmeldung.

Damit bleibt das Ergebnis leichter verständlich und kann auf normalem Webspace veröffentlicht werden. Das kann ein Ordner von einem Provider sein, in welchen diese Dateien hochgeladen werden können und mit einer eigenen Internetadresse wie fragdochki.de öffentlich erreichbar sind. Mögliche Web-Provider aus Deutschland: Strato, IONOS, Hetzner, Hostinger.

Mistral Vibe

Mistral Vibe ist der aktuelle Name für Mistrals Arbeits- und Programmierassistenten. Das frühere „Le Chat“ wurde in Vibe integriert. Vibe Code kann Dateien lesen, verändern, ausführen und komplette Projekte bearbeiten. Es steht unter anderem als Erweiterung für Visual Studio Code zur Verfügung.

Einfacher Ablauf in Visual Studio Code:

1. Einen neuen Projektordner erstellen.
2. Den Ordner in Visual Studio Code öffnen.
3. Die Erweiterung „Mistral Vibe“ installieren.
4. Das Vibe-Fenster öffnen.
5. Den Startprompt eingeben.
6. Vorgeschlagene Dateiänderungen prüfen.
7. index.html im Browser öffnen.

Google Antigravity

Google Antigravity ist eine eigenständige agentische Entwicklungsplattform. Sie verbindet einen Codeeditor, ein Terminal, einen Browser und KI-Agenten. Die Agenten können Aufgaben planen, Dateien bearbeiten und Ergebnisse im Browser überprüfen.

Antigravity eignet sich besonders für:

• Projekte mit mehreren Dateien,
• wiederholte Änderungen,
• Fehlersuche,
• umfangreichere Browser-Apps,
• Projekte, die später weiterentwickelt werden sollen.

Alle vorgeschlagenen Änderungen und ausgeführten Befehle sollten geprüft werden.

Gemini Code Assist in Visual Studio Code

Die offizielle Google-Erweiterung für Visual Studio Code heißt Gemini Code Assist. Im Agentenmodus kann sie geöffnete Dateien und Projektordner als Kontext verwenden, Änderungen vorschlagen und mehrere Arbeitsschritte bearbeiten. Sie ist ein eigenes Produkt und trägt nicht den Namen Antigravity.

Claude Code und Codex

Claude Code und OpenAI Codex können ebenfalls direkt in Visual Studio Code arbeiten. Sie erkennen geöffnete Dateien, bearbeiten Projektdateien und zeigen Änderungen zur Prüfung an.

Diese Werkzeuge sind besonders sinnvoll, sobald ein Projekt aus mehreren Dateien besteht.

Dateien in einer Entwicklungsumgebung finden

In Visual Studio Code und ähnlichen Programmen werden die Projektdateien meistens links angezeigt.

Hilfreiche Funktionen im Kontextmenü einer Datei sind:

• Pfad kopieren
• Relativen Pfad kopieren
• Im Explorer anzeigen
• Im Finder anzeigen
• Datei umbenennen
• Datei löschen

Wenn die KI eine bestimmte Datei berücksichtigen soll, kannst du den Dateinamen direkt nennen:

Ändere in index.html die Überschrift und passe in style.css die Schriftgröße an.

Viele KI-Erweiterungen unterstützen zusätzlich Datei-Verweise über ein @-Zeichen oder über automatisch eingebundene geöffnete Dateien.

Eine Webseite veröffentlichen

Für eine einfache HTML-Webseite reicht gewöhnlicher Webspace aus.

Du benötigst:

1. eine Domain,
2. ein Webhosting-Paket,
3. die Zugangsdaten des Providers,
4. einen Dateimanager oder ein Übertragungsprogramm,
5. deine Projektdateien.

Viele Provider stellen einen Dateimanager direkt im Browser bereit. Alternativ kann ein Programm wie FileZilla verwendet werden.

Nutze nach Möglichkeit eine verschlüsselte Verbindung über SFTP oder FTPS. Einfaches unverschlüsseltes FTP sollte vermieden werden.

Typischer Ablauf

1. Beim Provider anmelden.
2. Den Dateimanager öffnen oder die SFTP-Zugangsdaten kopieren.
3. Den Webordner öffnen.

Dieser Ordner kann beispielsweise heißen:

public_html

htdocs

httpdocs

www

4. index.html hochladen.
5. Zusätzliche Bilder, CSS- und JavaScript-Dateien ebenfalls hochladen.
6. Die eigene Domain im Browser öffnen.

Die Startdatei sollte normalerweise genau so heißen:

index.html

Wenn nur eine einzige Datei verwendet wird, besteht die Veröffentlichung häufig nur aus dem Hochladen dieser Datei.

Änderungen veröffentlichen

Wenn du später etwas veränderst:

1. die lokale Datei sichern,
2. eine neue Version erzeugen,
3. die neue Version im Browser testen,
4. die alte Datei auf dem Webserver ersetzen,
5. die Webseite neu laden.

Manchmal zeigt der Browser noch eine ältere Version aus seinem Zwischenspeicher. Dann hilft ein vollständiges Neuladen der Seite.

Was ohne Datenbank möglich ist

Eine reine HTML-App kann Daten im Browser speichern, beispielsweise Einstellungen, Ergebnisse oder eine persönliche Aufgabenliste.

Dafür kann JavaScript den lokalen Browserspeicher verwenden. Die Daten bleiben auf diesem Gerät und in diesem Browser. Sie werden nicht automatisch zwischen mehreren Personen oder Geräten geteilt.

Geeignet sind beispielsweise:

• persönliche Checklisten,
• gespeicherte Einstellungen,
• lokale Notizen,
• Spielstände,
• zuletzt verwendete Werte.

Vertrauliche Daten sollten dort nicht gespeichert werden.

Wann es komplizierter wird

Zusätzliche Technik wird benötigt, wenn eine Anwendung folgende Funktionen besitzen soll:

• Benutzerkonten,
• sichere Anmeldung,
• gemeinsame Daten mehrerer Personen,
• eine zentrale Datenbank,
• Bezahlfunktionen,
• automatische E-Mails,
• Uploads durch Besucher,
• vertrauliche Kundendaten,
• unterschiedliche Benutzerrechte.

Dann wird neben der sichtbaren Webseite ein sogenanntes Backend benötigt. Dieses läuft auf einem Server, verarbeitet Daten und schützt Zugänge.

Statische Webseiten liefern im Wesentlichen vorgefertigte Dateien aus. Dynamische Anwendungen erzeugen Inhalte anhand von Benutzern, Datenbanken oder Anfragen.

Wichtige Sicherheitsregeln

Keine Passwörter in den Code schreiben

Passwörter, geheime Schlüssel und private API-Schlüssel gehören niemals direkt in eine HTML- oder JavaScript-Datei.

Besucher können den ausgelieferten Quellcode untersuchen. Im Frontend gespeicherte Zugangsdaten oder API-Schlüssel können dadurch offengelegt und missbraucht werden.

Keine vertraulichen Daten zum Testen verwenden

Nutze für erste Prototypen erfundene Beispieldaten.

Verwende keine:

• Kundendaten,
• Gesundheitsdaten,
• Personalakten,
• Zugangsdaten,
• internen Unternehmensdokumente.

Ergebnisse selbst kontrollieren

KI-generierter Code kann Fehler, Sicherheitsprobleme und falsche Berechnungen enthalten.

Prüfe besonders:

• Berechnungen,
• Formulare,
• externe Verbindungen,
• gespeicherte Daten,
• mobile Darstellung,
• Barrierefreiheit,
• rechtliche Texte.

Öffentliche Webseiten rechtlich prüfen

Bei geschäftsmäßigen digitalen Angeboten können Informationspflichten gelten. Sobald personenbezogene Daten, Cookies, Analysewerkzeuge oder externe Dienste verwendet werden, müssen zusätzlich Datenschutzfragen geprüft werden.

Ein sinnvoller Lernweg

Beginne mit einem kleinen Projekt:

1. eine Idee,
2. eine HTML-Datei,
3. eine Vorschau,
4. drei Verbesserungen,
5. ein lokaler Test,
6. optional die Veröffentlichung.

Danach kannst du schrittweise weitergehen:

1. mehrere Dateien,
2. eigene Bilder,
3. Speicherung im Browser,
4. Veröffentlichung auf Webspace,
5. Versionsverwaltung,
6. Backend und Datenbank,
7. Benutzerkonten und Rechte.

Der wichtigste erste Schritt besteht darin, eine eigene Idee sofort als kleinen funktionierenden Prototyp umzusetzen.

Kurzfassung

1. Beschreibe deine Idee.
2. Bitte um eine einzelne Datei index.html.
3. Nutze nur HTML, CSS und JavaScript.
4. Öffne die Vorschau.
5. Teste alle Funktionen.
6. Bitte die KI um Verbesserungen.
7. Lade die Datei herunter.
8. Öffne sie durch einen Doppelklick.
9. Lade sie bei Bedarf auf deinen Webspace.
10. Verwende keine vertraulichen Daten oder geheimen Schlüssel.

Stand der Produktbezeichnungen und Funktionen ist der 11. Juli 2026.