Ein vollwertiger, web-basierter Produktdesigner — mit KI-Integration, Template-System und nahtloser WooCommerce-Anbindung. Kein Fancy Product Designer mehr.
Eigener webbasierter Banner-Designer der den Fancy Product Designer vollständig ersetzt. Drei Gestaltungswege: Vorlage, Frei gestalten, KI-Design. Nahtlos in WooCommerce integriert.
Keine Plugin-Abhängigkeit mehr. KI-Integration nativ möglich. Volle Kontrolle über UX, Features und Roadmap. Eigene Druckqualität-Pipeline. Zukunftssicher für andere Shop-Systeme.
Next.js + Fabric.js (Canvas-Engine). LLM-Modelle austauschbar (OpenAI, Anthropic, etc.). WordPress-Plugin für Admin, Token-Monitoring und Shop-Anbindung.
Entwicklung: ~19–23 Wochen. Laufend: ~€50–95/Monat (Hosting + KI). Keine Lizenzgebühren. Token-Verbrauch im WP-Admin überwachbar und budgetierbar.
Adaptives UI: Wizard-Flow auf Smartphones (kein Canvas nötig), Touch-Canvas auf Tablets, voller Editor am Desktop. Geräteübergreifend speichern und weiterarbeiten.
Eigenständiger Webservice (Next.js auf Vercel), verbunden per REST API mit bestehendem WordPress-Shop. Kein Server-Admin nötig — alles managed.
1 technische Person (~15–20h/Woche) steuert Cursor AI, reviewt Code, testet und deployt. Happy Banner Team liefert Inhalte und testet aus Kundensicht.
Shop-agnostische Architektur: v1 = WooCommerce, später Shopify, Magento, Standalone möglich. LLM-Modelle per 1-Klick wechselbar im Admin.
Der Fancy Product Designer hat uns weit gebracht — aber jetzt brauchen wir mehr.
Plugin-Updates brechen Dinge. Lizenzkosten steigen. Features die wir brauchen kommen nie. Wir sind Passagier, nicht Pilot.
Fancy Product Designer kann keine KI-Integration. Aber KI-basierte Gestaltung ist die Zukunft der personalisierten Produkte.
Volle Kontrolle über UX, Features und Roadmap. KI nativ eingebaut. Eigene Druckqualität-Pipeline. Keine Lizenzkosten.
Jeder Kunde bekommt den Gestaltungsweg, der zu ihm passt.
Fertige Templates mit Foto-Masken (Herz, Kreis, Stern, Freiform) und editierbaren Textfeldern. Foto einsetzen, Text ändern, fertig.
Leeres Canvas mit voller Freiheit: Text, Bilder, Formen, Schriften-Library, Ebenen, Undo/Redo. Wie Canva — aber für Banner.
KI generiert das komplette Banner basierend auf Anlass, Stil und Text. Verfeinerung per Chat-Prompts. Foto-Integration möglich.
Templates definieren Bereiche, in die Kunden ihre Fotos einsetzen. Fabric.js clipPath schneidet Bilder automatisch in die gewünschte Form.
Die Canvas-Engine ist das Herzstück. Hier der Vergleich der Optionen.
| Kriterium | Fabric.js 6 | Konva.js | Polotno | PixiJS |
|---|---|---|---|---|
| Text-Editing | ✓ Eingebaut | ⚠ Selbst bauen | ✓ Eingebaut | ✕ Selbst bauen |
| Foto-Masking | ✓ clipPath (stark) | ⚠ Begrenzt | ✓ Eingebaut | ✕ Selbst bauen |
| JSON Speichern/Laden | ✓ Eingebaut | ✕ Selbst bauen | ✓ Eingebaut | ✕ Selbst bauen |
| SVG Import/Export | ✓ Ja | ✕ Nein | ✓ Ja | ✕ Nein |
| React-Integration | ⚠ Wrapper | ✓ Native JSX | ✓ Native | ⚠ Wrapper |
| Community | 20k+ ★ | 11k ★ | Klein | 44k ★ |
| Lizenzkosten | €0 (MIT) | €0 (MIT) | ~€100/Monat | €0 (MIT) |
| Entwicklungsaufwand | Mittel | Hoch | Niedrig | Sehr hoch |
| Abhängigkeit | Keine | Keine | Anbieter | Keine |
Beste Balance aus eingebauten Features, Kontrolle und Kosten. Text-Editing und Foto-Masking — die zwei wichtigsten Features für einen Banner-Designer — sind nativ eingebaut. TypeScript-Support seit v6.
Shop-agnostisch und zukunftssicher designed — v1 = WooCommerce, später andere Systeme möglich.
/api/templatesVorlagen/api/fontsSchriften/api/designsSpeichern/api/exportDruckdatei/api/ai/*LLM Router/api/wc/*Shop BridgeNicht jedes Gerät braucht den vollen Canvas-Editor. Jedes Gerät bekommt das optimale Erlebnis.
| Modus | 📱 Smartphone | 💻 Tablet | 🖥 Desktop |
|---|---|---|---|
| Aus Vorlage | Wizard-Flow Formular statt Canvas | Touch-Canvas | Voller Editor |
| KI-Design | Wizard-Flow Perfekt ohne Canvas | Canvas + Chat | Canvas + Chat |
| Selbst gestalten | Hinweis: Desktop nutzen oder: vereinfacht (v2) | Touch-Canvas | Voller Editor |
Einstellungen, KI-Provider, Token-Verbrauch, Vorlagen und Schriften — alles im gewohnten WordPress-Admin.
| Provider | Feature | Modell | Aufrufe | Kosten |
|---|---|---|---|---|
| OpenAI | Bild-Erzeugung | gpt-image-1 | 245 | € 9.80 |
| OpenAI | Bild-Editing | gpt-5 | 89 | € 3.56 |
| OpenAI | Text-Vorschläge | gpt-4.1-mini | 178 | € 0.89 |
| OpenAI | KI-Textvorschlag | gpt-4.1-mini | 56 | € 0.05 |
| Gesamt | 568 | € 14.30 | ||
Heute OpenAI, morgen Claude, übermorgen Open Source — die Architektur macht den Wechsel trivial.
Admin ändert Modell in WordPress → nächster API-Call nutzt sofort das neue Modell. Kein Deployment nötig.
Wenn Provider A ausfällt → automatisch Fallback-Provider B. Keine Downtime für den Kunden.
Jeder API-Call wird mit Provider, Modell, Tokens und Kosten geloggt. Volle Transparenz im WP-Admin.
Designs gehen nie verloren — Auto-Save, Cloud-Sync und "Meine Designs" im WordPress-Account.
Ja, der Designer ist ein eigenständiger Webservice — getrennt von WordPress gehostet, aber nahtlos verbunden.
designer.happybanner.atwww.happybanner.atDer Kunde klickt auf der Shop-Seite "Jetzt gestalten" → wird zum Designer weitergeleitet → nach Fertigstellung geht es zurück zum Warenkorb im Shop.
Entwickelt mit Cursor AI — eine technische Person steuert, reviewt und testet.
Schreibt den Großteil des Codes — Frontend, Backend, API-Routes, WordPress-Plugin, Styling, Tests.
Steuert die AI, reviewt Ergebnisse, testet, deployt und trifft Architektur-Entscheidungen.
Liefert Inhalte, testet aus Kundensicht und gibt UX-Feedback.
Technische Person: ca. 15–20 Stunden pro Woche über den Projektzeitraum. Das umfasst: AI-Steuerung (Cursor), Code-Review, Testing, Deployment, WooCommerce-Konfiguration. In manchen Phasen mehr, in anderen weniger.
| Phase | Inhalt | Dauer | Wer macht was |
|---|---|---|---|
| 1 | Foundation Projekt-Setup, Shop Adapter Interface, WooCommerce Adapter, Fabric.js Canvas Basis, Responsive Shell |
2–3 Wo. | 🤖 Cursor: Code 👨💻 Dev: Setup & Architektur |
| 2 | Freier Designer Text-Tool, Bild-Upload, Formen, Schriften-Library, Ebenen, Undo/Redo, Properties-Panel |
3–4 Wo. | 🤖 Cursor: Code 👨💻 Dev: Review & Test 🎨 Team: UX-Feedback |
| 3 | Template-System Template-Format, Foto-Masken (clipPath), Text-Zonen, Template-Browser |
2–3 Wo. | 🤖 Cursor: Code 🎨 Team: Vorlagen erstellen |
| 4 | KI-Modus LLM-Abstraktionsschicht, AI-Generierung, Chat-Editing, AI-Ergebnis ins Canvas |
2 Wo. | 🤖 Cursor: Code 👨💻 Dev: Prompt-Tuning |
| 5 | Speichern & Laden Auto-Save, localStorage Fallback, Server-Sync, "Meine Designs" im WP-Account |
2 Wo. | 🤖 Cursor: Code 👨💻 Dev: WP-User Test |
| 6 | WordPress Admin-Plugin Settings, KI-Config, Token-Monitoring, Template-Admin, Schriften-Verwaltung |
2–3 Wo. | 🤖 Cursor: PHP + React 👨💻 Dev: WP-Integration |
| 7 | Mobile Wizard Wizard-Flow Smartphone, Server-Side Preview, Touch-Optimierung Tablet |
2 Wo. | 🤖 Cursor: Code 🎨 Team: Mobile-Testing |
| 8 | Export & Warenkorb Druckdatei-Rendering (100 DPI), PDF-Export, WooCommerce Warenkorb-Bridge |
2 Wo. | 🤖 Cursor: Code 🎨 Team: Druckqualität prüfen |
| 9 | Polish & Go-Live E2E-Testing, Performance, Cross-Browser, Deployment, DNS-Setup |
2 Wo. | 👨💻 Dev: Deployment 🎨 Team: Abnahme-Test |
Warum der Wechsel sich lohnt — auf einen Blick.
| Aspekt | Fancy Product Designer | Happy Banner Designer |
|---|---|---|
| Lizenzkosten | ~€89/Jahr + Addons | €0 (Eigenentwicklung) |
| KI-Integration | Nicht möglich | Nativ eingebaut |
| Foto-Masken | Begrenzt | Volle Kontrolle (clipPath) |
| Schriften | Plugin-Auswahl | Eigene Library, unbegrenzt |
| Token-Monitoring | — | WP-Admin Dashboard |
| LLM-Modell wechseln | — | 1-Klick im Admin |
| Performance | WP-Plugin (schwer) | Standalone-App (schnell) |
| Mobile | Eingeschränkt | Adaptiv (Wizard/Canvas) |
| Druckqualität | Export-Limits | Eigene Pipeline, 100 DPI |
| Anpassbarkeit | Plugin-Grenzen | 100% anpassbar |
| Branding | Generisch | Komplett Happy Banner |
| Multi-Platform | Nur WordPress | Architektur: Shop-agnostisch |
| Zwischenspeichern | Begrenzt | Auto-Save + Cloud-Sync |
| Abhängigkeit | Plugin-Entwickler | Keine |