Schulungsmodul 6 · Apps mit KI bauen

Eigene Apps bauen –
ohne Programmierkenntnisse

Mit KI könnt ihr heute in wenigen Stunden funktionierende Web-Apps, Tools und Dashboards bauen – ganz ohne Code schreiben zu können. Das nennt sich Vibe Coding.

Was ist möglich? Drei Einstiegswege No-Code-Tools Vibe Coding Erste App bauen App-Ideen Veröffentlichen

Der neue Standard

Was ist heute ohne Programmierkenntnisse möglich?

KI hat die Hürde zum App-Entwickeln dramatisch gesenkt. Was früher Monate und ein Entwickler-Team brauchte, entsteht heute in Stunden – wenn ihr wisst, wie ihr fragt.

🚀
Was „Vibe Coding" bedeutet

Der Begriff stammt vom KI-Forscher Andrej Karpathy: Ihr beschreibt in normalem Deutsch, was eure App tun soll – die KI schreibt den Code. Ihr testet, gebt Feedback, die KI korrigiert. Kein Wissen über Programmiersprachen nötig. Das Ergebnis ist echter, funktionierender Code – den ihr nicht selbst versteht, aber nutzen und erweitern könnt.

Was ihr bauen könnt
  • ✓Einfache Web-Apps und interaktive Tools
  • ✓Dashboards und Daten-Visualisierungen
  • ✓Formulare mit Logik und automatischen Mails
  • ✓KI-Chatbots mit eigenem Wissen
  • ✓Kalkulatoren und Angebotsrechner
  • ✓Interne Tools für das Team
  • ✓Landing Pages und Micro-Sites
Was noch nicht funktioniert
  • ✗Komplexe Apps mit vielen Nutzern gleichzeitig
  • ✗Hochsichheits-Anwendungen (Banking, Medizin)
  • ✗Sehr komplexe Datenbank-Architekturen
  • ~Mobile Apps (möglich, aber aufwändiger)
  • ~Wartung und Weiterentwicklung ohne Verständnis

Für jeden Startpunkt

Drei Wege – je nach Aufwand und Technikaffinität

Ihr müsst nicht sofort Code schreiben. Es gibt einen Weg für jeden Einstiegslevel.

Stufe 1 · Einsteiger

No-Code-Plattformen

Fertige Bausteine per Drag & Drop zusammenstellen. Kein Code, keine KI-Kenntnisse nötig.

  • Formulare, Datenbanken, Workflows visuell bauen
  • Fertige Templates als Startpunkt
  • Sofort online, ohne Server
  • Einschränkungen bei individuellen Anpassungen
Glide Softr Bubble Airtable
Stufe 2 · Vibe Coding

KI schreibt den Code

Ihr beschreibt die App in Deutsch – die KI schreibt HTML, CSS und JavaScript. Ihr testet und gebt Feedback.

  • Vollständige Kontrolle über das Ergebnis
  • Keine Einschränkungen durch Plattformen
  • Echter Code – portierbar und erweiterbar
  • Erfordert: testen, iterieren, nachhaken
Claude v0 (Vercel) Bolt.new Lovable
Stufe 3 · Fortgeschritten

Claude Code & Cursor

KI-gestützte Entwicklungsumgebungen für komplexere Projekte. Höchste Qualität und Flexibilität.

  • Vollständige Codebase wird von KI verwaltet
  • Multifile-Projekte, APIs, Datenbanken
  • Technisches Grundverständnis hilfreich
  • Für richtige, produktive Anwendungen
Claude Code Cursor GitHub Copilot

Stufe 1 – kein Code nötig

No-Code-Tools für die Beratungspraxis

Diese Tools brauchen weder Programmierung noch KI – ihr baut per Drag & Drop. Ideal für schnelle Lösungen und Prototypen.

📱

Glide

APPS AUS GOOGLE SHEETS

Verwandelt eine Google Sheets-Tabelle in eine mobile App. Kein Code, keine Server. Ideal für interne Datenbanken, Projektlisten oder Kundenverwaltung als App.

Beratungseinsatz: Projektstatus-App fürs Team, Kunden-Nachschlagewerk, interne Checklisten-App.
→ glide.app
🧩

Softr

WEB-APPS AUS AIRTABLE

Baut Web-Apps und Portale auf Basis von Airtable-Datenbanken. Mit Nutzerlogins, Formularen und Dashboards. Deutlich mächtiger als Glide für komplexere Datenstrukturen.

Beratungseinsatz: Kunden-Portal mit Projektstatus, internes Wissens-Wiki, Lead-Verwaltung mit Zugangsschutz.
→ softr.io
🫧

Bubble

VOLLSTÄNDIGE WEB-APPS

Mächtigste No-Code-Plattform überhaupt – vollständige Web-Apps mit Datenbank, Nutzerkonten, Zahlungen und APIs, alles ohne Code. Lernkurve ist steiler, aber kaum Grenzen.

Beratungseinsatz: Angebotsrechner für Kunden, Buchungsportal, komplexes Verwaltungssystem für eine Branche.
→ bubble.io
🗃️

Airtable

DATENBANK + INTERFACES

Mehr als eine Tabelle – eine relationale Datenbank mit visuellen Interfaces, Automationen und API. Verbindet sich mit fast allem. Das Fundament für viele No-Code-Stacks.

Beratungseinsatz: CRM, Projektverwaltung, Content-Kalender, Angebotsstruktur mit verlinkten Datensätzen.
→ airtable.com
📋

Tally / Typeform

SMARTE FORMULARE

Formulare, die sich wie Gespräche anfühlen. Mit Verzweigungslogik, Datei-Uploads, Zahlungen und automatischen Benachrichtigungen. Tally ist kostenlos, Typeform optisch stärker.

Beratungseinsatz: Kunden-Onboarding-Formular, Briefing-Fragebogen, Feedback-Erhebung, Bewerbungsformular.
→ tally.so
🎨

Gamma / Framer

KI-PRÄSENTATIONEN & WEBSITES

Gamma erstellt Präsentationen und Dokumente aus Text. Framer baut vollständige Websites mit KI – optisch auf Agentur-Niveau, ohne Design- oder Coding-Kenntnisse.

Beratungseinsatz: Professionelle Unternehmenswebsite, Landing Page für ein Angebot, Pitch-Deck für Investoren.
→ gamma.app · → framer.com

Stufe 2 – KI schreibt den Code

Vibe Coding – so funktioniert es

Ihr beschreibt, die KI baut. Kein Vorwissen über Programmierung nötig – nur die Fähigkeit, präzise zu beschreiben, was ihr wollt. Das ist letztlich: gutes Prompten.

🎵
Die beste Plattform für Einsteiger: Claude Artifacts

Direkt in claude.ai lassen sich HTML/CSS/JavaScript-Apps erstellen, die sofort im Browser laufen. Kein Server, kein Account, keine Installation. Ihr seht das Ergebnis unmittelbar – und könnt sofort nachbessern lassen.

1
Die App in einem Satz beschreiben

Startet mit einer klaren Beschreibung: Was soll die App tun? Für wen ist sie? Was sind die wichtigsten Funktionen? Je konkreter, desto besser das erste Ergebnis.

Beispiel-Prompt zum Kopieren Erstelle eine Web-App als einzelne HTML-Datei: ein Angebots-Kalkulator für eine Unternehmensberatung. Der Nutzer gibt ein: Projekttyp (Dropdown: Strategie / Prozess / Digital), Stundensatz (Zahl), geschätzte Stunden, Reisekosten. Die App berechnet automatisch: Nettopreis, MwSt., Bruttopreis. Dazu ein Button "Als PDF drucken". Design: dunkelblau, professionell, mobile-freundlich.
Tipp: „Als einzelne HTML-Datei" sagen – dann bekommt ihr eine Datei, die ihr sofort öffnen und teilen könnt.
2
Ergebnis testen und Feedback geben

Claude zeigt das Ergebnis direkt. Testet es im Vorschau-Fenster. Was fehlt? Was ist falsch? Beschreibt konkret, was geändert werden soll – kein technisches Wissen nötig.

Tipp: „Die Schaltfläche ist zu klein", „Der Titel soll zentriert sein", „Füge ein Logo-Feld oben links hinzu" – das sind ausreichende Anweisungen.
3
Iterieren bis es passt

3 bis 8 Iterationen sind normal. Bei jedem Schritt wird die App besser. Beschreibt immer nur eine oder zwei Änderungen gleichzeitig – das gibt präzisere Ergebnisse als „ändere alles".

4
Code herunterladen

Klickt oben rechts im Artifact auf „Export" oder kopiert den gesamten Code. Die resultierende HTML-Datei könnt ihr lokal öffnen, per E-Mail teilen oder auf einem Server hochladen.

Tipp: Speichert zwischendurch den aktuellen Stand – „Kopiere den aktuellen vollständigen Code" – bevor ihr große Änderungen macht.
5
Erweiterte Tools: v0, Bolt, Lovable

Für komplexere Apps mit Datenbank, Nutzerlogins oder mehreren Seiten: v0.dev (Vercel), bolt.new und lovable.dev bieten vollständige App-Generierung mit direktem Deployment.

Tipp: v0.dev ist besonders stark bei modernen React-Interfaces. Bolt.new deployt direkt auf StackBlitz und gibt einen öffentlichen Link.

Jetzt direkt loslegen

Fertige Prompts – eure erste App in 10 Minuten

Diese Prompts funktionieren direkt in Claude. Einfach kopieren, einfügen, anpassen und auf „Senden" klicken.

Angebots-Kalkulator

Einstieg · 10 Min
Erstelle eine Web-App als einzelne HTML-Datei. Es ist ein Angebots-Kalkulator für eine Unternehmensberatung. Felder: Projekttyp (Dropdown: Strategie, Prozess, Digitalisierung, Sonstiges), Stundensatz in Euro, geschätzte Projektstunden, Reisekosten pauschal in Euro. Ausgabe: Nettopreis, 19% MwSt., Bruttopreis – automatisch berechnet. Drucken-Button. Design: dunkelblau, professionell, modern, mobile-freundlich.

Projekt-Statusboard

Einstieg · 15 Min
Erstelle eine HTML-Datei: ein Projekt-Statusboard. Nutzer kann Projekte hinzufügen mit: Projektname, Kunde, Status (Ampel: rot/gelb/grün), nächste Deadline, kurze Notiz. Alle Projekte werden als Karten angezeigt, sortierbar nach Status. Änderungen werden im Browser gespeichert (localStorage). Design: dunkel, professionell.

Meeting-Timer

Einfach · 5 Min
Erstelle eine HTML-Seite: ein Meeting-Kostenrechner. Eingabe: Anzahl Teilnehmer, durchschnittlicher Stundensatz pro Person, Meeting-Dauer in Minuten. Ergebnis: laufende Kosten in Euro, die sich in Echtzeit aktualisieren während ein Timer läuft. Start/Stop-Button. Großes Display. Design: dunkelblau, minimal.

SWOT-Generator

Mittel · 20 Min
Erstelle eine Web-App als HTML-Datei: einen SWOT-Board. Vier Quadranten: Stärken, Schwächen, Chancen, Risiken. In jedem Quadrant können Punkte per Klick hinzugefügt und entfernt werden. Oben: Unternehmensname eingeben. Unten: Button "Als PDF drucken". Die Daten werden im Browser gespeichert. Design: professionell, farbkodiert je Quadrant.

Kunden-Briefing-Formular

Einstieg · 15 Min
Erstelle eine HTML-Seite: ein professionelles Briefing-Formular für neue Beratungskunden. Felder: Unternehmensname, Branche, Anzahl Mitarbeiter, Hauptproblem (Freitext), gewünschtes Ergebnis (Freitext), Zeitrahmen (Dropdown), Budget-Rahmen (Dropdown), Kontaktperson + E-Mail. Am Ende: alle Antworten übersichtlich zusammengefasst anzeigen + Drucken-Button. Design: dunkelblau, seriös.

Entscheidungsmatrix

Mittel · 25 Min
Erstelle eine Web-App als HTML-Datei: eine interaktive Entscheidungsmatrix. Nutzer kann Optionen und Kriterien eingeben. Zu jedem Kriterium: Gewichtung (1-5) und Bewertung jeder Option (1-5). Die App berechnet automatisch den gewichteten Gesamtscore. Ergebnis: farbkodierte Tabelle + klarer Gewinner hervorgehoben. Druckfunktion. Design: professionell.

Inspiration

App-Ideen für die Beratungspraxis

Alles realisierbar mit Vibe Coding in Claude oder einem No-Code-Tool – von einfach bis ambitioniert.

💰

Stundensatz-Rechner

Gibt man Zielgehalt, Urlaubstage, Overhead und Auslastung ein – berechnet den Mindest-Stundensatz. Mit Vergleichsvisualisierung.

Einsteiger
📊

Projekt-Zeiterfassung

Einfaches Timer-Tool pro Projekt mit automatischer Tagesauswertung und Wochenübersicht. Exportierbar als CSV.

Einsteiger
🎯

Kunden-ROI-Rechner

Kunden geben ihre Kennzahlen ein, ihr gebt den Beratungsaufwand ein – die App zeigt den erwarteten ROI der Zusammenarbeit.

Mittel
📋

Onboarding-Checkliste

Interaktive Checkliste für neue Kundenprojekte. Mit Fortschrittsbalken, Verantwortlichkeiten und E-Mail-Reminder-Funktion.

Einsteiger
🤖

KI-FAQ-Chatbot

Ein Chatbot, der die häufigsten Fragen eurer Kunden beantwortet – mit eurer eigenen Wissensbasis hinterlegt. Einbettbar auf jeder Website.

Mittel
📈

Reifegradmodell-Assessment

Kunden beantworten einen Fragebogen, die App berechnet den Reifegrad in verschiedenen Dimensionen und zeigt ein Netz-Diagramm.

Mittel
🗺️

Roadmap-Generator

Aus Eingaben zu Projekten, Meilensteinen und Zeiträumen wird automatisch eine visuelle Timeline generiert – exportierbar als PNG.

Fortgeschritten
🔍

Wettbewerbs-Scorecard

Mehrere Wettbewerber nach eigenen Kriterien bewerten. App erstellt automatisch eine visuelle Radar-Chart-Visualisierung.

Mittel

Die App veröffentlichen

Von der Datei zur echten Web-App

Ihr habt eine fertige HTML-Datei – jetzt soll sie online erreichbar sein. Hier sind die einfachsten Wege.

🟠

Netlify Drop

EINFACHSTER WEG · KOSTENLOS

HTML-Datei einfach auf die Netlify-Seite ziehen – fertig. Sofort online, eigene URL, HTTPS, kostenlos. Dauert unter einer Minute.

Ideal für: schnell teilen, Prototyp zeigen, interne Tools.
→ app.netlify.com/drop
▲

Vercel

FÜR REACT-APPS · KOSTENLOS

Wenn ihr mit v0.dev oder Bolt eine React-App gebaut habt, ist Vercel das natürliche Deployment-Ziel. GitHub-Repo verbinden – bei jedem Push automatisch online.

Ideal für: echte Web-Apps, die weiterentwickelt werden sollen.
→ vercel.com
📄

GitHub Pages

KOSTENLOS · FÜR STATISCHE SEITEN

GitHub-Konto erstellen, Repository anlegen, HTML hochladen – GitHub Pages macht die Seite automatisch öffentlich erreichbar. Kostenlos, keine Limits.

Ideal für: Dokumentationen, einfache Tools, langfristige Verfügbarkeit.
→ pages.github.com
🔗

Teilen ohne Server

SOFORT · NULL SETUP

Für rein interne Nutzung: HTML-Datei einfach per E-Mail oder Google Drive teilen. Empfänger öffnet sie im Browser – fertig. Kein Server, keine URL, kein Setup nötig.

Ideal für: interne Tools, Kalkulatoren, die nicht öffentlich sein sollen.
🎯
Der schnellste Weg zur ersten echten App

Einen der Prompts von oben kopieren → in claude.ai einfügen → Ergebnis testen → ein bis zwei Mal nachjustieren → HTML-Datei kopieren → auf Netlify Drop ziehen. Von Idee bis live: unter 30 Minuten.