Micro-SaaS-Vibecoder-Architekt-Prompt

**Der Kern-Loop:** Eine Schritt-für-Schritt-Aufschlüsselung der wichtigsten Nutzerreise (Der 'Aha'-Moment). 1. Nutzer gibt ein Problem ein (z. B. "Kundenabwanderung in SaaS reduzieren") und wählt Zielgruppe (z. B. "Produktmanager"). 2. System generiert sofort eine priorisierte Liste von 3-5 umsetzbaren Lösungsansätzen, basierend auf Best Practices und Nutzerkontext. 3. Nutzer klickt auf einen Ansatz - das System erstellt einen detaillierten Aktionsplan mit Zeitrahmen, Metriken und Tools. 4. Nutzer sieht eine Vorschau der erwarteten Auswirkung (z. B. "Reduziert Churn um 15% in 30 Tagen") - dies ist der 'Aha'-Moment. 5. Nutzer exportiert den Plan als PDF oder teilt ihn im Team - dies löst die Wiederkehr aus. **AI-Integrationsstrategie:** - **Prompt-Chaining:** Schritt 1 (Problem-Analyse) -> Schritt 2 (Lösungsgenerierung) -> Schritt 3 (Detailplan). Jeder Schritt nutzt den Output des vorherigen als Kontext. - **Direkte API-Aufrufe:** Für die Metriken-Schätzung (Schritt 4) wird eine separate LLM-Instanz mit spezifischen System-Prompts verwendet, die auf Branchen-Benchmarks trainiert sind. - **Kein RAG:** Da das MVP nur generisches Wissen benötigt, wird auf externe Datenbanken verzichtet - dies spart Latenz und Kosten. **Der 'Vibecoder'-Tech-Stack:** - **Frontend:** Next.js 14 (App Router) mit Tailwind CSS - für schnelle, server-gerenderte UI. - **Backend:** Next.js API-Routen (Serverless) - kein separates Backend nötig. - **Datenbank:** Supabase (PostgreSQL) - für Nutzerprofile und gespeicherte Pläne. - **Hosting:** Vercel - für automatische Deployments und Edge-Netzwerk. - **AI-Integration:** OpenAI API (GPT-4o-mini) über Vercel AI SDK - für Streaming-Responses und einfache Prompt-Verwaltung. **MVP-Scope-Reduktion (3 Features, die NICHT gebaut werden):** 1. **Nutzer-Authentifizierung mit Rollen** - Nur einfache E-Mail-Logins (magic link) reichen aus. Keine Teams, keine Berechtigungen. 2. **Historien- und Verlaufsansicht** - Speichere nur den letzten Plan pro Nutzer, keine Such- oder Filterfunktion. 3. **Integrationen (Slack, Notion, etc.)** - Export als PDF ist ausreichend. Keine API-Connectors. **Der Kickoff-Prompt (exakt kopieren):** "Baue eine Next.js 14 App (App Router) mit TypeScript und Tailwind CSS. Die App heißt 'ProblemSolver' und löst folgendes Problem: [Problem_to_Solve]. Zielgruppe: [Target_User]. Funktionen: - Eine Landing-Page mit einem zentralen Eingabefeld für das Problem und einem Dropdown für die Zielgruppe. - Nach dem Absenden: Zeige eine Ladeanimation, dann eine priorisierte Liste von 3-5 Lösungsansätzen (jeweils mit Titel, Kurzbeschreibung, erwarteter Impact in % und Zeitrahmen). - Klick auf einen Ansatz öffnet eine Detailansicht mit einem 5-Schritte-Aktionsplan (inkl. konkreter Tools, Metriken und Meilensteinen). - Speichere den letzten Plan in Supabase (Tabelle: plans, Spalten: id, problem, audience, solution, plan_json, created_at). - Nutze das Vercel AI SDK mit OpenAI GPT-4o-mini. Implementiere Prompt-Chaining: Zuerst analysiere das Problem, dann generiere Lösungen, dann erstelle den Detailplan. - Style: Modern, minimal, mit Fokus auf Lesbarkeit. Nutze eine dunkle Sidebar für Navigation und helle Content-Bereiche. - Deployment: Vercel-ready, mit .env.local für OPENAI_API_KEY und Supabase-URL/Key. Schreibe den gesamten Code inklusive aller Komponenten, API-Routen und Datenbank-Setup. Kommentiere kritische Stellen. Starte mit der Projektstruktur und dann den Kernfunktionen."