Zum Hauptinhalt springen

Website Templates erstellen

Erstelle Templates für öffentliche Center-Websites (z.B. palais-vest.de) mit v0.

Was sind Website Templates?​

Website Templates sind fertige Designs für Center-Websites – gleiche Seiten (Startseite, Shops, Events, Kontakt …), anderes Aussehen.

  • Gleiche Struktur: Alle wichtigen Seiten (Start, Shops, Centerplan, Services, News, Impressum, etc.)
  • Gleiche Inhalte: Centerplan, Chatbot und Daten kommen von CockpitOS
  • Dein Design: Wie es oben, in der Mitte und unten aussieht – Farben, Bilder, Schrift

Du bestimmst das Aussehen, nicht die Technik. v0 hilft dir, ein neues Design zu erstellen.

Vollständige Architektur: Full-Site Template Architektur – Datenfluss, PageTypes, Registry, Workflow.

Globale Komponenten (bereits im Layout)​

  • AI Chat (Chatbot): ChatTrigger, FloatingAIIcon, SearchInterface, Consent – alles global eingebunden. Templates implementieren keinen eigenen Chatbot.
  • Centerplan: WayfindingMap wird injiziert – Template stellt nur Slot/Layout bereit.

So erstellst du ein neues Template (3 Schritte)​

Du brauchst keine technischen Vorkenntnisse. Kopieren, einfügen, beschreiben – fertig.

Schritt 1: Prompt kopieren​

  1. Öffne Website Template Prompt
  2. Klicke auf „Prompt kopieren“ oder markiere den Block ab „WICHTIG: Nutzer verstehen“ und kopiere ihn

Schritt 2: In v0 einfügen​

  1. v0.dev öffnen → Neuer Chat
  2. Zuerst Screenshots einfügen – z.B. von Websites, die dir gefallen:
    • Oben: großes Bild mit Center-Namen
    • Mitte: Kacheln für Shops oder Events
    • Unten: Kontakt, Öffnungszeiten, Impressum
  3. Dann den Prompt einfügen
  4. Optional mit eigenen Worten nachbessern, z.B.:
    • „Das Bild oben soll höher sein“
    • „Die Kacheln sollen größer und mit Schatten“
    • „Dunkleres Design, weniger bunt“

Du musst keine Fachbegriffe kennen – beschreibe einfach, wie es aussehen soll. v0 versteht deine Absicht und macht daraus das bestmögliche Ergebnis: modern, mit Animationen, hochwertig.

Tipp: Ein Screenshot pro Bereich (oben, Mitte, unten) funktioniert oft besser als eine ganze Seite.

Schritt 3: ZIP herunterladen und weitergeben​

Wenn das Ergebnis passt: v0 → Download → als ZIP speichern.

Option A – Im Dashboard hochladen:

  1. Dashboard → Templates → Template hochladen
  2. Template-Typ: Website Template
  3. ZIP-Datei hochladen
  4. Name vergeben (z.B. „mein-neues-template“)
  5. Einreichen → Template wird geprüft und übernommen

Option B – Per E-Mail schicken:
ZIP-Datei an dein Team schicken – sie laden es für dich hoch.

Technische Integration: Die Anbindung ans Dashboard und Preview-URLs übernimmt die Codebase – siehe Website Template Prompt (Technischer Hintergrund).

Template-Struktur (Full-Site)​

Ein vollständiges Website-Template enthält pro Seite eine eigene Komponente:

components/templates/[template-name]/
├── index.tsx                    # Homepage
├── layout.tsx                   # Header + Footer (umschließt alle Seiten)
├── sections/                    # Wiederverwendbare Sections
│   ├── Header.tsx
│   ├── Hero.tsx
│   ├── Footer.tsx
│   └── ...
├── pages/
│   ├── shops.tsx
│   ├── shop-detail.tsx
│   ├── aktuelles.tsx
│   ├── news-detail.tsx, event-detail.tsx, offer-detail.tsx
│   ├── services.tsx, service-detail.tsx
│   ├── gastronomy.tsx, restaurant-detail.tsx
│   ├── wayfinding.tsx
│   ├── offices.tsx, parking.tsx, opening-hours.tsx
│   ├── impressum.tsx, datenschutz.tsx, kontakt.tsx
│   └── to-go.tsx
├── types.ts
├── DATA_REQUIREMENTS.md
└── IMPLEMENTATION_NOTES.md

Details und Props pro Seite: Website Template Prompt

Wichtige Anforderungen​

  • Gleiche Seitenstruktur wie CockpitOS (Home, Shops, Centerplan, Services, News + Unterseiten)
  • Links mit {slug}-Prefix (z.B. /{slug}/wayfinding, /{slug}/shops)
  • Server Component (kein 'use client' im Haupt-Template)
  • next/link für interne Links
  • next/image für Bilder
  • Platzhalter für Centerplan – echte WayfindingMap wird bei Integration injiziert
  • openingHours typisiert (kein any)
  • Keine hardcoded Daten (alles aus Props)
  • Fallbacks implementiert (für fehlende Daten)

Integration bestehender v0-Templates: Auch Templates ohne Slots können genutzt werden. Platzhalter (z.B. Centerplan-Seite mit statischem Bild) werden bei der Integration durch CockpitOS-Komponenten ersetzt.

v0 Power-Features​

v0 mit Cursor nutzen​

Du kannst v0 direkt in Cursor als Modell verwenden:

  1. Cursor Settings → Models → OpenAI API Key
  2. v0 API Key aus v0 Settings eintragen
  3. Override OpenAI Base URL: https://api.v0.dev/v1
  4. Add Custom Model: v0-1.5-md oder v0-1.5-lg

Dann generierst du direkt im Projekt statt in v0.dev.

Schrittweise generieren (optional)​

Wenn du unsicher bist oder ein komplexes Design willst: Lass v0 Stück für Stück arbeiten:

  1. Erst: Oben (Logo, Navigation) + unten (Kontakt, Impressum)
  2. Dann: Startseite mit großem Bild und Kacheln
  3. Dann: Übersichtsseiten (Shops, Events, Services)
  4. Zum Schluss: Detailseiten für einzelne Shops, Events, etc.

Jeden Schritt als eigenen Prompt in v0 senden – mit dem gleichen CockpitOS-Prompt als Basis.

Dashboard: Template-Auswahl und Template-Inhalte​

  • Template-Selector: Im Dashboard unter Center → Website → Tab „Aktivierung“ kann pro Center ein Website-Template ausgewählt werden (z.B. CEV-AI-Theme, Standard).

  • Template-Inhalte: Bei ausgewähltem Template erscheint der Tab „Template-Inhalte“ – dort werden pro Template konfigurierbare Texte gepflegt (Hero, Sections, CTAs, etc.). Das Formular wird schema-basiert aus apps/dashboard/src/lib/template-content-schemas.ts generiert. Neue Templates: Schema-Eintrag hinzufügen → Formular wird automatisch erzeugt. Platzhalter wie {{centerName}} werden dynamisch ersetzt.

Offene Punkte​

  • Kontaktformular – Mail-Versand: Die Kontaktsektion (z.B. CEV-AI-Theme ContactSection) zeigt ein Formular (Name, E-Mail, Nachricht) und reCAPTCHA-Platzhalter. Der tatsächliche Mail-Versand ist noch nicht implementiert. Geplant: API-Route für Formular-Submit, reCAPTCHA-Validierung, Empfänger aus centerConfig.contact.email oder konfigurierbar. Relevant für alle zukünftigen Templates mit Kontaktformular.

Weiterführende Dokumentation​

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /templates/website-templates