v0-Website mit Cockpit-Daten: Anleitung von A–Z (Redaktion)

Diese Seite ist für alle, die nie programmiert haben und trotzdem eine moderne Web-Vorschau mit echten Center-Daten aus dem Cockpit wollen. Du kannst alles in Ruhe in kleinen Schritten abarbeiten.

Am Ende hast du (typischerweise) einen Entwurf aus v0 (Code) und Anweisungen für eure IT / Agentur, damit die Seite online geht. Ohne technische Person wird die Website meist nicht dauerhaft unter eurer echten Internet-Adresse laufen — das ist normal, kein Fehler von dir.

Das Wichtigste in 30 Sekunden

Thema	So ist es
Daten holen (Lesen)	Die Seite, die v0 baut, kann vom Cockpit laden: Shops, News, Farben, Hero/Template-Texte (`templatePublicContent`), Seiten-Inhalte — alles ohne Login über öffentliche API-Adressen. v0 nutzt die Instructions (Teil A–E), damit es nicht fälschlich geschützte URLs aufruft (401).
Daten schreiben / „wenn nicht vorhanden“	Nicht in v0 erfinden. Wenn etwas fehlt (z. B. kein News-Eintrag), musst du es im Cockpit anlegen bzw. freigeben. v0 zeigt nur, was in der Datenbank schon existiert. „Schreibt von allein fehlendes in Cockpit rein“ geht aus einer normalen v0-Website nicht — das wäre unsicher.
Code & Hosting (bei euch Standard)	Einzel-Center: ein GitHub-Repo und ein Vercel-Projekt (Firma: `sawmuedev`). Multi-Center: ein Repo + ein Vercel-Projekt. v0-Verbindung: Cockpit → Website-Management → Frontend-Kanäle (v0) — F3.
Wer baut, wer startet?	Du: v0, Texte, Layout-Ideen, Instructions. Technik (Vercel o. Ä.): Code live schalten, Umgebungsvariable für die API-URL.

Wenn du das verinnerlicht hast, geht’s Schritt für Schritt weiter.

A — Account und Zugang

v0 im Browser öffnen: v0.dev (oder das Produkt, das eure Firma lizenziert hat — in Cursor kann v0 anders heißen, der Ablauf ist ähnlich).
Einloggen mit dem Konto, das eure Organisation nutzt.
Cockpit in einem zweiten Tab anmelden (dashboard.cockpit-os.de oder eure interne Adresse, falls die IT etwas anderes vorgegeben hat).

Fertig, wenn beide Seiten laufen. Kein Stress, wenn etwas anders aussieht — die Begriffe (Chat, Instructions, Export) sind in jedem v0-ähnlichen Tool meist an der gleichen Stelle.

B — Begriffe, die du einmal gesehen haben musst

Center-Slug: Der kurze Name in der Adresse, z. B. palais-vest, ohne https:// und ohne Leerzeichen. Du findest ihn im Cockpit am Center / bei den Website-Einstellungen — wenn unsicher, Kolleg:innen oder IT fragen.
API-Basis-URL (Daten-Quelle): Meistens https://dashboard.cockpit-os.de. Manche Betreiber nutzen Test-Server — dann sagt euch die IT die exakte Adresse. Notiere dir eine Zeile: Unsere API: …
Instructions (Einstellungen in v0): Lange Texte mit Regeln für v0, die festlegen, welche Cockpit-URLs das Projekt nutzen darf. Wichtig: Lesen über public-visitor-surface (inkl. templatePublicContent für Hero/Footer) — nicht website-config ohne Login. Ohne die Instructions „rät“ v0 — dann passen die Daten nicht zu eurem Center (oder die Seite stürzt ab).

C — Vor v0: Kurz im Cockpit prüfen (5 Minuten)

Damit es später keine leeren Seiten „ohne euren Fehler“ gibt:

Dein Shopping Center auswählen.
Webseite / Website ist aktiv (je nach Euerem Menü: „Website aktiv“, websiteEnabled o. ä.). Wenn deaktiviert, liefert die öffentliche API keine Center-Daten für externe Seiten.
Slug (siehe oben) aufschreiben — am besten in eine lokale Notiz oder eure Ablage.
Wenn du Shops, News, Events auf der künftigen Seite sehen willst: Kurz im Cockpit prüfen, ob wirklich schon Inhalte und Aktiv/Veröffentlicht-Status passen. Leere Listen v0 = oft leere Listen im Cockpit.

Kein Dev-Hintergrund nötig

Wenn etwas in den Listen fehlt, leg es im Cockpit an (oder bitte jemanden mit Rechten). v0 ersetzt keine zentrale Pflege.

D — v0: Instructions (max. 10 × 5000 Zeichen)

v0 erlaubt max. 10 Custom Instructions, je max. 5000 Zeichen. Die Anleitung ist in Teile A–J (plus F2 für Chat) aufgeteilt — in v0 alphabetisch A → J anlegen (F Centerplan; G Multi-Center; H+I Signage; J nach Vercel).

v0: 10 Instructions × 5000 Zeichen

Pro Instruction max. 5000 Zeichen, max. 10 Stück insgesamt. Slot-Plan und Zeichenbudget: v0 + Cockpit (So geht’s) (Tabelle + Kästen alphabetisch A–J). Teil D (Workflow) ist Pflicht — in v0 als Instruction Cockpit Workflow anlegen.

Instructions nach Cockpit-Update

Wenn die IT neue API-Felder ausgerollt hat (z. B. templatePublicContent, Teil F Centerplan/3D, Teil G Multi-Center): die grauen Kästen auf der Seite v0 + Cockpit (So geht’s) neu kopieren und in v0 ersetzen — sonst nutzt v0 weiter alte URLs.

Detaillierter Text inkl. alles Kopiervorbereitete (Teil D, A, B, C, E in Kästen):

→ v0 + Cockpit (So geht’s) — nur Schritte & Texte

Dort findest du alle Kästen alphabetisch A → J (plus F2 für den Chat). H = Kiosk/Stele; I = Companion/NOW! (immer Paar).

Kurz-Wiederholung hier:

v0: Menü Instructions öffnen.
Alphabetisch A → J anlegen (Cockpit A … Cockpit J). Je Teil den grauen Kasten von der verlinkten Seite einfügen → speichern.
Cockpit D heißt in v0 Cockpit Workflow (Pflicht).
Cockpit E enthält Resilienz (ISR revalidate: 300, public/fallback/*.json, try/catch) — bei Dashboard-Ausfall bleibt die Seite lesbar.
Cockpit J erst nach erstem Vercel-Deploy. F2 bei 3D-Problemen nur in den Chat, nicht als 11. Instruction.
A–E immer aktiv; F / G / H / I / J je nach Projekt einschalten.

E — v0-Chat: Wie die Seite aussehen soll

Neuen Chat im gleichen v0-Projekt starten (oder im bestehenden weitermachen, wenn euer Prozess das so vorsieht).
In einfachen Sätzen schreiben, was du sehen willst, z. B.:
- Startseite mit großem Bild, darüber der Center-Name, darunter 6 Shops als Karten, mobil scrollbar.
- Multi-Center: Ein Layout, gleiches websiteTemplate, Teil G — Center per Domain.
- Centerplan 3D: 2D/3D-Centerplan nach Teil F + F2 — mapSvg mit SVGLoader.
- Signage / Kiosk + NOW!: Kiosk Terminal-Style (Teil H): Plan 75%+, kompakter Header, Floating Pills, Toolbar unten — plus Companion (Teil I).
Optional: Screenshots von Webseiten, die euch gefallen, hineinziehen (Drag & Drop).
v0 baut daraus Entwürfe — du kannst verfeinern: „Text größer“, „dunklere Hintergründe“ — ganz normal, nicht technisch klingen.

v0 sorgt für Layout; ob überall eure Cockpit-Daten erscheinen, hängt an den Instructions (Schritt D) und daran, ob im Cockpit wirklich Daten liegen (Schritt C).

F — Fertig machen: Export an die Technik geben

Wenn euch der Entwurf gut genug ist:

In v0 Code exportieren (je nach Anbieter: Download ZIP, Copy code, Open in …) — eure IT / Agentur sagt, was sie braucht.

Dazu (am besten e-Mail) drei Zeilen Text:

1) API-Basis-URL: https://dashboard.cockpit-os.de  (nur ersetzen, wenn euch die IT anderes sagt)
2) Center-Slug: euer-slug
3) Bitte in Vercel (oder eurem Hosting) setzen: Umgebungsvariable NEXT_PUBLIC_DASHBOARD_URL
   — gleich der API-Basis, ohne / am Ende.
4) Bitte einmalig einrichten: Vercel Deploy Hook → Cockpit (Abschnitt F3 unten),
   damit die Live-Adresse nach jedem Deploy automatisch im Cockpit landet.

Wenn eure Domain anders heißt (z. B. www.unsercenter.de für by-domain) — mit schreiben.

Ohne diese Mindestinfos funktionieren viele v0-Projekte lokal in v0, aber nicht in der echten, gehosteten Version.

Vertiefung für Technik, nicht fürs schnelle Lesen: Public API — Vertrag (Developer).

F2 — GitHub & Vercel: eine Ordnung pro Center (Firmen-Standard)

Bei euch soll jedes neue Center eigenes GitHub-Repository (unter der Organisation sawmuedev) und eigenes Vercel-Projekt bekommen — damit Versionierung (wer hat wann was geändert) und klare Zuordnung Center = Repo = Vercel stimmen, ohne dass sich Projekte vermischen.

Was du als Redaktion wissen musst (kurz)

Du arbeitest im Cockpit an den Inhalten; der Code der öffentlichen Website lebt in einem Repo auf GitHub — eines pro Center, nicht alles in einem Sammel-Repo, wenn eure IT/Agentur so vorgeht.
Mitarbeiter:innen bekommen Zugriff mit einem eigenen GitHub-Konto (kein gemeinsames Passwort) — dafür sorgt die IT bzw. ein Admin in der Organisation.
Wenn die Technik den v0-Export ins Repo legt, musst du nicht Git bedienen — wichtig ist nur, dass alle wissen, wo euer Center-Code „offiziell“ liegt (Link vom Team).

Was IT / Technik einmalig idiotensicher erledigen soll (Checkliste)

GitHub-Organisation sawmuedev — neues Repository nur für dieses Center anlegen, z. B.:
- sinnvolles Muster: website-<center-slug> (Beispiel: website-palais-vest → voller Pfad: sawmuedev/website-palais-vest).
- Eine feste Namensregel fürs Team festhalten (immer website-… o. ä.) — so findet jeder sofort sein Center.
Zugriff für Kolleg:innen: im Repo unter Settings → Collaborators and teams (o. Manage access) einladen — persönliches GitHub-Konto pro Person oder eine Team-Gruppe in sawmuedev (z. B. redaktion / pro Center) mit Lese- und ggf. Schreibrecht, so wie eure IT Governance vorsieht.
Vercel — neues Projekt (nicht bestehendes wiederverwenden) → Import von genau diesem GitHub-Repo; eine Deployment-Pipeline = eine Live-/Preview-URL pro Center-Projekt.
Vercel-Umgebungsvariable (wie bisher, zu jedem Vercel-Projekt dazu): NEXT_PUBLIC_DASHBOARD_URL = eure API-Basis (z. B. https://dashboard.cockpit-os.de, ohne / am Ende). Nach dem Setzen: Redeploy, damit es greift.
- Signage (Kiosk + Companion): Cockpit-Signage bleibt; optional zusätzlich v0/Vercel — alles unter Website-Management → Frontend-Kanäle (v0). → Parallele Frontends
- Deploy Hook ans Cockpit: einmalig nach F3 — dann meldet Vercel die Live-URL selbst (Redaktion muss nichts im Dashboard eintragen).
Niemals echte Geheimnisse (z. B. sk_agencyos_…, Dashboard-Passwörter) in den Code oder in öffentliche Repo-Einträge — nur was zu öffentlichen Endpunkten gehört, kommt in die Doku/.env.example, echte Werte nur in Vercel (bzw. geheime Envs) von der IT.

Ergebnis: Pro Einzel-Center: 1× GitHub-Repo unter sawmuedev + 1× Vercel-Projekt + Cockpit für die Inhalte — alles auseinanderhaltbar, mit git history nachvollziehbar.

F2b — Multi-Center: ein Layout, viele Domains

Wenn mehrere Shopping Center dasselbe v0-Layout nutzen (gleiches websiteTemplate im Cockpit — z. B. ilg, mec-shopbox, rgw oder künftige Templates), brauchst du kein v0-Projekt pro Center.

Was	Multi-Center-Standard
v0	Ein Projekt (z. B. `website-<template>`); Instructions D + A–E + G (ggf. F); im Chat: Multi-Center-Layout, websiteTemplate = …
GitHub	Ein Repo, z. B. `sawmuedev/website-<template>`
Vercel	Ein Projekt; alle Center-Domains dort eintragen (jede Domain zeigt auf dieselbe Instanz)
Cockpit	Pro Center: Website aktiv, Domain hinterlegt, gleiches `websiteTemplate`
Neues Center	Domain in Vercel + Center im Cockpit — kein neues v0-Layout

IT-Env (zusätzlich): optional EXPECTED_WEBSITE_TEMPLATE=<websiteTemplate>; Preview auf *.vercel.app: DEFAULT_CENTER_SLUG=… oder URL ?center=slug.

Technik-Details im Kopier-Kasten Teil G auf v0 + Cockpit (So geht’s).

Was du in die E-Mail an die Technik schreiben kannst (Kopiervorlage)

Bitte laut unserer Anleitung (v0-Website A–Z, Abschnitt F2 + F3) einrichten:
- Neues GitHub-Repo in der Organisation sawmuedev, Namensschema z. B. website-<unser-center-slug>
- Eigenes Vercel-Projekt, verbunden mit diesem Repo
- NEXT_PUBLIC_DASHBOARD_URL in Vercel = <unsere API-Basis, ohne / am Ende>
- Deploy Hook ans Cockpit (F3): Register-Token + /api/cockpit-register + Hook nach Production-Deploy
- Mitarbeiter:innen, die an diesem Projekt sollen, mit ihrem persönlichen GitHub-Zugriff im Repo eintragen

F3 — Vercel Deploy Hook: Cockpit automatisch verbinden

Für Redaktion (wenn die Seite fertig ist):

Im v0-Chat (mit Cockpit-MCP) z. B.:

„Die Website ist fertig und soll live gehen. Domain: www.mein-center.de — bitte prüfen ob die Domain bei United Domains liegt und DNS/Go-Live erledigen.“

Der Assistent nutzt cockpit_agencyos_publish_website_live (zuerst dryRun: true). Den Text gibt es auch zum Kopieren unter Website-Management → Frontend-Kanäle (v0).

Einmalig IT: Abschnitt F3 (Vercel Deploy-Register) — danach kennt das Cockpit die Live-URL von selbst.

Danach: weiter in v0 bauen und Inhalte pflegen (Teil D). Im Live-Betrieb dürfen Kolleg:innen im v0-Chat oder im Cockpit ändern — beides landet in derselben Datenbank.

Für IT / Technik: Einmalig pro Vercel-Projekt (Website, Signage oder Companion). Additiv — bestehende Cockpit-Daten und Custom Domains bleiben unberührt.

Schneller (Team): v0 Team-Template einrichten — Shared Env einmal auf Vercel-Team-Ebene, pro Center nur COCKPIT_REGISTER_TOKEN + COCKPIT_CENTER_SLUG.

Schritt 1 — Register-Token im Cockpit

Cockpit → Website-Management → Frontend-Kanäle (v0)
Center oben links wählen (falls nötig)
Aufklappen: Für IT / v0-Setup → Register-Token erzeugen

Schritt 2 — Route ins v0-Projekt (einmalig)

Datei ins Repo legen (Vorlage im Cockpit-Monorepo):

apps/center-website/app/api/cockpit-register/route.ts

→ als app/api/cockpit-register/route.ts im v0/Vercel-Projekt.

Commit + Push → Vercel baut neu.

Schritt 3 — Umgebungsvariablen in Vercel (Copy-Paste)

Zwei Ebenen: Team-Shared einmal anlegen und jedes Center-Projekt verlinken. Pro Center nur die **Projekt-**Variablen unten. (Auch in v0 Instructions Teil A, Teil C, Teil J.)

A) Team Shared (einmal im Team, dann pro Projekt verlinken)

Vercel → Team Settings → Environment Variables → Shared anlegen, oder bestehende Shared-Variablen bearbeiten → Link to Projects → alle Center-Projekte auswählen.

Variable	Wert
`COCKPIT_DASHBOARD_URL`	`https://dashboard.cockpit-os.de`
`REVALIDATION_SECRET`	wie im Cockpit-Dashboard (Render)
`COCKPIT_FRONTEND_CHANNEL`	`website` · `signage` · `companion`

Bestehende Projekte: Shared greift nicht automatisch — im Projekt → Settings → Environment Variables → Link Shared Environment Variables → obige drei anhaken → Redeploy.

B) Nur dieses Vercel-Projekt (pro Center)

Projekt → Settings → Environment Variables → Production + Preview:

NEXT_PUBLIC_DASHBOARD_URL=https://dashboard.cockpit-os.de
COCKPIT_REGISTER_TOKEN=frt_HIER_TOKEN_AUS_COCKPIT_EINFÜGEN
COCKPIT_CENTER_SLUG=HIER_SLUG_EINTRAGEN
VERCEL_PROJECT_ID=prj_HIER_AUS_VERCEL_SETTINGS_GENERAL
COCKPIT_VERCEL_PROJECT_MODE=dedicated

Variable	Wert
`NEXT_PUBLIC_DASHBOARD_URL`	Gleiche API-Basis wie Teil A (Client + Build-Fallback) — projektbezogen
`COCKPIT_REGISTER_TOKEN`	Aus Cockpit → Frontend-Kanäle (v0) — niemals Team-Shared
`COCKPIT_CENTER_SLUG`	Center-Slug im Cockpit — muss zum Token passen
`VERCEL_PROJECT_ID`	Vercel → Settings → General → Project ID (`prj_…`) — Go-Live/DNS
`COCKPIT_VERCEL_PROJECT_MODE`	`dedicated` = 1 Center · `shared` = Multi-Center-Layout

Nicht noch einmal auf Projektebene setzen (sonst überschreibt es Shared): COCKPIT_DASHBOARD_URL, REVALIDATION_SECRET, COCKPIT_FRONTEND_CHANNEL.

Nach dem Speichern/Verlinken: Redeploy (Deployments → … → Redeploy).

Schritt 4 — Deploy Hook in Vercel anlegen (Copy-Paste)

Vercel → Projekt → Settings → Deploy Hooks
Create Hook
- Name: Cockpit Register
- Branch: main (oder euer Production-Branch)
Vercel zeigt eine Hook-URL, z. B.:

https://api.vercel.com/v1/integrations/deploy/xxxxx/yyyyy

Das ist nicht die Ziel-URL. Der Hook startet nur ein Deploy. Für die Cockpit-Meldung braucht ihr zusätzlich einen Aufruf nach erfolgreichem Deploy:

Variante A (empfohlen): Vercel → Settings → Git → bei Deploy Hooks einen zweiten Mechanismus nutzen oder in CI:

Nach jedem Production-Deploy per Cron/CI oder Vercel Integration aufrufen:

POST https://<euer-projekt>.vercel.app/api/cockpit-register

(Kein Body nötig — die Route liest VERCEL_URL und den Register-Token aus den Envs.)

Variante B (einfach, manueller Test): Einmal nach Go-Live im Terminal oder als IT-Check:

curl -X POST "https://<euer-projekt>.vercel.app/api/cockpit-register"

Antwort sollte "success": true und eine message wie „Mit Cockpit verbunden“ enthalten.

Variante C (Vercel „Deploy Hook“ + Build-Step): In package.json optional (nur wenn IT Build-Skripte pflegt):

"scripts": {
  "postbuild": "node scripts/cockpit-register-after-deploy.mjs"
}

Minimal-Skript scripts/cockpit-register-after-deploy.mjs (nur auf Vercel Production, VERCEL_ENV=production):

if (process.env.VERCEL_ENV !== 'production') process.exit(0);
const base = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : null;
if (!base) process.exit(0);
fetch(`${base}/api/cockpit-register`, { method: 'POST' })
  .then((r) => r.json())
  .then((j) => console.log('[cockpit-register]', j))
  .catch((e) => console.warn('[cockpit-register]', e.message));

Für Redaktion unsichtbar

Sobald Schritt 1–4 stehen, reicht Deploy in v0/Vercel — das Cockpit zeigt unter Website-Management → Frontend-Kanäle (v0) „Zuletzt von v0/Vercel gemeldet: …“. Kein manuelles URL-Einfügen.

Schritt 5 — Prüfen (IT oder Redaktion)

Cockpit → Website-Management → Frontend-Kanäle (v0) → Verbindung prüfen
Oder: Test-News im Cockpit veröffentlichen → Live-Website sollte sich innerhalb weniger Sekunden aktualisieren (wenn REVALIDATION_SECRET gesetzt ist)

Signage / Companion (zusätzliches v0-Projekt)

Gleiche Schritte — nur in Schritt 3:

COCKPIT_FRONTEND_CHANNEL=signage

Companion oft gleiches Signage-Projekt; dann reicht signage, Companion-Pfad kommt aus dem Template. Eigenes Companion-Projekt: COCKPIT_FRONTEND_CHANNEL=companion.

E-Mail an IT (Kopiervorlage, komplett)

Center: <Name>
Center-Slug: <slug>
Vercel-Projekt: <URL zum Vercel-Projekt>

Bitte einmalig laut v0-Website A–Z Abschnitt F3:

1) Cockpit → Website-Management → Frontend-Kanäle (v0) → Register-Token erzeugen
2) app/api/cockpit-register/route.ts aus Cockpit-Vorlage ins Repo
3) Vercel Env:
   Team Shared (Projekt verlinken): COCKPIT_DASHBOARD_URL, REVALIDATION_SECRET, COCKPIT_FRONTEND_CHANNEL=website
   Nur Projekt: NEXT_PUBLIC_DASHBOARD_URL, COCKPIT_REGISTER_TOKEN=<frt_…>, COCKPIT_CENTER_SLUG=<slug>
   Optional Projekt: VERCEL_PROJECT_ID, COCKPIT_VERCEL_PROJECT_MODE=dedicated
4) Nach Production-Deploy: POST https://<projekt>.vercel.app/api/cockpit-register
   (oder postbuild-Skript laut F3 Variante C)

Redaktion arbeitet weiter in v0 — URL-Eintrag im Cockpit ist dann nicht nötig.

Technische Details: v0 Deploy ans Cockpit melden

G — „Wenn etwas fehlt“: Lesen, Schreiben, leere Karten

Was die Website darf (Lesen)

Die öffentliche Cockpit-API liefert nur, was fürs Publikum vorgesehen ist (Shops, News, …) — so wie eure offizielle Center-Seite. Kennwörter fürs Dashboard gehören nicht in v0-Code für Besucher.

Was die Website nicht per Knopfdruck ersetzen kann

Cockpit-Pflege: Neue Shops, News, Texte, Freigaben — ausschließlich in Cockpit (oder über interne Prozesse).
„Schreibt mit, wenn leer“: Eine reine v0-Seite füllt kein leeres News-Feld in der Datenbank. Gegenmaßnahme: Im Cockpit anlegen; die Website zeigt es beim nächsten Laden.
Gästebuch, Formular → direkt in Cockpit: Dafür braucht man fast immer Zusatz-Software (Sicherheit) — nicht in dieser A–Z-Grundanleitung. Redaktionell: E-Mail-Links oder euer Kontakt-Tool nutzen, bis eure IT etwas anderes definiert.

Häufige Symptome (ohne Schuld-Frage)

Symptom	Meist so lösen
Leere Shop-Liste	Im Cockpit: Shops anlegen, Aktiv, für Website sichtbar; Slug in den Instructions prüfen.
Kein Logo / keine Farbe	Im Cockpit Branding/Theme prüfen; Technik/API: `public-visitor-surface` → `data.center` (steht in Instructions).
Hero leer / Seite „kaputt“ / Fehler in Konsole	Oft falsche API (v0 ruft `website-config` ohne Login → 401). Instructions Teil A/B/C/D neu einspielen; Hero aus `data.templatePublicContent.content`, nicht aus erfundenen `getHeroSlides()`.
404 im Browser / „Center nicht da“	Website fürs Center deaktiviert oder falscher Slug.
Ich wollte nur eine Zeile in den News	Cockpit → News bearbeiten — nicht in v0 tippen und „hoffen, dass’s synchron wird“.

H — Weitere Hilfen (nur lesen, wenn nötig)

Etwas technischer, aber voll verständig: v0 mit öffentlicher API (Schritte)
Gleiche A/B/C-Texte, nur fokus „nur Schritte“: v0 + Cockpit (So geht’s)
Tiefer gehend (JSON, Fehler, Medien): Beispiele & Medien (Developer)
v0-Designs als ZIP ins Cockpit (anderer Weg, nicht open API): Templates – Intro
v0, Git, GitHub, Vercel, Claude auf dem Mac (Einrichtung + Alltag, commit/push, klonen): Mac-Setup & Alltag — für IT/Setup und für Redaktion Teil 2 (Alltag)
Website direkt mit Claude bearbeiten (ohne v0, in normalen Sätzen): Website mit Claude bauen & bearbeiten — inkl. Fälle ohne Cockpit als Datenquelle

Checkliste: Vor dem Teilen in der Arbeitsgruppe

Slug in Teil A ersetzt (Einzel-Center) oder Teil G aktiv (Multi-Center)
Alle Instructions (D, A, B, C, E; ggf. F; ggf. G) in v0 aktiv — Teil D (Cockpit Workflow) als erstes
Website im Cockpit aktiv
An Technik: Export (ZIP/Repo) + Kurztext (API, Slug, NEXT_PUBLIC_DASHBOARD_URL)
(Einzel-Center) F2 erfüllt: sawmuedev/website-… + eigenes Vercel-Projekt
(Multi-Center, shared layout) F2b erfüllt: ein Repo + ein Vercel-Projekt + alle Domains
F3: IT hat Deploy Hook / POST …/api/cockpit-register eingerichtet (Live-URL automatisch im Cockpit)
Instruction Teil J in v0 aktiv (Fallback: Chat meldet Deploy-URL)
Wissen, dass Inhalte in Cockpit leben, v0 hauptsächlich anzeigen und gestalten hilft

Wenn alles Häkchen da sind, hast du den A–Z-Weg für die Redaktion geschafft — alles weitere ist Feinschliff mit eurem Team.

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /content-creator-handbuch/v0-website-redaktion-von-a-bis-z

Das Wichtigste in 30 Sekunden​

A — Account und Zugang​

B — Begriffe, die du einmal gesehen haben musst​

C — Vor v0: Kurz im Cockpit prüfen (5 Minuten)​

D — v0: Instructions (max. 10 × 5000 Zeichen)​

E — v0-Chat: Wie die Seite aussehen soll​

F — Fertig machen: Export an die Technik geben​

F2 — GitHub & Vercel: eine Ordnung pro Center (Firmen-Standard)​

Was du als Redaktion wissen musst (kurz)​

Was IT / Technik einmalig idiotensicher erledigen soll (Checkliste)​

F2b — Multi-Center: ein Layout, viele Domains​

Was du in die E-Mail an die Technik schreiben kannst (Kopiervorlage)​

F3 — Vercel Deploy Hook: Cockpit automatisch verbinden​

Schritt 1 — Register-Token im Cockpit​

Schritt 2 — Route ins v0-Projekt (einmalig)​

Schritt 3 — Umgebungsvariablen in Vercel (Copy-Paste)​

A) Team Shared (einmal im Team, dann pro Projekt verlinken)​

B) Nur dieses Vercel-Projekt (pro Center)​

Schritt 4 — Deploy Hook in Vercel anlegen (Copy-Paste)​

Schritt 5 — Prüfen (IT oder Redaktion)​

Signage / Companion (zusätzliches v0-Projekt)​

E-Mail an IT (Kopiervorlage, komplett)​

G — „Wenn etwas fehlt“: Lesen, Schreiben, leere Karten​

Was die Website darf (Lesen)​

Was die Website nicht per Knopfdruck ersetzen kann​

Häufige Symptome (ohne Schuld-Frage)​

H — Weitere Hilfen (nur lesen, wenn nötig)​

Checkliste: Vor dem Teilen in der Arbeitsgruppe​