KI-native Produktentwicklung verändert die Rolle des Product Managers: Statt Anforderungen für andere zu schreiben, leitet er direkt einen KI-Agenten an, um die Software zu bauen. Dieser Ansatz reduziert die Entwicklungszeit von Monaten auf Wochen und die Kosten um bis zu 99%.
Das „JIRA-Prompt“-Framework
Behandeln Sie jede Interaktion mit einem KI-Agenten (wie Bolt) so, als würden Sie ein qualitativ hochwertiges Ticket für einen Senior-Entwickler schreiben.
1. Technischen Umfang definieren
Statt allgemeiner Beschreibungen geben Sie die spezifischen Parameter an, die die KI benötigt, um die Umgebung aufzusetzen:
- Kernfunktionalität identifizieren: „Erstelle einen Spotify-Klon mit Streaming, Playlists und MP3-Datei-Unterstützung.“
- Stack spezifizieren: Geben Sie die gewünschten Integrationen an (z. B. „Verwende Supabase für die Datenbank und Netlify für das Hosting“).
- Datenkontext bereitstellen: Fügen Sie Rohdaten (z. B. LinkedIn-Bio, CSV-Zeilen oder Markenrichtlinien) direkt in den Prompt ein, um der KI Kontext zu geben.
2. Spezifikation mit „Vibes“ ausbalancieren
KI-Agenten arbeiten am besten, wenn sie eine Mischung aus strengen Anforderungen und kreativer Freiheit erhalten.
- Hohe Spezifität: Verwenden Sie dies für Geschäftslogik, Datenschemata und Benutzerabläufe.
- Der „Vibe“-Prompt: Für UI/UX verwenden Sie beschreibende Sprache anstelle von spezifischem CSS.
- Beispiel: „Lass es wie eine hochwertige medizinische Spendenwebsite aussehen – sauber, professionell und vertrauenswürdig.“
- Beispiel: „Mache es hübscher und moderner.“
3. Iteratives Debugging implementieren
Wenn der KI-Agent stecken bleibt oder einen Fehler produziert:
- Screenshot-Debugging: Laden Sie einen Screenshot des UI-Problems oder der Fehlermeldung hoch und fragen Sie: „Repariere dies, damit es dem beabsichtigten Design entspricht.“
- Das „Unstuck“-Protokoll: Wenn der KI-Agent nach 3 Versuchen bei einem bestimmten Logikproblem scheitert, wechseln Sie zu einem Human-in-the-Loop-Ansatz. Konsultieren Sie einen Experten oder Entwickler, um diese spezifische „Ecke oder Ritze“ zu beheben, während die KI die Kontrolle über die gesamte Codebasis behält.
Workflow: Von Figma zur Bereitstellung
Schritt 1: Design-Extraktion
Verwenden Sie die direkte URL-Methode, um statische Designs in Code umzuwandeln:
- Nehmen Sie Ihre Figma-Design-URL.
- Setzen Sie die URL des KI-Tools davor (z. B.
bolt.new/[FIGMA_URL]). - Lassen Sie den Agenten die Assets und das Layout „aufsaugen“, um die erste Umgebung zu erstellen.
Schritt 2: Live-Prototyping
Statt Frames in Figma zu ziehen, geben Sie funktionale Änderungen per Prompt vor:
- „Füge eine Login-Seite mit Supabase Auth hinzu.“
- „Erstelle ein Dashboard, das Daten aus der Benutzertabelle abruft.“
- Testen Sie die App in Echtzeit auf Ihrem eigenen Gerät mit QR-Code-Vorschauen.
Schritt 3: One-Click-Deployment
Verschieben Sie die App sofort auf eine Produktions-URL:
- Klicken Sie auf „Deploy“.
- Verbinden Sie sich mit einem Hosting-Anbieter (Netlify/Vercel).
- Hängen Sie eine benutzerdefinierte Domain an, um den Prototypen in ein live Geschäft zu verwandeln.
Beispiele
Beispiel 1: Der „Zero-to-Market“-CRM
- Kontext: Ein Unternehmer benötigt ein individuelles CRM mit Stripe-Abrechnung, hat aber kein Budget für eine 30.000 € teure Agentur.
- Eingabe: „Baue ein CRM für Immobilienmakler. Beinhalte Lead-Tracking, eine Stripe-Integration für monatliche Abonnements und einen KI-gestützten E-Mail-Entwurf. Verwende eine saubere, blaue UI.“
- Anwendung: Bolt verwenden, um die Basis-App zu generieren. Iterieren Sie, indem Sie sagen: „Füge eine Spalte für ‚Letztes Kontaktdatum‘ hinzu“ und „Integriere den Stripe-Test-Key“.
- Ausgabe: Ein funktionsfähiges, umsatzgenerierendes SaaS-Produkt, das in 3 Wochen für etwa 300 € Inferenzkosten gebaut wurde.
Beispiel 2: Schnelle Marketing-Landingpage
- Kontext: Ein PM benötigt eine Landingpage für ein neues Funktionsexperiment.
- Eingabe: [LinkedIn-Bio/Markenspezifikationen einfügen] + „Erstelle eine persönliche Portfolio-Seite. Verwende einen professionellen Dark Mode. Füge einen Abschnitt für ‚Aktuelle Projekte‘ hinzu, den ich leicht bearbeiten kann.“
- Anwendung: Generieren Sie die Seite, dann prompten Sie: „Füge ein Kontaktformular hinzu, das Einträge an meine E-Mail sendet.“
- Ausgabe: Eine live gehostete URL, bereit für Traffic in unter 10 Minuten.
Häufige Fallstricke
- Legacy-Code-Migration: Versuchen Sie nicht, eine 20 Jahre alte, tausend Dateien umfassende Produktionscodebasis in einen browserbasierten KI-Agenten zu migrieren. Verwenden Sie diese Tools für Greenfield-Projekte oder isolierte „Pods“ wie Admin-Panels und Marketing-Seiten.
- Über-Prompting des ersten Entwurfs: Vermeiden Sie es, einen 5-seitigen Prompt für die erste Version zu schreiben. Beginnen Sie mit der „Spotify-Klon“-Basis und fügen Sie Funktionen eine nach der anderen hinzu, um zu verhindern, dass die KI verwirrt wird.
- Determinismus ignorieren: Denken Sie daran, dass Code deterministisch ist – er läuft entweder oder nicht. Wenn die KI eine kaputte App produziert, überprüfen Sie, ob die Umgebung (WebContainer) fertig gebootet hat, bevor Sie annehmen, dass der Code falsch ist.
- Nur als Designer behandeln: Verwenden Sie es nicht nur für UI. Nutzen Sie seine Fähigkeit, „Full Stack“ (Datenbanken, Auth, APIs) zu bauen, um sicherzustellen, dass der Prototyp tatsächlich funktionsfähig ist – nicht nur ein hochwertiger Mockup.