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 Agentic Engineering

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
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
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

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.

Das nächste Level

Von Vibe Coding zu Agentic Engineering

Vibe Coding bringt euch zum Prototypen. Wer komplexere, belastbare Tools bauen will, braucht den nächsten Schritt — und der hat weniger mit Technik zu tun als erwartet.

🧠
Die Decke des Vibe Codings

Irgendwann passiert es: Die App funktioniert nicht mehr, man repariert eine Sache, eine andere bricht. Man hat 50 Prompts geschrieben, versteht aber nicht was drin steckt. Das ist keine Pech-Frage und kein schlechtes Tool — das ist die natürliche Grenze des reinen Beschreibens. Andrej Karpathy, der den Begriff Vibe Coding geprägt hat, nennt das Nächste: Agentic Engineering.

❌ Der Prompter

„Baue mir ein Dashboard."

Startet sofort, iteriert nach Gefühl, repariert was kaputt geht. Funktioniert für einfache Dinge — skaliert nicht.

✓ Der Director

„Baue ein Dashboard das diese drei Metriken anzeigt, Daten aus dieser Quelle bezieht, alle 30 Sekunden aktualisiert und einen Ladezustand zeigt."

Definiert das Ergebnis bevor die KI überhaupt etwas berührt.

Die drei Prinzipien des Agentic Engineering

1
Definition vor Aktion

Bevor ihr ein Tool öffnet: Was soll der Nutzer am Ende tun können? Was ist das messbare Ergebnis? Wer kann das nicht in zwei Sätzen beschreiben, ist noch nicht bereit zu prompten.

Für Berater besonders wichtig: Definiert exakt die Felder, die Logik und die Ausgabe — bevor der erste Prompt gesendet wird. Das spart die meiste Zeit.
2
Ein Job nach dem anderen

KI-Agenten scheitern an Mammutaufgaben. Zerlegt komplexe Projekte in kleine, abgeschlossene Schritte: erst das Grundgerüst, dann die Berechnung, dann das Design. Jeder Schritt ist testbar.

Statt: „Baue den kompletten Angebotsrechner" → Erst: „Baue das Formular mit drei Feldern" → Test → Dann: „Füge die Berechnung hinzu"
3
Validieren vor dem nächsten Schritt

Jeder Schritt wird getestet bevor der nächste Prompt gesendet wird. Fehler die sich unbemerkt festsetzen, sind das eigentliche Problem — nicht die KI.

Nach jedem Baustein: Im Browser testen, alle Funktionen prüfen, erst dann weitermachen. 10 Minuten Test sparen oft 2 Stunden Reparatur.
🎯
Was das für die Beratungspraxis bedeutet

Die erfolgreichsten KI-Nutzer der nächsten Jahre werden nicht die besten Programmierer sein — sondern die klarsten Denker. Wer präzise definieren kann was ein Tool leisten soll, wer Anforderungen strukturiert beschreibt und Ergebnisse konsequent validiert: das sind Beratungskompetenzen, die direkt auf KI-Tool-Entwicklung übertragbar sind.