Persönliches Projekt · SaaS

PromptPrinter

Aus einer rohen Idee wird mit Finn als Guide ein kompletter Plan plus fertige, einsatzbereite Prompts für Claude, Cursor, Lovable & Co.

Über das Projekt

PromptPrinter ist mein eigenes SaaS-Projekt — kein Schulauftrag, sondern aus einer eigenen Idee entstanden. Es richtet sich an Developer und „Vibe-Coder", die mit KI-Tools arbeiten und schnell von einer rohen Idee zu einem ausführbaren Build-Plan kommen wollen.

Der Ausgangspunkt war eine simple Beobachtung: Die Qualität dessen, was KI-Tools ausspucken, hängt direkt von der Qualität des Prompts ab. Gute Prompts zu schreiben ist aber aufwändig. PromptPrinter automatisiert genau das — du beschreibst dein Ziel in natürlicher Sprache, und die App baut Schritt für Schritt den passenden Prompt mit dir.

Der Name kommt aus der Metapher des Druckens: Die App „druckt" Prompts wie ein Drucker Dokumente — strukturiert, konsistent und sofort einsatzbereit.

Chats & Projekte

Chats

Eine Chat-Erfahrung

Beschreibe deine Idee, Finn klärt kurz nach — am Ende stehen ein klarer Plan und fertige Prompts. Keine Modus-Wahl, kein Prompt-Engineering.

Projekte

Vollwertige Arbeitsräume

Eigene Anweisungen, hochgeladene Dateien und mehrere Chats pro Projekt. Jedes Gespräch kann direkt ein fertiges Ergebnis erzeugen.

Funktionen

Vollständiger Auth-Flow — Login, Signup und Passwort-Reset per E-Mail, abgesichert mit Supabase Row Level Security.

Projekt-Kontext — Anweisungen und hochgeladene Dateien eines Projekts fliessen automatisch in jeden Chat und jede Generierung ein.

Build-fertige Ergebnisse — Produktplan, KI-Anweisungen, Datenbank-Schema und fertige Prompts für Claude, Cursor, Lovable & Co. in einem Durchgang.

Command-Palette (⌘K) mit Fuzzy-Suche über Navigation und Projekte.

Onboarding mit Finn — beim ersten Login führt Finn persönlich durch die App, als interaktiver Spotlight-Walkthrough.

Dark- & Light-Mode, responsives Design mit eigenem Mobile-Menü und plan-basierten Limits (Free / Pro).

Barrierefreiheit — ARIA-Labels, Skip-Links, Tastatursteuerung und Reduced-Motion-Support.

Galerie

Hero der Landing Page: Finn begrüsst dich und baut den Plan mit dir — **Landing Page** — Finn begrüsst dich persönlich: „Erzähl mir deine Idee. Ich bau den Plan mit dir." Darunter die interaktive Demo Idee → Plan → Build → Launch.

So funktioniert's — der 3-Schritt-Prozess — **So funktioniert's** — drei Schritte: Idee beschreiben, kurz klären, startklar. Kein Prompt-Engineering nötig.

Echtes generiertes Ergebnis in sechs Tabs — **Echtes Ergebnis** — sechs Tabs mit echtem generiertem Output: Produktplan, KI-Anweisungen, App-Design, Datenbank, Sicherheit und Marketing.

Der Arbeitsplatz mit Chats und Projekten — **Dein Arbeitsplatz** — Chats und Projekte: jedes Gespräch bleibt gespeichert, gute Ergebnisse werden als Projekt mit allen Artefakten gesammelt.

Preisübersicht mit Free- und Pro-Tarif — **Preise** — fairer Einstieg mit Free-Tarif, Pro für mehr Projekte und Generierungen.

Login-Seite mit Dot-Matrix-Hintergrund — **Login & Signup** — kompletter Auth-Flow über Supabase, inklusive Passwort-Reset per E-Mail.

Auch komplett responsive — der Einstieg auf Handy-Breite:

Entwicklungsreise

1 · Die Idee

Problem identifiziert: Prompt-Engineering ist aufwändig. Die Idee — ein Tool, das aus einer Idee in natürlicher Sprache ein build-fertiges Prompt-Paket macht.

2 · Name & Konzept

„PromptPrinter" als einprägsame Metapher — die App „druckt" Prompts wie ein Drucker Dokumente. Der Kern von Anfang an: aus einer rohen Idee ein kompletter Plan plus einsatzbereite Prompts.

3 · Tech-Stack

Strategische Wahl: Next.js 15 + React 19, Supabase als Backend-as-a-Service mit RLS. Der KI-Zugriff ist in einer eigenen Schicht gekapselt — heute läuft die Generierung über Z.ai (GLM), mit Gemini als Fallback und einem Stub-Modus für die Entwicklung.

4 · Entwicklung Feature für Feature

Iterativer Ansatz: Auth, Chat-Interface, Projekt-Workspaces, Command-Palette und responsives Design — jedes Feature einzeln gebaut, getestet und gepusht.

5 · UX-Polish & Onboarding

Feinschliff: erklärende Empty-States und eine interaktive Onboarding-Tour beim ersten Login — durch die heute Finn persönlich führt.

6 · Branding: Finn

Vom abstrakten Logo zum Charakter: Finn, der Delfin, ist das Gesicht von PromptPrinter — mit 14 Zuständen (neugierig, denkend, feiernd …) begleitet er durch die Landing Page und die ganze App.

7 · Workspace-Redesign

Der grösste Umbau: eine einzige Chat-Erfahrung statt getrennter Modi, und Projekte als vollwertige Arbeitsräume — mit eigenen Anweisungen, Dateien und mehreren Chats pro Projekt.

Design-Philosophie

„Finn's World"-Designsystem — eine warme Ozean-Palette aus Creme, Babyblau, Koralle und Navy statt generischem SaaS-Look, in Light- und Dark-Mode.

Eigenes HSL-Token-System in Tailwind, Glasmorphism-Elemente auf der Landing Page.

Flüssige Animationen mit Framer Motion — automatisch reduziert bei prefers-reduced-motion.

Technologien

Next.js 15 React 19 TypeScript Tailwind CSS Framer Motion Supabase PostgreSQL / RLS Z.ai GLM API Vitest Docker