Cursor AI, GitHub, Vercel und Cloudflare – vier Werkzeuge, ein nahtloser Workflow. Kein Server-Setup, kein manuelles Deployment. Nur Prompts und Ergebnisse.
Starte Cursor AI. Klicke oben links auf File → Open Folder und wähle einen vorhandenen Ordner – oder erstelle einen neuen, z.B. ~/Projekte/mein-relaunch. Cursor lädt den Ordner als Projekt.
Der linke Explorer zeigt alle Dateien und Ordner deines Projekts. Neue Dateien, die Cursor erstellt, erscheinen hier sofort. Du siehst jederzeit, was lokal auf deinem Rechner liegt.
Rechtsklick im Explorer → New File → index.html. Ab jetzt arbeitet Cursor in diesem Ordner. Alle generierten Dateien landen direkt hier – lokal, offline verfügbar, unter deiner Kontrolle.
Lege gleich passende Unterordner an: /assets/images/ für Grafiken, /assets/fonts/ für Schriftarten. So bleiben übernommene Dateien aus der bestehenden Webseite sauber organisiert.
Spiegelt die komplette Webseite lokal – HTML, CSS, Bilder und alle verlinkten Dateien. Einfach URL eingeben, Zielordner wählen, starten. Ideal wenn kein FTP-Zugang vorhanden ist.
Direkter Zugriff auf den Hosting-Server. Vollständige Kontrolle über alle Dateien – auch solche, die bei einem Browser-Download nicht erfasst werden (z.B. serverseitige Konfigurationen).
Kopiere die heruntergeladenen Assets (Logos, Bilder, Fonts) aus dem Download-Ordner in deinen Cursor-Projektordner – z.B. nach /assets/images/. Cursor erkennt sie sofort im Explorer.
Im Cursor-Chat einfach @dateiname.png eintippen – Cursor zeigt Vorschläge aus deinem Projekt. So kann die KI direkt auf deine Grafiken zugreifen und sie im Relaunch berücksichtigen.
Füge heruntergeladene HTML- oder CSS-Dateien ebenfalls in den Projektordner. Mit @index.html oder @style.css kann Cursor das bestehende Corporate Design erkennen und übernehmen.
Nicht alles vom alten Server ist sinnvoll. Wähle gezielt: Logo, Schriften, Hauptgrafiken, ggf. bestehende CSS-Variablen. Überflüssige CMS-Dateien oder Server-Konfigurationen weglassen.
KI-gestützter Code-Editor. Du beschreibst in natürlicher Sprache – Cursor schreibt den Code. Ideal ohne tiefe Programmierkenntnisse.
Speichert alle Dateien deiner neuen Webseite und protokolliert jede Änderung. Jederzeit zurück zu einem früheren Stand. Und Vercel hört aktiv zu.
Sobald du nach GitHub pushst, deployed Vercel automatisch. Live-Link zum Testen – ohne Server-Setup, ohne manuelle Uploads, kostenlos.
Steuerung deiner Domain, SSL-Zertifikat, Statistiken und Angriffsschutz. Der kostenfreie Account reicht für den Start vollständig aus.
DNS-Einträge, SSL-Zertifikat, Statistiken und Schutz deiner Domain – alles über den kostenlosen Cloudflare-Account. Sobald Vercel als Nameserver eingetragen ist, läuft deine echte Domain über denselben automatisierten Prozess.
Führe die Prompts in dieser Reihenfolge aus. Nach jedem Schritt: Ergebnis lesen, einordnen, ggf. für den nächsten Prompt nutzen. Am Ende der Änderungen: Commit und Push – die Befehle kannst du aus dem Chat ins Cursor-Terminal kopieren (git add ., git commit -m "…", git push).
Nach Änderungen an der Seite immer Commit und Push ausführen – z. B. Befehle aus dem Cursor-Chat ins integrierte Terminal kopieren. Warum manchmal keine erneute Anmeldung nötig ist: Cursor nutzt deinen lokalen Git-Zustand; wenn der SSH-Key einmal entsperrt ist (oder die Passphrase im Kennwort-Manager/Keychain gespeichert), übernimmt das Terminal das. Bei manueller Nutzung im eigenen Terminal wird die Passphrase bei jedem Push abgefragt, sofern nicht gespeichert.
Für Commit und Push auf GitHub einen SSH-Key verwenden – keine Kennwörter im Browser, keine Token-Pflege. Passphrase im Kennwort-Manager ablegen; dann liefert sie die Authentifizierung bei Bedarf.
ssh-keygen -t ed25519 -C "deine-email@beispiel.de" – Enter, optional Passphrase setzen und im Kennwort-Manager speichern.cat ~/.ssh/id_ed25519.pub (bzw. id_rsa.pub bei RSA).git remote set-url origin git@github.com:nutzer/repo.git. Danach: Commit wie gewohnt, Push nutzt den SSH-Key.Am Ende von Änderungen: git add ., git commit -m "…", git push – die Befehle kannst du aus dem Chat ins Cursor-Terminal kopieren.
Rules und Skills legen fest, wie deine Webseite und alle zugehörigen Seiten (z. B. Landing Pages) aussehen und aufgebaut sind. Die KI hält sich daran – einheitliches Layout, Farben, Typo, responsive. So bleiben alle Unterseiten konsistent.
Einen Claude Skill bzw. Cursor Rules anlegen, die dein CI und deine Layout-Vorgaben beschreiben (Farben, Schriften, responsive, wiederkehrende Elemente).
.cursor/rules/ anlegen (oder vorhandenes Rules-Repo als Submodule einbinden)..mdc-Dateien mit Beschreibung (description), ggf. globs (z. B. **/*.html), und den konkreten Vorgaben: Farben, Typografie, Breakpoints, Komponenten.Nach Anpassungen: Commit und Push; Befehle ggf. aus dem Chat ins Terminal kopieren.
Ein Template-Repo enthält das vollständige Projektgerüst inkl. Rules (als Submodule). Du nutzt es je nach Situation unterschiedlich:
meine-landing.de).git clone --recurse-submodules git@github.com:nutzer/meine-landing.de.git.npm install und npm run build (falls im Template vorgesehen); mit Vercel verbinden, Include Git submodules aktivieren.berent-rules-setup ausführen (oder Setup-Skript von deinem Rules-Repo). Das hängt das Rules-Repo als Submodule unter .cursor/rules ein.git add .gitmodules .cursor/rules, git commit -m "Rules als Submodule einbinden", git push. In Vercel „Include Git submodules“ aktivieren.Rules zentral aktualisieren: git submodule update --remote .cursor/rules, dann Commit und Push. Alle Projekte können so die gleichen Rules nutzen.