Nr.	Titel	Ziel / Fragestellung	Bezug zu Anforderungen
PoC 1	Feature-Slider Modul entwickeln	Wie kann ein interaktives, konfigurierbares Feature-Slider-Modul technisch und visuell umgesetzt werden?	F1, F4, F5, N1, N2
PoC 2	360°-Viewer Modul entwickeln	Lässt sich ein 360°-Viewer technisch performant einbinden und visuell konfigurierbar gestalten?	F1, F4, F8, N1, N3
PoC 3	Hotspot-Grafik Modul entwickeln	Wie lässt sich eine interaktive Hotspot-Grafik mit konfigurierbaren Hotspots (Position, Inhalt) technisch umsetzen?	F1, F4, F5, N1, N2
PoC 4	Live-Preview implementieren	Wie lässt sich eine sofortige visuelle Vorschau der konfigurierten Komponente umsetzen?	F4, N6, N7
PoC 5	Modul-Bibliothek mit auswählbaren Komponenten	Können Nutzer:innen zwischen verschiedenen Modultypen (z. B. Slider, Viewer, Hotspot-Grafik) wählen?	F5, F1, N1
PoC 6	CI-Anpassung ermöglichen	Lässt sich ein konfigurierbares Designsystem (Farben, Typografie) integrieren, das CI-Vorgaben unterstützt?	F3, N5
PoC 7	Export als Web Component / Snippet	Ist ein modularer Export der konfigurierten Komponente z. B. als Web Component oder iFrame realisierbar?	F2, F8, N3, N4
PoC 8	Responsives Verhalten der Module	Funktionieren die konfigurierten Module konsistent auf unterschiedlichen Bildschirmgrößen?	N1, N3, N7
PoC 9	Inhaltliche Bearbeitung ohne Code	Können Inhalte (Texte, Bilder) innerhalb der Module über die UI verändert werden, ohne technische Hürden?	F6, N2
PoC 10	Modul-Presets / Vorlagenfunktion	Können vorkonfigurierte Modul-Layouts als Presets gespeichert, geladen und wiederverwendet werden?	F5, F7, N4

Ein Modul vom Typ „Feature-Slider“ soll so entwickelt werden, dass es sich visuell konfigurieren lässt (z. B. Anzahl der Slides, Inhalte, Farben) und dabei sowohl auf Desktop als auch mobil korrekt funktioniert. Die Konfiguration erfolgt über eine GUI im Tool.

• Nutzer:innen können mindestens 3 Slides mit eigenen Inhalten anlegen.
• Farb- und Layoutanpassungen sind möglich und werden live dargestellt.
• Modul lässt sich erfolgreich exportieren und in Testseite einbinden.

• Slider lässt sich nicht vollständig konfigurieren.
• Konfiguration führt zu Darstellungsproblemen oder unvollständiger Vorschau.

• Reduktion auf feste Slide-Anzahl oder Layout.
• Nutzung einer externen Slider-Library mit geringerer Flexibilität.

---

Ein 360°-Viewer-Modul wird entwickelt, das eine Bildsequenz (z. B. Produktrotation) einbindet und mit Maus oder Touch drehbar macht. Der Viewer soll konfigurierbar sein (z. B. Bildanzahl, Autoplay, Hintergrundfarbe).

• Nutzer:innen können eine Bildsequenz hochladen und als 360°-Ansicht anzeigen lassen.
• Viewer ist performant und reagiert auf Drag-Interaktionen.
• Preview spiegelt korrektes Verhalten wider.

• Ruckelige Darstellung oder hohe Ladezeiten.
• Inkompatibilität mit Mobilgeräten oder Touch-Eingabe.

• Nutzung eines bestehenden Open-Source-Viewers mit reduzierter Konfiguration.
• Darstellung als interaktive Galerie statt Rotation.

---

Ein Modul mit Hintergrundbild, auf dem Nutzer:innen interaktive Hotspots positionieren können. Jeder Hotspot zeigt bei Interaktion (Hover/Klick) zusätzliche Informationen. Hotspots sollen in Position, Farbe und Inhalt konfigurierbar sein.

• Nutzer:innen können beliebig viele Hotspots platzieren.
• Hotspots zeigen Titel + Text bei Interaktion.
• Änderungen werden live angezeigt und gespeichert.

• Hotspots lassen sich nicht korrekt positionieren oder reagieren nicht.
• Inhalte werden nicht gespeichert oder nicht angezeigt.

• Einschränkung auf feste Raster-Positionen.
• Nur Text statt frei gestaltbarer Hotspot-Inhalte.

---

Änderungen in der Konfiguration sollen sofort in einer Vorschau-Komponente sichtbar sein. Diese Preview soll das Verhalten des finalen Moduls simulieren, inklusive responsiver Darstellung.

• Änderungen an Text, Farbe, Layout sind in <500ms sichtbar.
• Vorschau passt sich dynamisch an verschiedene Viewports an.
• Keine doppelten Ladezyklen oder Flackern.

• Vorschau aktualisiert sich nur verzögert oder unvollständig.
• Technisch instabil (z. B. bei schnellen Änderungen).

• Vorschau nur auf Klick neu laden.
• Modulvorschau in separatem Fenster statt eingebettet.

---

Im Tool sollen Nutzer:innen aus einer Auswahl an Modultypen wählen können (z. B. Slider, 360°-Viewer, Hotspot-Grafik). Diese Auswahl dient als Startpunkt zur Konfiguration.

• Mindestens drei Modultypen sind auswählbar.
• Nach Auswahl erscheint das jeweilige Konfigurationsinterface.
• Vorauswahl wird im UI klar visualisiert.

• Auswahl funktioniert nicht oder lädt falsches Modul.
• Interface reagiert nicht oder ist unklar.

• Modulauswahl über Dropdown statt grafischer Vorschau.
• Nur ein Modultyp im MVP.

---

Ein konfigurierbares Designsystem erlaubt die Anpassung von Farben und Schriften gemäß Corporate Identity-Vorgaben. Technisch erfolgt dies über zentrale Design Tokens.

• Mindestens 3 Parameter (Farbe, Font, Größe) anpassbar.
• Änderungen erscheinen live in der Vorschau.
• Konfiguration speicherbar als JSON oder Token-Datei.

• Änderungen bleiben wirkungslos oder inkonsistent.
• Vorschau und Export weichen voneinander ab.

• Nur Farbkonfiguration im MVP.
• CI-Themes statt individueller Eingabe.

---

Das konfigurierte Modul soll in verschiedene Umgebungen exportiert werden können, z. B. als Web Component oder iFrame. Ziel ist Wiederverwendbarkeit im CMS oder Frontend-Frameworks.

• Erfolgreicher Export als Web Component.
• Snippet ist validierbar, responsiv und eingebunden testbar.
• Exportsystem bietet Copy-Funktion oder Download.

• Modul exportiert fehlerhaft oder nicht responsive.
• Integration in externe Systeme schlägt fehl.

• Nur statisches HTML/CSS-Snippet im MVP.
• Export über einfachen iFrame.

---

Unabhängig vom Modultyp müssen alle Module auf unterschiedlichen Bildschirmgrößen (Desktop, Tablet, Mobil) konsistent funktionieren und gut aussehen.

• Modul passt sich an Breakpoints (mind. 3) automatisch an.
• Keine Layoutfehler oder unlesbare Inhalte.
• Preview simuliert responsives Verhalten.

• Modul bricht bei Skalierung.
• Inhalt ist über- oder unterdimensioniert.

• Nur 2 Breakpoints im MVP (Desktop + Mobil).
• Festes Seitenverhältnis statt fluidem Layout.

---

Nutzer:innen sollen Inhalte (Texte, Bilder) direkt in der UI einfügen oder bearbeiten können, ohne technische Kenntnisse. Ziel ist eine möglichst niederschwellige Editierbarkeit.

• Textfelder, Bild-Uploads und ggf. Drag-and-Drop verfügbar.
• Änderungen erscheinen sofort in der Vorschau.
• Inhalte werden persistent gespeichert.

• Inhalte gehen beim Wechsel oder Speichern verloren.
• Benutzeroberfläche ist zu komplex oder unverständlich.

• Nur einfache Textfelder im MVP.
• Bild-Upload durch Drag-and-Drop erst in späterer Phase.

---

Benutzer:innen sollen fertige Modulkonfigurationen als Presets speichern und bei Bedarf wiederverwenden können. Diese Funktion richtet sich insbesondere an Teams, die viele ähnliche Seiten bauen.

• Nutzer:innen können ein Modul als Vorlage speichern.
• Gespeicherte Presets sind wieder auswählbar und editierbar.
• Presets funktionieren mit allen Modultypen.

• Presets werden nicht korrekt geladen.
• Änderungen an Presets überschreiben Originaldaten.

• Nur ein Preset pro Modultyp.
• Presets nur lokal, keine serverseitige Speicherung.

Ziel ist es, das Tool so zu gestalten, dass Entwickler:innen es ohne großen technischen oder organisatorischen Aufwand einsetzen können – auch ohne Anmeldung oder Build-System.

Geplante Maßnahmen:

• Bereitstellung der Module als Web Components oder alternativ als iFrame-Snippets
• Online-Konfiguration mit sofortigem Export-Link ohne Login-Zwang
• CDN-Hosting für alle erzeugten Komponenten (per <script src="...">)
• Automatisch generierter Copy-Paste-Exportcode pro Modul
• Kurze technische Einbindung via HTML (z. B. <my-slider ...></my-slider>)

Um eine möglichst einfache Integration in bestehende Systeme zu ermöglichen, sollen die exportierten Module:

• Framework-unabhängig funktionieren (z. B. in React, Vue, Angular oder Vanilla JS)
• keine zusätzlichen Abhängigkeiten benötigen
• responsive und barrierearm gestaltet sein (inkl. Default Styles)
• dokumentiert sein (kurze README je Modultyp, inkl. Properties und Beispiel)
• optional auch als npm-Paket bereitgestellt werden (für CI/CD-Setups)

Durch die Kombination aus Web Components, Direkt-Export über das UI und einer automatisierten Snippet-Dokumentation wird die technische Einstiegshürde für Entwickler:innen so gering wie möglich gehalten. Ziel ist es, das Tool auch ohne technisches Vorwissen nutzbar zu machen – gleichzeitig aber eine saubere Einbindung in moderne Webprojekte zu ermöglichen.