Zum Inhalt springen

MVP mit KI bauen: der komplette Workflow von Idee bis Launch

Der komplette KI-MVP-Workflow mit Namen: Clarity, Design, Validate, Build, Ship. Mit kopierbaren Prompts, Tool-Preisen mit Stand Oktober 2026, Sicherheits-Leitplanken für KI-Code und dem DSGVO-Check, belegt mit eigenen Daten aus 454 KI-Apps im DACH-Raum.

Von Tobias ZublerAktualisiert am 24 Min. Lesezeit

Horizontale Timeline des Clarity-before-Code Sprints mit fünf nummerierten Phasen: Phase 1 Clarity (1–2 Tage, Lupen-Icon), Phase 2 Design (2–3 Tage, Cursor-Icon), Phase 3 Validate (2–5 Tage, Sprechblasen-Icon), Phase 4 Build (5–10 Tage, Terminal-Icon), Phase 5 Ship (1–2 Tage, Raketen-Icon). Slate-blaue Knoten, verbunden durch gepunktete Flow-Linien, mit Legende für Flow und Duration — Infografik im decivo-Editorial-Stil.

Kurz gesagt

  • Ein MVP mit KI entsteht in 2 bis 4 Wochen statt 4 bis 7 Monaten, wenn ihr dem Clarity-before-Code Sprint folgt.
  • Fünf Phasen: Clarity, Design, Validate, Build, Ship. Niemand schreibt Code, bevor Problem und Prototyp geprüft sind.
  • Kosten: Tools rund 45 € bis 220 € im Monat (Claude, Cursor oder Lovable, Supabase, Hosting). Mit eigener Arbeitszeit landen Teams, die den Workflow beherrschen, bei 5.000 bis 15.000 €.
  • Sicherheit: Von 454 KI-Apps aus dem DACH-Raum bekamen im Radar-Lauf „Panel 2026-10-01“ nur 18 % (83 von 454) das Urteil Go. Row Level Security, Schlüssel nur auf dem Server und eine CSP gehören in jeden Build.
  • DSGVO-Check: Supabase in der EU plus DPA, Vercel-Region fra1, Schriften lokal, Tracking erst nach Einwilligung. Keine Rechtsberatung, aber die häufigsten Fehler sind vermeidbar.

Warum 2026 alles ändert, und was sich wirklich beschleunigt hat

Drei Generationen von MVP-Workflows

Generation 1 · 2010–2018

Code-First

Jede Zeile von Hand. MVPs brauchen 4–6 Monate, Teams ab drei Personen.

Ruby on Rails, Django, React

Generation 2 · 2018–2023

No-Code

Drag-and-Drop-Builder. MVPs in 4–8 Wochen, aber Skalierung und Kontrolle begrenzt.

Bubble, Webflow, Softr

Generation 3 · 2023–heute

AI-native

KI schreibt Code, Mensch reviewt und deployt. MVPs in 2–4 Wochen mit vollem Stack.

Claude Code, Cursor, v0, Lovable

Der Clarity-before-Code Sprint: das 5-Phasen-Framework

Kern-Definition (zitierbar)

„Der Clarity-before-Code Sprint ist ein 5-Phasen-Framework für KI-gestützte MVP-Entwicklung, das Problem-Scope, Design-Validierung und Code-Produktion so eng verzahnt, dass ein funktionales MVP in 2 bis 4 Wochen entsteht — statt 4 bis 7 Monate in klassischen Setups.“

Die fünf Phasen auf einen Blick

PhaseNameZielToolsOutputZeit
1ClarityProblem definieren, Features priorisierenClaude, ChatGPT, Notion1-Seiten Product Brief + Feature-Map1–2 Tage
2DesignKlickbarer Prototyp im ZielstyleFigma, Figma Make, v0Testbarer High-Fidelity-Prototyp2–3 Tage
3ValidateAnnahmen mit echten Nutzern prüfenMaze, Lookback, CalendlyPriorisierte Änderungsliste2–5 Tage
4BuildFunktionaler Code mit echtem BackendClaude Code, Cursor, SupabaseDeploy-bereites MVP5–10 Tage
5ShipLive gehen, messen, iterierenVercel, Plausible, PostHogLive-Produkt mit Feedback-Pipeline1–2 Tage

Phase 1. Clarity: Problem & Features mit KI definieren

MoSCoW für MVP-Features

  • Must-Have: Ohne diese Features funktioniert der Kern-Use-Case nicht. Maximal 3.
  • Should-Have: Stark, aber verzichtbar. Kommen in V1.1 nach dem Launch.
  • Could-Have: Nice-to-have, landen im Backlog. Oft wird klar: braucht niemand.
  • Won't-Have: Explizit ausgeschlossen. Dokumentiert, damit niemand in Phase 4 „schnell noch reinzieht“.

Prompt-Tresor: Feature-Map aus Problembeschreibung

Dieser Prompt ist der erste Einsatz einer LLM im Sprint — und der entscheidende. Kopiert ihn, füllt die vier Platzhalter, und nutzt das Ergebnis als Diskussionsgrundlage, nicht als finale Wahrheit:

Du bist Senior Product Owner mit 10 Jahren Startup-Erfahrung.

Kontext:
- Problem: [1 SATZ — was geht Nutzern heute auf die Nerven?]
- Zielgruppe: [WER hat das Problem — so spezifisch wie möglich]
- Heutige Lösung: [WIE lösen sie es aktuell? Excel? Konkurrenzprodukt?]
- Mein USP: [WAS macht unsere Lösung anders?]

Aufgabe:
1. Formuliere 5 Kern-Hypothesen, die das MVP belegen oder widerlegen muss.
2. Erstelle eine MoSCoW-priorisierte Feature-Map (max. 3 Must-Haves).
3. Benenne die riskanteste Annahme — das, was bei Fehlschlag alles andere irrelevant macht.
4. Gib mir drei Wege, diese Annahme in unter 5 Tagen mit echten Menschen zu testen.

Format: Markdown, Tabellen wo sinnvoll.

Phase 2. Design: klickbarer Prototyp in Figma

Drei Wege zum Prototyp

Figma klassisch

Auto-Layout, Komponenten, Variants. Volle Kontrolle, höchste Lernkurve.

Figma Make / v0

Generative Tools, die aus Text-Prompts oder Screenshots Prototypen bauen. Schneller Start, weniger Feinschliff.

Klick-Prototyp auf Papier

Für frühe Test-Runden legitim. Nicht hübsch, aber testet die Struktur statt der Optik.

Prompt-Tresor: Copy-Audit für Prototyp-Screens

Sobald die Screens stehen, lauft ihr die Texte durch dieses Review — idealerweise mit Claude oder ChatGPT auf dem zweiten Monitor:

Du bist UX-Writer. Ich poste dir Screenshots aus einem Figma-Prototyp für ein MVP.

Für jeden Screen bewerte:
1. Versteht ein erstmaliger Nutzer in unter 5 Sekunden, was hier passiert?
2. Gibt es Fachjargon, der in die Nutzersprache übersetzt werden muss?
3. Ist der primäre CTA eindeutig — und löst er das Bedürfnis des Screens ein?

Format pro Screen:
- Verständlichkeit (1–5) + 1-Satz-Begründung
- Konkrete Textänderungen mit Vorher/Nachher
- Ein Risiko-Flag, falls der Screen den Flow bricht.

Phase 3. Validate: UX-Test mit echten Nutzern

Vor-Check mit AI-Personas (optional, aber stark)

Bevor ihr echte Menschen einladet, nehmt eine Stunde und lasst drei KI-Personas über den Prototyp laufen. Das ersetzt keine echten Nutzer — aber es findet die dümmsten Fehler, bevor fünf Kalendertermine blockiert sind.

Prompt-Tresor: AI-Persona Prototyp-Review

Du bist [PERSONA — z.B. „Gründerin eines Handwerksbetriebs, 42, wenig Tech-Affinität"].

Du siehst diesen Prototyp zum ersten Mal: [SCREENSHOT oder Figma-Link].

Laufe durch den Flow und schreibe mir in First-Person:
1. Was verstehst du auf dem ersten Screen nicht?
2. Was würdest du als erstes klicken — und warum?
3. An welcher Stelle würdest du abbrechen?
4. Was fehlt dir, um dem Produkt zu vertrauen?

Kein Marketing-Sprech. Schreib wie du dir selbst ein Bier bestellst.

Der echte Nutzertest

Fünf Nutzer, jeder einzeln, 30 Minuten Zoom, Bildschirmaufnahme mit Einverständnis. Die drei Fragen, die den meisten Erkenntnisgewinn bringen:

  1. 01„Zeig mir, wie du [KERN-AUFGABE] lösen würdest.“ — Beobachten, nicht helfen.
  2. 02„An welcher Stelle warst du unsicher, was als nächstes passiert?“ — Nach jedem Flow.
  3. 03„Was müsste dieses Produkt tun, damit du es heute kaufen würdest?“ — Zum Abschluss.

Output: eine priorisierte Änderungsliste — getrennt nach „vor dem Build anpassen“ und „ins V1.1-Backlog“. Änderungen, die drei von fünf Nutzer nennen, sind Must-Fix.

Phase 4. Build: funktionaler Code mit Claude Code und Cursor

Der Tech-Stack, den wir 2026 standardmäßig wählen

Frontend

Next.js 16 + Tailwind CSS v4

React Server Components, gutes DX-Tooling, KI-Tools sind optimal darauf trainiert.

Backend

Supabase (Postgres + Auth + Storage)

DSGVO-Region in Frankfurt, Auth out-of-the-box, Row Level Security.

Hosting

Vercel (Region fra1)

Edge-Deployment, Preview-URLs, automatische Vorschau pro Commit.

AI-Coding

Claude Code (Terminal) + Cursor (IDE)

Autonome Tasks in Claude Code, interaktives Pair-Programming in Cursor.

Wann Claude Code, wann Cursor?

  • Claude Code für: neue Features, Refactorings, Test-Suites, alles was klare Task-Beschreibung hat.
  • Cursor für: Debugging, UI-Feinschliff, Tailwind-Anpassungen, Mehrfach-Edits in kurzer Folge.

Prompt-Tresor: CLAUDE.md-Boilerplate für ein neues MVP

Der erste Commit jedes Projekts: eine CLAUDE.md im Repo-Root, die Claude Code den Kontext gibt, den sonst niemand schreibt. Diese Vorlage schont euch in jedem Feature-Loop einen halben Tag Erklärung:

# Projekt: [NAME]

## Kontext
- Produkt: [1 Satz, was es tut]
- Zielgruppe: [Wer nutzt es, welches Problem löst es]
- Aktuelle Phase: MVP (Clarity-before-Code Sprint, Phase 4)

## Tech-Stack
- Framework: Next.js 16 App Router + TypeScript strict
- Styling: Tailwind CSS v4 mit CSS-Variablen in globals.css
- Backend: Supabase (EU-Region), Row Level Security auf allen Tabellen
- Auth: Supabase Auth mit E-Mail + Magic Link
- Testing: Vitest + Playwright für Flows

## Konventionen
- Komponenten unter src/components/
- Server Actions statt API Routes, wenn möglich
- Keine Kommentare im Code, die erklären WAS — nur WARUM bei echten Überraschungen
- Strings für UI immer über Dictionary in src/dictionaries/de.ts

## Was NICHT zu tun
- Keine neuen Dependencies ohne Rückfrage
- Keine strukturellen Umbauten ohne Plan-Modus
- Kein Auskommentieren — löschen, wenn Code tot ist

Prompt-Tresor: Supabase Row Level Security in 3 Minuten

Ich baue eine Supabase-Tabelle "[TABELLE]" mit den Spalten:
[SPALTEN mit Typen].

Generiere mir:
1. Die CREATE TABLE Statement mit allen Constraints.
2. Row Level Security Policies für:
   - SELECT: Nutzer sieht nur eigene Zeilen (user_id = auth.uid())
   - INSERT: Nutzer kann nur mit eigenem user_id inserten
   - UPDATE: Nur eigene Zeilen, nur bestimmte Felder
   - DELETE: Nur eigene Zeilen
3. Einen Seed-Eintrag für lokale Tests.

Format: SQL-Block, sofort in Supabase Editor einfügbar.

Sicherheits-Leitplanken: was KI-Code fast nie von allein richtig macht

Phase 5. Ship: Deploy, Analytics, die ersten 48 Stunden

Der Prelaunch-Check in 6 Punkten

  • 1Eigene Domain und HTTPS gesetzt (Vercel erledigt das Zertifikat automatisch)
  • 2Impressum und Datenschutzerklärung von jeder Seite aus verlinkt. Gesetzlich verlangt, auch für MVPs; im Radar fehlten die Pflichtangaben sichtbar verlinkt bei 16 % (71 von 454) der Apps
  • 3Analytics eingebunden, die ohne Einwilligung auskommen oder erst nach Einwilligung laden (z. B. Plausible, PostHog in der EU)
  • 4Fehler-Logging aktiv: mindestens strukturierte Logs, besser GlitchTip oder Sentry
  • 5Ein Feedback-Kanal: ein Button „Was fehlt dir?“, die Antworten landen direkt in eurem Postfach
  • 6Ein letzter Außen-Check: Security-Header, Fremd-Hosts, Tracker vor Einwilligung. Genau das prüft der decivo Scan

Die ersten 48 Stunden nach Launch

Resonanz-Messen passiert in drei Schritten: Minute 0 bis Stunde 24 ist Bug-Fixing-Zeit, Stunde 24 bis Stunde 48 ist Conversion-Messung, ab Tag 3 beginnt die Iterations-Schleife. Wer in den ersten 48 Stunden radikale Features nachschiebt, verwirrt die ersten Nutzer und überfordert das eigene System.

MVP und DSGVO: Supabase, KI-Tools und EU-Server richtig einstellen

Supabase

Projektregion Frankfurt (eu-central-1) oder Dublin (eu-west-1) wählen + DPA über supabase.com/dashboard/org/_/legal anfordern.

Vercel

Production-Region fra1 setzen. Default ist iad1 (Washington) — Daten verlassen sonst die EU.

Analytics

Plausible (EU-gehostet) oder PostHog mit EU-Hosting. Google Analytics braucht in Deutschland eine Einwilligung, bevor das Skript lädt.

Schriften

Google Fonts lokal ausliefern statt zur Laufzeit von Google zu laden. KI-Builder binden sie oft per Link ein; im Radar betraf das 36 % (165 von 454) der Apps.

Einwilligung

Tracker und Marketing-Pixel erst nach dem Klick auf „Akzeptieren“ laden, nicht schon beim Seitenaufruf. Das im Browser-Netzwerk-Tab nachprüfen.

KI-Tools

Keine personenbezogenen Nutzerdaten in Claude- oder ChatGPT-Prompts. Für die Code-Generierung reichen synthetische Testdaten.

Das ist keine Rechtsberatung. Für die konkrete Compliance eures Produkts — besonders bei Gesundheits-, Finanz- oder Kinderdaten — holt eine Stunde mit einem Datenschutzexperten. Die Stunde zahlt sich beim ersten DSGVO-Anruf zehnfach aus.

Was 454 KI-Apps beim Launch falsch machen: eigene Daten

BefundAnteil
Keine Content-Security-Policy98 % (444 von 454)
Google Fonts zur Laufzeit geladen36 % (165 von 454)
Daten an Drittland-Dienste (Basis: Apps mit Browser-Lauf)33 % (130 von 392)
Browser schreibt direkt in die Datenbank24 % (109 von 454)
Impressum oder Datenschutzerklärung nicht sichtbar verlinkt16 % (71 von 454)
US-Tracker (Google Analytics/Tag Manager, Meta Pixel, Hotjar, Segment) im ausgelieferten Code eingebunden16 % (71 von 454)
Tracker feuern vor der Einwilligung (Basis: Apps mit Browser-Lauf)15 % (58 von 392)

Was kostet ein MVP mit KI? Agentur, Sprint und Tools im Vergleich

Zeit- und Kostenvergleich pro Phase

PhaseKlassische AgenturClarity-before-Code SprintErsparnis
Konzeption & Feature-Scope2–3 Wochen1–2 Tage~80 %
UI/UX Design & Prototyp3–4 Wochen2–3 Tage~85 %
UX-Validierung2 Wochen (oft übersprungen)2–5 TageWird überhaupt gemacht
Entwicklung2–4 Monate5–10 Tage~85 %
Deployment & Analytics1–2 Wochen1–2 Tage~90 %
Gesamt4–7 Monate / 30.000–80.000 €2–4 Wochen / 5.000–15.000 €~80 % Zeit · ~75 % Kosten

Arbeitszeit bleibt der größte Kostenblock. Der Sprint verkürzt sie deutlich, ersetzt sie aber nicht.

Tool-Kosten pro Monat (Stand 20. Oktober 2026)

ToolTarif für ein MVPPreis
Claude (inkl. Claude Code)Pro, bei viel Agent-Arbeit Max20 $ / ab 100 $
CursorPlus oder Premium8 $ / 30 $
SupabaseFree zum Start, Pro für den Launch0 $ / ab 25 $ zzgl. Compute
VercelPro (Hobby ist nur für private, nicht-kommerzielle Projekte)20 $
PlausibleStarterab 9 $

Preise laut Anbieterseiten, ohne Steuern, Änderungen vorbehalten. Der MVP-Kostenrechner rechnet für den DIY-Weg mit 45 € bis 220 € im Monat, inklusive Credit-Überschreitungen bei Lovable, Bolt oder Replit.

Vom MVP zum V1: was nach dem Launch kommt

1

Kein Interesse

2

Interesse mit Korrekturbedarf

3

Product-Market-Fit

Wer diesen Workflow macht, und wann ihr decivo braucht

Wer den Workflow selbst lernen will

Macht es selbst — mit unseren Prompts

Dieser Artikel enthält alle Bausteine. Plant zwei Wochen für das erste Projekt ein und rechnet 30 % Lernsteuer ein. Beim zweiten Projekt greift der Workflow.

Wer das Ergebnis braucht, nicht die Lernkurve

decivo komprimiert den Sprint in festpreisige Module

Innovation Workshop für Phase 1 (7.500 €), Clickable Prototype für Phase 2 (3.500 €), UX Validation Loop für Phase 3 (1.350 € je Loop), Code Prototype für Phase 4 (12.500 €). Jedes Modul zum Festpreis und auf ein Ergebnis terminiert, nicht nach Stunden.

Wer schon einen KI-Prototyp hat

Erst prüfen, dann gezielt reparieren

Der decivo Scan prüft eure App kostenlos von außen. Danach schließt die Sofort-Absicherung alle offenen Lücken hoher Schwere zum Festpreis von 540 €; der Reparaturplan (349 €) zeigt jede Fundstelle mit Lösung. Alle Wege stehen unter Vibe Code Rescue.

Häufige Fragen zum KI-MVP-Workflow

Kann man mit KI ein MVP bauen?
Wie lange dauert es, ein MVP mit KI zu bauen?
Was kostet ein MVP mit KI?
Claude Code oder Cursor: was ist besser für ein MVP?
Kann ich ein MVP mit KI ohne Programmierkenntnisse bauen?
Ist KI-generierter Code sicher genug für den Launch?
Ist Supabase DSGVO-konform nutzbar?

Ihr habt den Workflow, wir haben das Team

Wenn ihr den Clarity-before-Code Sprint selbst fahren wollt, liefert dieser Artikel den kompletten Bauplan. Wenn ihr lieber das Ergebnis haben wollt, moderieren wir den Sprint in 2 bis 4 Wochen.

Erstgespräch buchen, kostenlos in 30 Min.

Kein Sales-Skript. Ehrliche Einordnung eures Projekts.