Leitlinie
Nicht mit einem Monster-Prompt starten
Die belastbaren Systeme starten mit Klarheit: Zielbild, Nutzer, Kernaktion, Datenmodell und Navigationslogik. Erst dann wird gebaut.
Vibe Coding Studio
Von der groben Idee zur belastbaren App-Struktur.
Dieser Bereich ist FlowForges Startpunkt für KI-gestützte Softwareentwicklung. Nicht nur hübsche Screens, sondern komplette Grundgerüste für Webseiten, Business-Apps, Foren, Dashboards und interne Tools.
Für was?
Seiten, Apps, Portale, Communities
Wie?
Blaupause, Stil-Kit, Prompt-Vertrag
Wohin?
Vibe Coding bis Software-Fabrik
Leitlinie
Design und Inhalt gemeinsam denken
Das Grundgerüst einer App kann man vorziehen, aber nie komplett vom Inhalt trennen. Gute Prompts koppeln Seitenstruktur, echte Objekte und reale Nutzungssituationen.
Leitlinie
Projektwissen dauerhaft mitgeben
Architektur, Stilregeln, Verbote, UI-Prinzipien und Qualitätsmaßstäbe gehören in persistente Projektanweisungen, nicht in jede neue Chat-Nachricht.
Leitlinie
Kleine, gezielte Bauzyklen
Erst Plan, dann Kernbildschirm, dann Komponenten, dann Datenlogik, dann QA. So entstehen Apps, die professionell wirken statt nach KI-Zufall.
Umsetzungsmodell
Nicht ein Prompt. Ein geordneter Stack.
1. Produktkern
Was ist das Produkt, für wen ist es, welche Kernaktion muss die Oberfläche tragen, und was darf am Anfang bewusst fehlen?
2. Strukturgerüst
Seiten, Module, Navigation, Zustände, Formulare, Rollen, Tabellen, Detailansichten, Dialoge, leere Zustände und Fehlersituationen werden grob festgelegt.
3. Stilkit
Farben, Typografie, Radius, Dichte, Oberflächen und Interaktionsgefühl werden als System definiert, damit die KI nicht bei jeder Seite neu rät.
4. Build-Vertrag
Stack, Do-nots, Dateistruktur, Komponentenregeln, Zustand, API-Muster und Qualitätsgates werden als feste Liefervereinbarung formuliert.
5. Prüf-Loop
Am Ende jedes Durchgangs wird gegen Checklisten geprüft: Nutzerfluss, mobile Tauglichkeit, Datenobjekte, Leere-Zustände, Fehlerfälle und Konsistenz.
Generator
Baue dir dein Prompt-Paket zusammen.
Wähle Produkttyp, Stil-Kit und Zielsystem. FlowForge baut daraus Briefing, Master-Prompt, Projektregeln und QA-Checkliste.
Prompt-Paket
Produktbrief
Produkttyp: Interne Business-App
Produkt: FlowForge Muster-App
Domäne: Zeiterfassung für ein Handwerksunternehmen
Nutzer: Büro, Mitarbeiter draußen, Admin
Kernaktion: Datensätze erfassen und sauber verwalten
Stil-Kit: Operativ Klar (ruhig, präzise, geschäftlich)
Zielsystem: Claude CodePrompt-Paket
Master-Prompt
<projekt>
Baue eine interne Business-App mit echtem Arbeitsfluss statt Demo-Optik.
</projekt>
<produktkern>
Produkt: [z. B. Zeiterfassung oder Fuhrpark]
Nutzer: [z. B. Büro, Disposition, Fahrer, Monteure]
Kernaktion: [z. B. Zeit erfassen, Fahrzeugstatus aktualisieren]
Wichtigste Objekte: [z. B. Mitarbeiter, Fahrzeuge, Einsätze, Abwesenheiten]
</produktkern>
<struktur>
Erzeuge zuerst das Grundgerüst mit Navigation, Dashboard, Listen, Detailseiten, Formularen, Filtern, Leere-Zuständen und Fehlerfällen.
Denke Desktop, Tablet und Handy von Anfang an mit.
</struktur>
<design_system>
Stil: Operativ Klar
Oberfläche: professionell, ruhig, kein Start-up-Spielzeug
Fokus: hohe Lesbarkeit, klare Zustände, robuste Tabellen und Formulare
</design_system>
<build_vertrag>
Arbeite komponentenweise.
Verändere nur betroffene Bereiche.
Verwende saubere Namensgebung, konsistente Abstände, klare CTA-Hierarchie.
</build_vertrag>
<ausgabe>
1. Seitenarchitektur
2. Komponentenliste
3. Datenobjekte
4. UI-Grundgerüst
5. offene Rückfragen
</ausgabe>
<flowforge_kontext>
Produktname: FlowForge Muster-App
Domäne: Zeiterfassung für ein Handwerksunternehmen
Zielnutzer: Büro, Mitarbeiter draußen, Admin
Kernaktion: Datensätze erfassen und sauber verwalten
Datenobjekte: Mitarbeiter, Einträge, Status, Anhänge
Muss enthalten: Dashboard, Liste, Detailansicht, Formular, mobile Schnellaktion
Vermeiden: keine generische Demo-Optik, keine unklaren Tabellen, keine leeren Platzhalter
Stack: Next.js 16, React 19, TypeScript, Tailwind CSS
</flowforge_kontext>
<stil_kit>
Name: Operativ Klar
Stimmung: ruhig, präzise, geschäftlich
Farben: #D7F3EA, #6FD1C2, #16313A, #0B1016
Regeln: klare Tabellen, nüchterne Karten, hohe Lesbarkeit | wenig Dekor, starke Zustandsfarben, viel Ordnung | für Business-Apps wie Zeiterfassung, Fuhrpark, CRM
</stil_kit>
<zielsystem>
Tool: Claude Code
Arbeitsweise: kleine Schritte, klare Projektregeln, lokale Verifikation
Projektregeln später ablegen in: CLAUDE.md
</zielsystem>
<flowforge_qualitaet>
Baue zuerst das Grundgerüst, nicht gleich jede Spezialfunktion.
Gib klare Seiten, Komponenten, Zustände, Leere-Fälle und Fehlerfälle aus.
Denke Desktop, Tablet und Handy von Anfang an mit.
Formuliere alle sichtbaren Texte in natürlichem Deutsch mit Umlauten.
</flowforge_qualitaet>Prompt-Paket
Projektregeln
Projektregeln für CLAUDE.md
1. Produktziel
Das Produkt "FlowForge Muster-App" bedient Zeiterfassung für ein Handwerksunternehmen. Kernaktion: Datensätze erfassen und sauber verwalten.
2. Nutzer und Daten
Nutzer: Büro, Mitarbeiter draußen, Admin
Wichtige Objekte: Mitarbeiter, Einträge, Status, Anhänge
3. Designsystem
Stil-Kit: Operativ Klar
Regeln: klare Tabellen, nüchterne Karten, hohe Lesbarkeit; wenig Dekor, starke Zustandsfarben, viel Ordnung; für Business-Apps wie Zeiterfassung, Fuhrpark, CRM
4. Arbeitsweise
kleine Schritte, klare Projektregeln, lokale Verifikation
Arbeite in kleinen, gezielten Schritten. Beschreibe vor größeren Umbauten kurz die beabsichtigte Struktur.
5. Verbote
keine generische Demo-Optik, keine unklaren Tabellen, keine leeren Platzhalter
6. Pflichtumfang
Dashboard, Liste, Detailansicht, Formular, mobile Schnellaktion
7. Technische Basis
Next.js 16, React 19, TypeScript, Tailwind CSSPrompt-Paket
QA-Checkliste
QA-Checkliste für Claude Code
- Trägt die Oberfläche die Kernaktion "Datensätze erfassen und sauber verwalten" sichtbar und ohne Umwege?
- Sind diese Kernbereiche enthalten: Dashboard, Listenansicht, Detailansicht, Erfassungsformular, Mobile Schnellaktion?
- Funktioniert das Grundgerüst auf Handy, Tablet und Desktop?
- Sind Leere-Zustände, Fehlerfälle und Ladezustände sichtbar gelöst?
- Passen Farben, Dichte und Ton zu "Operativ Klar"?
- Ist die Navigation klarer als der Inhalt komplex ist?
- Gibt es generische Platzhalter oder Demo-Texte, die entfernt werden müssen?
- Ist die erste Version klein genug, um sie wirklich fertigzubauen?Stil-Kit
Operativ Klar
ruhig, präzise, geschäftlich
D7F3EA
6FD1C2
16313A
0B1016
• klare Tabellen, nüchterne Karten, hohe Lesbarkeit
• wenig Dekor, starke Zustandsfarben, viel Ordnung
• für Business-Apps wie Zeiterfassung, Fuhrpark, CRM
Stil-Kit
Signal Modern
technisch, hochwertig, fokussiert
F7C97B
F0B36D
2B1F12
0F1218
• große Headlines, modulare Raster, prägnante Akzentflächen
• wenige, aber starke Visuals statt UI-Spielzeug
• für Dashboards, KI-Produkte, Portale und Labs
Stil-Kit
Community Warm
zugänglich, aktivierend, menschlich
FFE8D2
F58B54
5A2A18
16110E
• freundliche Oberflächen, klar erkennbare Interaktionen
• mehr soziale Signale, stärkere CTA-Bereiche, lockerer Rhythmus
• für Foren, Wissensräume, Mitgliederbereiche, Communities
Blaupausen
Fertige Prompt-Konzepte für echte Produkte.
Diese Blaupausen sind so gebaut, dass du den Produkttyp und deine Domäne austauschst, ohne wieder bei null zu beginnen. Sie koppeln Struktur, Designrichtung und Liefervertrag sauber zusammen.
Passt für
Interne Business-App
Zeiterfassung, Fuhrpark, Auftragsstatus, Lager, Verwaltung
DashboardListenansichtDetailansichtErfassungsformularMobile Schnellaktion
<projekt>
Baue eine interne Business-App mit echtem Arbeitsfluss statt Demo-Optik.
</projekt>
<produktkern>
Produkt: [z. B. Zeiterfassung oder Fuhrpark]
Nutzer: [z. B. Büro, Disposition, Fahrer, Monteure]
Kernaktion: [z. B. Zeit erfassen, Fahrzeugstatus aktualisieren]
Wichtigste Objekte: [z. B. Mitarbeiter, Fahrzeuge, Einsätze, Abwesenheiten]
</produktkern>
<struktur>
Erzeuge zuerst das Grundgerüst mit Navigation, Dashboard, Listen, Detailseiten, Formularen, Filtern, Leere-Zuständen und Fehlerfällen.
Denke Desktop, Tablet und Handy von Anfang an mit.
</struktur>
<design_system>
Stil: Operativ Klar
Oberfläche: professionell, ruhig, kein Start-up-Spielzeug
Fokus: hohe Lesbarkeit, klare Zustände, robuste Tabellen und Formulare
</design_system>
<build_vertrag>
Arbeite komponentenweise.
Verändere nur betroffene Bereiche.
Verwende saubere Namensgebung, konsistente Abstände, klare CTA-Hierarchie.
</build_vertrag>
<ausgabe>
1. Seitenarchitektur
2. Komponentenliste
3. Datenobjekte
4. UI-Grundgerüst
5. offene Rückfragen
</ausgabe>Passt für
SaaS- oder Produktseite
Landingpage, Produktseite, Warteliste, Sales-Funnel
HeroProblemLösungProduktvorschauPreise oder CTAVertrauensbereich
<projekt>
Entwirf eine professionelle Produktseite, die wie ein echtes Softwareprodukt wirkt und nicht wie eine austauschbare KI-Landingpage.
</projekt>
<produktkern>
Produkt: [Name und Nutzen]
Zielgruppe: [wer soll kaufen oder anfragen]
Kernaktion: [Demo buchen, registrieren, Warteliste, kaufen]
Differenzierung: [warum das Produkt anders ist]
</produktkern>
<nutzerfluss>
Führe den Besucher von der Hauptbotschaft über Vertrauensaufbau zur Kernaktion.
Jede Sektion braucht einen klaren Zweck.
</nutzerfluss>
<design_system>
Stil: Signal Modern
Ton: hochwertig, präzise, mutig
Vermeide generische SaaS-Deko und leere Platzhalter
</design_system>
<inhalt>
Verwende reale, glaubwürdige Texte statt Lorem ipsum.
Schreibe Headlines, Microcopy und CTA-Texte in natürlichem Deutsch.
</inhalt>
<ausgabe>
1. Seitenfluss
2. Sektionen mit Copy-Richtung
3. Komponenten und Zustände
4. visuelle Leitidee
5. erste umsetzbare Version
</ausgabe>Passt für
Forum oder Wissens-Community
Community, Mitgliederbereich, Lernplattform, Diskussionsraum
StartseiteThemenräumeThread-AnsichtProfilOnboardingModeration
<projekt>
Baue eine Community-Plattform mit klaren Themenräumen, guter Lesbarkeit und echter sozialer Dynamik.
</projekt>
<produktkern>
Community-Thema: [z. B. Fuhrpark, KI, Handwerk, Verein]
Nutzer: [Mitglieder, Moderation, Gäste]
Kernaktion: [lesen, posten, antworten, speichern]
Vertrauensziel: Die Plattform soll geordnet, kompetent und einladend wirken.
</produktkern>
<struktur>
Plane Startseite, Themenräume, Thread-Ansichten, Profilbereiche, Benachrichtigungen und Moderationspfade.
Zeige auch leere Zustände und Einstieg für neue Nutzer.
</struktur>
<design_system>
Stil: Community Warm
Fokus: Orientierung, gute Scroll-Hierarchie, starke Lesbarkeit, klare Interaktionspunkte
</design_system>
<build_vertrag>
Erst Informationsarchitektur, dann Feed-Logik, dann Threads, dann Profile, dann Moderation.
Keine überladenen Kartenwände ohne Priorisierung.
</build_vertrag>
<ausgabe>
1. Navigationslogik
2. zentrale Screens
3. Rollenmodell
4. Komponenten und Interaktionen
5. MVP-Reihenfolge
</ausgabe>Passt für
Kontrollzentrum oder Dashboard
Admin-Panel, Leitstand, KPI-Center, KI-Operations
ÜbersichtWarnungenDetailmoduleAktivitätenFilterDrilldown
<projekt>
Erstelle ein professionelles Kontrollzentrum, das Entscheidungen unterstützt statt nur Kennzahlen zu dekorieren.
</projekt>
<produktkern>
System: [z. B. KI-Betrieb, Vertrieb, Operations]
Nutzer: [Operator, Führungskraft, Team]
Kernaktion: [überwachen, priorisieren, eingreifen]
Primäre Entscheidungen: [welche Entscheidungen hier schneller werden sollen]
</produktkern>
<struktur>
Baue Übersichtsseite, Warnungslogik, Modul-Drilldowns, Aktivitätsstrom und Filter.
Jede KPI braucht Kontext, Status und einen nächsten Schritt.
</struktur>
<design_system>
Stil: Signal Modern
Fokus: Priorisierung, ruhige Dichte, klare Hierarchie, kein Chart-Salat
</design_system>
<qa>
Prüfe, ob mobile Ansichten die Kernentscheidungen noch tragen.
Prüfe Leere-Zustände, Fehlertexte und Systemmeldungen.
</qa>
<ausgabe>
1. Dashboard-Architektur
2. KPI-Logik
3. Modulstruktur
4. Interaktionsmodell
5. erste Produktionsversion
</ausgabe>Primärquellen
Worauf das aufbaut.
v0 Text Prompting
Für komplexe Produkte erst planen, dann inkrementell bauen; spezifische technische und UX-Vorgaben verbessern die Resultate deutlich.
v0 Design Systems
Design-Tokens, Registry und wiederverwendbare Blöcke geben KI-Systemen markenkonformen Kontext statt reiner Freitext-Wünsche.
Bolt Prompting effectively
Architektur zuerst, dann kleine präzise Änderungen; außerdem explizit festlegen, was nicht verändert werden darf.
Lovable Prompting
Plan vor Prompt, Nutzerreise denken, Design früh festlegen und komponentenweise statt seitenweise bauen.
Lovable Knowledge
Persistentes Projekt- und Workspace-Wissen verbessert wiederholbare Qualität und verhindert, dass Regeln in jedem Prompt neu erzählt werden müssen.
Cursor Rules
Persistente, versionierte Projektregeln liefern wiederverwendbaren Kontext für Stil, Architektur und Workflows.
Claude XML-Tags
Strukturierte Tags erhöhen Klarheit, Genauigkeit und Änderbarkeit von komplexen Prompt-Verträgen.
Claude Code Memory
Projektgedächtnis wie `CLAUDE.md` eignet sich, um Architektur, Befehle, Qualitätsgates und Konventionen dauerhaft mitzuschleppen.
Figma Dev Mode MCP
Design-Kontext kann direkt in KI-gestützte Code-Workflows eingespeist werden, statt nur Screenshots grob nachzubauen.
GitHub Spark
Natürlichsprachige App-Erstellung plus gemanagte Laufzeit sind stark, aber Grenzen und Vorschau-Status müssen in die Produktstrategie einkalkuliert werden.
Roadmap
Phase 1 — Blaupausenbibliothek
• öffentliche Vibe-Coding-Fläche mit App-Typen, Stil-Kits und Prompt-Verträgen
• Muster für Zeiterfassung, Fuhrpark, Forum, Dashboard und SaaS-Seiten
• Feedback sammeln, welche Kits im Alltag wirklich funktionieren
Roadmap
Phase 2 — Konfigurator
• Formularbasierter Prompt-Builder in FlowForge
• Auswahl von App-Typ, Rollen, Datenobjekten, Stil-Kit und Stack
• Ausgabe als kopierbares Master-Prompt-Paket plus QA-Checkliste
Roadmap
Phase 3 — Design-zu-Code
• Screenshot-, Figma- und Komponenten-Import als zusätzlicher Kontext
• UI-Blöcke und Design-Tokens in wiederverwendbare Registries überführen
• mehrere Generator-Ziele: v0, Lovable, Bolt, Claude Code, Cursor
Roadmap
Phase 4 — Software-Fabrik
• FlowForge erzeugt nicht nur Prompts, sondern Projektregeln, Dateigerüste und Review-Verträge
• spätere Ausbaustufe mit Evaluations- und Abnahme-Loop
• Übergang von Vibe Coding zu vollständiger KI-gestützter Softwareentwicklung
War dieser Inhalt hilfreich?