Zum Hauptinhalt springen

Website mit Claude bauen und bearbeiten

Diese Anleitung ist für alle, die keine Ahnung vom Programmieren haben und trotzdem eine Website mit Claude in normalen deutschen Sätzen bauen oder verändern wollen.

Kurz vorab: v0 oder Claude — was ist der Unterschied?
v0Claude
WofürNeue Website von Null entwerfenBestehende Website bearbeiten — oder auch von Null, wenn ihr kein v0 habt
WieIm Browser tippen, Entwurf herunterladenClaude spricht direkt mit euren Dateien auf dem Mac
Brauchtv0-Konto, Instructions A/B/CClaude Desktop + IT richtet Dateizugriff einmalig ein
ErgebnisCode als DownloadDateien direkt geändert — sofort in GitHub Desktop sichtbar

Faustregel: Habt ihr schon eine Website als Code auf eurem Rechner? → Claude. Wollt ihr komplett neu starten? → v0. Beides geht auch nacheinander.

Wie der Ablauf aussieht (Überblick)​

Ihr sagt Claude, was ihr wollt
          ↓
Claude liest eure Website-Dateien und ändert sie
          ↓
GitHub Desktop: "Holen" (was andere geändert haben) → Sicherung anlegen → Hochladen
          ↓
Vercel baut die Website automatisch neu

Das ist alles. Ihr tippt nur Sätze in Claude. Das Technische erledigt Claude.

Teil 1 — Einmalige Einrichtung (macht die IT, einmal pro Mac)​

Nur für die Person, die Macs einrichtet

Dieser Teil ist für die IT oder den Kollegen, der die Macs der Redaktion vorbereitet. Redakteure überspringen diesen Teil.

Damit Claude direkt auf die Website-Dateien zugreifen kann, braucht Claude einen sogenannten „Dateizugriff". Das ist eine kleine Einstellung, die einmal gemacht wird — danach merkt man davon nichts mehr.

Schritt 1 — Node.js installieren​

Node.js ist ein kleines Programm, das Claude braucht um Dateien lesen und schreiben zu können. Einfach installieren, kein Wissen nötig.

  1. nodejs.org/de öffnen → großen Button „LTS" herunterladen
  2. Installer starten → immer Weiter / Installieren klicken, keine Einstellungen ändern
  3. Fertig. Prüfen: Terminal öffnen, node --version eintippen → es erscheint eine Zahl wie v22.x.x

Schritt 2 — Claude Desktop installieren (falls noch nicht geschehen)​

claude.ai/download → Mac-Version herunterladen und installieren. Beim ersten Start mit dem Firmen-Claude-Konto anmelden.

Schritt 3 — Repository auf dem Mac klonen (falls noch nicht geschehen)​

Das Repository muss als Ordner auf dem Mac vorliegen. Wie das geht, steht in Teil 1 der Mac-Setup-Anleitung — kurz: GitHub Desktop → File → Clone repository → URL von der IT.

Notiere den Pfad, wo der Ordner liegt, z. B.: /Users/max/Documents/Arbeit/Center-Webs/website-unser-center

Schritt 4 — Claude den Dateizugriff geben​

Claude Desktop hat eine Konfigurationsdatei, in die wir eine neue Zeile eintragen. Das klingt komplizierter als es ist.

  1. Im Finder oben in der Menüleiste: Gehe zu → Gehe zum Ordner… → eingeben:

    ~/Library/Application Support/Claude

    → Gehe zu klicken

  2. In diesem Ordner gibt es eine Datei namens claude_desktop_config.json. Falls sie nicht existiert: neue Textdatei mit genau diesem Namen anlegen.

  3. Datei mit TextEdit öffnen. Falls TextEdit sie als Rich-Text öffnet: Format → In reinen Text umwandeln wählen.

  4. Den gesamten Inhalt durch folgendes ersetzen (wichtig: HIER_PFAD durch den echten Ordner-Pfad ersetzen):

    {
      "mcpServers": {
        "filesystem": {
          "command": "npx",
          "args": [
            "-y",
            "@modelcontextprotocol/server-filesystem",
            "HIER_PFAD"
          ]
        }
      }
    }

    Beispiel (Pfad muss zum echten Ordner passen):

    {
      "mcpServers": {
        "filesystem": {
          "command": "npx",
          "args": [
            "-y",
            "@modelcontextprotocol/server-filesystem",
            "/Users/max/Documents/Arbeit/Center-Webs"
          ]
        }
      }
    }
    Mehrere Center?

    Gebt den übergeordneten Ordner an, der alle Center-Ordner enthält (z. B. Center-Webs). Dann kann Claude auf alle zugreifen.

    Wenn schon ein Cockpit-MCP eingerichtet ist

    Falls bereits ein "mcpServers"-Eintrag für cockpit-os in der Datei steht (aus der Cockpit-MCP-Anleitung), den Dateizugriff-Block ergänzen, nicht ersetzen:

    {
      "mcpServers": {
        "cockpit-os": { ... vorhandener Eintrag ... },
        "filesystem": {
          "command": "npx",
          "args": ["-y", "@modelcontextprotocol/server-filesystem", "HIER_PFAD"]
        }
      }
    }

  5. Datei Speichern (⌘S)

  6. Claude Desktop vollständig beenden (nicht nur das Fenster schließen, sondern im Dock rechtsklick → Beenden) und neu starten.

  7. Prüfen: In Claude einen neuen Chat öffnen und schreiben:

    Liste mir alle Dateien auf, die du in meinem Website-Ordner siehst.

    Wenn Claude Dateinamen auflistet — fertig, es funktioniert.

Checkliste IT-Einrichtung​

  • Node.js installiert (node --version zeigt eine Zahl)
  • Claude Desktop installiert und angemeldet
  • Repo-Ordner auf dem Mac geklont
  • claude_desktop_config.json mit Dateizugriff-Eintrag gespeichert
  • Claude neu gestartet und Dateizugriff geprüft
  • Redakteur weiß, wo der Website-Ordner liegt (Pfad aufschreiben oder als Lesezeichen)

Teil 2 — Alltag: Website in Sätzen bearbeiten​

Für die Redaktion

Ab hier: was ihr täglich macht. Die IT-Einrichtung oben braucht ihr nicht.

Vor dem Arbeiten: immer erst holen​

Bevor ihr Claude etwas ändern lasst, holt ihr kurz, was andere vielleicht seit gestern hochgeladen haben:

GitHub Desktop öffnen → „Fetch origin" → „Pull origin" (falls vorgeschlagen)

Damit habt ihr den aktuellsten Stand. Mehr dazu in der Mac-Setup-Anleitung.

Claude sagen, was ihr wollt​

Einfach Claude Desktop öffnen und in einem neuen Chat auf Deutsch beschreiben, was sich ändern soll.

So redet man mit Claude

Stellt euch vor, ihr erklärt einem Kollegen, der gut programmieren kann, was ihr auf der Seite sehen wollt. Keine Fachsprache nötig — je konkreter, desto besser.

Damit Claude weiß, wo eure Dateien sind, nennt am Anfang kurz den Ordner:

Ich arbeite an der Website im Ordner "website-unser-center".
Bitte [was ihr wollt].

Beispiele: Was ihr Claude sagen könnt​

Was ihr wolltWas ihr Claude schreibt
Text auf der Startseite ändernÄndere auf der Startseite den Begrüßungstext in: "Willkommen im Palais Vest — Europas modernstes Shoppingcenter."
Neuen Abschnitt hinzufügenFüge unter den Shops einen Abschnitt mit unserer Adresse ein: Hauptstraße 1, 12345 Musterstadt. Dazu Öffnungszeiten Mo–Sa 10–20 Uhr.
Etwas entfernenEntferne den "Jetzt einkaufen"-Button auf der Startseite.
Farbe ändernÄndere die Farbe des Headers auf ein dunkles Grün, passend zu unserem Logo.
Bild austauschenTausche das Headerbild aus. Die neue Datei heißt "header-sommer-2026.jpg" und liegt im public-Ordner.
Neuen Bereich von NullBaue unter dem Header einen Bereich mit 3 Karten: "Parken", "Anfahrt", "Kontakt". Jede Karte hat ein passendes Symbol und einen kurzen Text, den ich dir gleich gebe.
Etwas korrigierenKorrigiere auf der Seite "shops" den Namen von "H&M Kinf" auf "H&M Kids".

Mit Cockpit-Daten und ohne Cockpit-Daten​

Je nachdem, woher die Inhalte auf eurer Website kommen, geht ihr unterschiedlich vor:

Fall A — Eure Website zeigt Daten aus dem Cockpit (Shops, News, Öffnungszeiten, …)

Hier gilt: Inhalte (echte Texte, Shops, News) immer im Cockpit ändern — nicht Claude bitten, die Daten „einzutippen". Die Website holt die Daten automatisch beim Laden.

Claude hilft hier mit Layout und Aussehen:

  • „Zeige die Shops als große Kacheln statt als Liste"
  • „Füge über der Shop-Liste eine kurze Einleitung ein"
  • „Ändere die Schriftgröße der News-Überschriften"

Fall B — Eure Website hat feste Texte (kein Cockpit, alles direkt in den Dateien)

Hier kann Claude alles ändern — Texte, Bilder, Abschnitte. Einfach direkt sagen, was sich ändern soll.

Fall C — Neue Seite komplett von Null (Claude baut alles)

Gebt Claude eine genaue Beschreibung — was soll drauf sein, welche Abschnitte, welche Farben, ob Daten aus dem Cockpit kommen oder nicht:

Baue mir eine neue einfache Website für unser Center. 
Inhalt: oben ein großes Bild mit dem Center-Namen "Palais Vest", 
darunter drei Kacheln für Parken / Anfahrt / Kontakt mit kurzen Texten, 
ganz unten Impressum und Datenschutz-Links (erstmal leer). 
Kein Cockpit, alles fester Text. Farbe: dunkelgrün und weiß.

Nachher: Änderungen veröffentlichen​

Wenn Claude fertig ist und ihr zufrieden seid:

  1. GitHub Desktop öffnen — dort seht ihr alle Dateien, die Claude geändert hat (links die Liste, rechts was sich genau geändert hat)
  2. Unten bei Summary einen kurzen Satz eintragen, was ihr gemacht habt, z. B. „Adresse und Öffnungszeiten ergänzt"
  3. Commit to main klicken
  4. Push origin klicken — fertig

Vercel bemerkt das und baut die Website automatisch neu. Nach ca. 1–2 Minuten ist die Änderung live.

Ausführlicher mit Bildbeschreibung: Mac-Setup-Anleitung, Teil 2

Was Claude kann — und was nicht​

Claude kannClaude kann nicht
Texte auf der Seite ändernInhalte ins Cockpit schreiben (dafür: Cockpit-Dashboard oder Cockpit-MCP)
Neue Abschnitte, Karten, Bereiche hinzufügenBilder beschaffen — die muss jemand in den public-Ordner legen
Farben, Abstände, Schriften anpassenDomains einrichten oder Vercel-Einstellungen ändern
Fehler im Code erkennen und reparierenEure Cockpit-Daten ändern, wenn Cockpit nicht verbunden ist
Vorhandene Seiten komplett umbauenWissen, ob etwas „schön" aussieht — Vorschau immer in Vercel prüfen
Eine komplett neue Website bauenGarantieren, dass nichts kaputtgeht — daher immer erst Pull, und GitHub hat die Versionsgeschichte
Wenn Claude einen Fehler macht

Kein Problem — GitHub Desktop zeigt genau, was geändert wurde. Und weil alles versioniert ist, kann man jederzeit auf einen früheren Stand zurück. Einfach IT fragen, falls nötig.

Häufige Fragen​

„Claude sagt, er kann keine Dateien sehen"

Wahrscheinlich wurde der Dateizugriff nicht eingerichtet oder Claude wurde nicht neu gestartet. → IT fragen, Schritt 4 der IT-Einrichtung wiederholen.

„Ich weiß nicht, wie der Ordner heißt"

In GitHub Desktop: oben steht der Repo-Name, im Menü Repository → Show in Finder zeigt den genauen Ordner.

„Vercel hat nach dem Push nichts geändert"

Kurz warten (1–2 Min.) und die Vercel-Seite neu laden. Falls immer noch nichts: Vercel-Dashboard prüfen — dort gibt es unter Deployments eine Liste der letzten Builds mit Status. IT benachrichtigen falls Fehler gezeigt werden.

„Claude hat zu viel geändert oder etwas Falsches"

Einfach in GitHub Desktop: rechtsklick auf die Datei → Discard Changes — dann ist es wieder wie vorher. Oder IT bitten, den letzten Commit rückgängig zu machen.

„Soll ich v0 oder Claude nehmen?"

Kurze Entscheidungshilfe:

  • Neue Website komplett von Null, ihr habt noch keine Dateien → v0
  • Ihr habt bereits Code auf dem Rechner und wollt etwas ändern → Claude
  • Ihr wollt großartige Design-Entwürfe mit Cockpit-Daten ausprobieren → v0
  • Ihr wollt schnell einen Text oder Abschnitt ändern → Claude

Fragen zu GitHub Desktop (holen, sichern, hochladen): Mac-Setup & Alltag
Inhalte im Cockpit pflegen (Shops, News, …): Cockpit-Dashboard
Claude mit Cockpit verbinden (lesen & schreiben): Claude & Cockpit MCP

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /content-creator-handbuch/redaktion-claude-website-workflow