samarv/Shanon

KI-native Produktentwicklung verändert die Rolle des Product Managers – weg vom Schreiben von Anforderungen für andere, hin zur direkten Steuerung eines KI-Agenten zum Bauen der Software. 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 einen qualitativ hochwertigen Ticket für einen Senior-Entwickler schreiben.

1. Technischen Umfang definieren

Statt allgemeiner Beschreibungen geben Sie die spezifischen Parameter an, die der KI-Agent zum Aufsetzen der Umgebung benötigt:

• Kernfunktionalität identifizieren: „Erstelle einen Spotify-Klon mit Streaming, Playlists und MP3-Datei-Unterstützung.“
• Stack angeben: Nennen Sie die gewünschten Integrationen (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 dem KI-Agenten Kontext zu geben.

2. Balance zwischen Spezifikation und „Vibes“

KI-Agenten arbeiten am besten mit einer Mischung aus strengen Vorgaben und kreativer Freiheit.

• Hohe Spezifität: Für Geschäftslogik, Datenschemata und Benutzerabläufe.
• Der „Vibe“-Prompt: Für UI/UX beschreibende Sprache anstelle von spezifischem CSS verwenden.
  • Beispiel: „Lass es wie eine hochwertige medizinische Spenden-Website aussehen – sauber, professionell und vertrauenswürdig.“
  • Beispiel: „Mach 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 logischen Problem scheitert, wechseln Sie zu einem Human-in-the-Loop-Ansatz. Konsultieren Sie einen Experten oder einen Entwickler, um diese spezifische „Ecke“ zu reparieren, während der KI-Agent die Kontrolle über die gesamte Codebasis behält.

Workflow: Von Figma bis zur Bereitstellung

Schritt 1: Design-Extraktion

Verwenden Sie die Direkt-URL-Methode, um statische Designs in Code umzuwandeln:

• Nehmen Sie Ihre Figma-Design-URL.
• Stellen Sie die URL des KI-Tools voran (z. B. bolt.new/[FIGMA_URL]).
• Lassen Sie den Agenten die Assets und das Layout „einsaugen“, um die initiale Umgebung zu erstellen.

Schritt 2: Live-Prototyping

Statt Frames in Figma zu ziehen, fordern Sie funktionale Änderungen per Prompt an:

• „Füge eine Login-Seite mit Supabase Auth hinzu.“
• „Erstelle ein Dashboard, das aus der Benutzertabelle zieht.“
• Testen Sie die App in Echtzeit auf Ihrem eigenen Gerät mithilfe von 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-Business zu verwandeln.

Beispiele

Beispiel 1: Das „Zero-to-Market“-CRM

• Kontext: Ein Unternehmer benötigt ein benutzerdefiniertes CRM mit Stripe-Abrechnung, hat aber kein Budget für eine 30.000-US-Dollar-Agentur.
• Eingabe: „Baue ein CRM für Immobilienmakler. Inkludiere Lead-Tracking, eine Stripe-Integration für monatliche Abonnements und einen KI-gestützten E-Mail-Entwurf. Verwende ein sauberes, blaues UI-Design.“
• Anwendung: Verwenden Sie Bolt, um die Basis-App zu generieren. Iterieren Sie, indem Sie sagen: „Füge eine Spalte für ‚Datum des letzten Kontakts‘ hinzu“ und „Integriere den Stripe-Test-Key.“
• Ausgabe: Ein funktionales, umsatzgenerierendes SaaS-Produkt, das in 3 Wochen für ca. 300 US-Dollar an Inferenzkosten gebaut wurde.

Beispiel 2: Schnelle Marketing-Landingpage

• Kontext: Ein PM benötigt eine Landingpage für ein neues Feature-Experiment.
• Eingabe: [LinkedIn-Bio/Markenspezifikationen einfügen] + „Erstelle eine persönliche Portfolio-Website. Verwende einen professionellen Dark Mode. Füge einen Abschnitt für ‚Aktuelle Projekte‘ hinzu, den ich einfach bearbeiten kann.“
• Anwendung: Generieren Sie die Website, dann fordern Sie an: „Füge ein Kontaktformular hinzu, das Einträge an meine E-Mail sendet.“
• Ausgabe: Eine Live-URL, die in unter 10 Minuten für Traffic bereit ist.

Häufige Fallstricke

• Migration von Legacy-Code: Versuchen Sie nicht, eine 20 Jahre alte, tausend Dateien umfassende Produktionscodebasis in einen browserbasierten KI-Agenten zu verschieben. Verwenden Sie diese Tools für Greenfield-Projekte oder isolierte „Pods“ wie Admin-Panels und Marketing-Websites.
• Überprompting des ersten Entwurfs: Vermeiden Sie es, einen 5-seitigen Prompt für die erste Version zu schreiben. Starten Sie mit der „Spotify Clone“-Basis und fügen Sie Funktionen eine nach der anderen hinzu, um zu verhindern, dass der KI-Agent verwirrt wird.
• Nichtdeterminismus ignorieren: Denken Sie daran, dass Code deterministisch ist – er läuft entweder oder nicht. Wenn der KI-Agent eine kaputte App produziert, überprüfen Sie, ob die Umgebung (WebContainer) vollständig hochgefahren ist, bevor Sie annehmen, dass der Code falsch ist.
• Es nur als Designer behandeln: Verwenden Sie es nicht nur für das UI. Nutzen Sie seine Fähigkeit, „Full Stack“ (Datenbanken, Auth, APIs) zu bauen, um sicherzustellen, dass der Prototyp tatsächlich funktional ist – nicht nur ein hochauflösendes Mockup.