Ein Quellprojekt für deinen lokalen Cursor-Editor

Website-Vorlagen für Cursor. Erstelle deine eigene Website in Cursor mit deinem gewählten Design und fertigen Dateien als Ausgangspunkt.

Öffne einen vollständigen Website-Ordner in Cursor. Gib Agent freigegebene Inhalte, bitte um gezielte Änderungen und vergleiche Dateiunterschiede mit dem Browserergebnis.

Ein Design zum Öffnen in Cursor wählen Projektkontext prüfen

Offset

Primefolio

Forma Studio

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Cursor Agent · Website-Projektordner

Lies index.html, RECREATE.md und die Assets in diesem Ordner. Zeige mir vor der Bearbeitung, wo Überschrift, Bilder und Kontaktlinks liegen.

KI · Beispielantwort

Ich prüfe die Dateien und liste Sektionen, Bildpfade und Links auf. Außerdem kennzeichne ich Formulare, die eine Aktion nur demonstrieren.

Verwende das vorhandene HTML. Meine Texte und Bilder liegen im Ordner materials.

KI · Beispielantwort

Ich ordne die Materialien den bestehenden Sektionen zu und frage nach fehlenden Inhalten.

Nächste Schritte

Ordner öffnen
Entpacke das Projekt und gib dem Agent Zugriff.
Seite prüfen
Lies HTML und Anleitung vor dem Austausch von Inhalten.
Eigene Materialien ergänzen
Gib eigene Texte, Bilder und das echte Kontaktziel an.

Ziel: Der Agent arbeitet an deinen tatsächlichen Website-Dateien.

Beispielablauf. Keine Live-Verbindung zu einer KI.

01 / Ordner öffnen

Was öffne ich in Cursor?

Entpacke den Download und öffne den ganzen Ordner in Cursor. Wähle Agent, gib Zugriff und lass index.html sowie RECREATE.md lesen. Danach kann er die bestehende Seite nach deinen schriftlichen Anweisungen ändern.

Website-Dateien + Designanweisungen

Vorhandenes Frontend

Direkte Bearbeitung beginnt mit der gelieferten Seite.

Design-Leitfaden

RECREATE.md beschreibt das Originaldesign; dein Briefing definiert die Anpassung.

Quelldateien und technische Details ansehen

Die tatsächlichen Projektdateien

05-offset · Aktuell geprüftes ZIP

Aktueller Produktdownload geprüft am 2. Oktober 2026. Dateien und externe Ressourcen gehören zu diesem Projekt; andere Templates unterscheiden sich.

index.html
RECREATE.md
assets/contour.svg
assets/fern.png
assets/form-poster.svg
assets/geometric-print.svg
assets/glass.png
assets/packaging.png
assets/ribbon.png

Was die Originalanleitung festlegt

05-offset/RECREATE.md · L6

Die Anleitung beschreibt die ursprüngliche fiktive Seite. Trenne ihre Aufgabe von den Änderungen für dein eigenes Unternehmen.

Build `index.html` in English, with inline CSS and vanilla JavaScript, plus an `assets/` directory containing the seven supplied companion image files listed in section 9. Preserve those files byte-for-byte. There is no framework, bundler, package installation, build step, module loader, external JavaScript library, canvas, or WebGL. Target a current Chromium desktop browser and responsive touch layouts. Serve the directory with a local static HTTP server for verification; the page also uses only ordinary file-compatible HTML and remote HTTPS resources when opened as a file. Runtime is **network**: the seven image URLs and Google Fonts remain remote runtime dependencies. The local companion files are part of the deliverable, not an automatic runtime fallback. Do not replace the required remote URLs with local paths. There are no bundled fonts, service workers, analytics, API endpoints, cookies, storage writes, or real message delivery.

Cursor Agent ↗ Cursor quickstart ↗

AI ChatBeispielablauf

Cursor Agent · Vorhandene Website anpassen

Ändere Firmenname, Überschrift und Leistungsbeschreibungen mit meinen Texten. Behalte das Layout und ersetze nur die angegebenen Bilder.

KI · Beispielantwort

Ich bearbeite das bestehende HTML, behalte die übrigen Sektionen und zeige die geänderten Dateien.

Verlinke den Hauptbutton auf meine Buchungsseite mit der angegebenen URL.

KI · Beispielantwort

Ich aktualisiere den Buttonlink und prüfe ihn zusammen mit der geänderten Überschrift im Browser.

Nächste Schritte

Eigene Inhalte liefern
Gib genaue Texte, Bilddateinamen und Linkziele an.
Template bearbeiten
Lass bestehende Dateien bearbeiten und gewünschte Teile erhalten.
Vorschau prüfen
Lies die neuen Texte und teste echte Links auf Handy und Desktop.

Ziel: Dein Unternehmen im ausgewählten Design.

Beispielablauf. Keine Live-Verbindung zu einer KI.

02 / Deine echten Arbeiten

Was macht aus einem Beispielportfolio mein Portfolio?

Deine Arbeitsbilder, Projektnamen, Rollenbeschreibungen und freigegebenen Fakten. Sage Agent, wo jeder Inhalt hingehört und welche Beispiele entfernt werden müssen.

Bilder mit NutzungsrechtLiefere Dateinamen und gewünschte Ausschnitte. Prüfe jedes Bild in Karte oder Detailansicht.Fakten, die du vertreten kannstNutze echte Erfahrung und Ergebnisse. Fehlende Angaben dürfen keine erfundenen Kunden oder Zitate erzeugen.

Lokal auf diesem Gerät markiert; nichts wird übermittelt.

Bilder vor der Bearbeitung zuordnen

Dein eigener Arbeitsplan

03 / Gezielte Änderung

Wie ändere ich etwas ohne vollständigen Neuaufbau?

Wähle einen klaren Seitenteil und beschreibe das gewünschte Ergebnis. Lege fest, dass das übrige Layout bleibt, und bitte Agent, gespeicherte Änderungen zu erklären.

Beispiel für KI-BearbeitungFormwell

Rücke ausgehend von der vorbereiteten Alder-Farbversion die Einleitung höher und ergänze darunter „Erzähl uns von deinem Projekt“.

KI · Beispielantwort

Die vorbereitete Vorschau passt Einleitungsabstände an und ergänzt einen Kontaktlink. Vergleiche Layout und Farben. Der Brief-Download bleibt lokal und sendet keine Anfrage.

index.html · RECREATE.md

Formwell · vorbereitete HTML-Vorschau

Ganze Vorschau öffnen ↗

Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.

Quelldateien und technische Details ansehen

Drei Bildpositionen, drei eigene Lerngrafiken

05-offset/index.html · first three image src attributes

Die vorbereitete Version ersetzt drei dekorative Bilder durch eigens erstellte geometrische SVGs im HTML. Das sind Lerngrafiken, keine Kundenarbeiten oder Ersatzfotos. Das Original bleibt unverändert.

e816dbef5b2d8164b54dd6612ea14b6ac8b59689d1b17e1a536b94c3a99ac621-ribbon.png → owned-teaching-study-1.svg (embedded data URI)
4273b900231f577d1bb47f48276b3eaea59f7439dd6e3d9ece7b2c70f4aa9e17-glass.png → owned-teaching-study-2.svg (embedded data URI)
792cc3188c1ccd9bfb5e5b71f36964769a75d7cf06cb9ee260f925faac751a78-fern.png → owned-teaching-study-3.svg (embedded data URI)

Originalprojekt · Offset

Diese Auszüge stammen aus dem geprüften englischen Original. Die folgenden Beispiele sind vorbereitete Quelltextänderungen, keine Live-KI-Sitzung. Unternehmen und Arbeiten bleiben fiktiv.

Ganze Vorschau öffnen ↗

Vorbereitete Quelltextänderung

Diese vorbereitete Version ändert ausgewählte Texte oder Bilder im selben Projekt. Struktur und Beispielinhalte bleiben erhalten. Vergleiche die Dateien vor einer ähnlichen Änderung für dein Unternehmen.

Ganze Vorschau öffnen ↗

AI ChatBeispielablauf

Cursor Agent · Bearbeitete Seite prüfen

Vergleiche die bearbeitete Seite mit meinen Anweisungen. Prüfe Überschrift, Bildpfade, Navigation und Kontaktbutton auf Desktop- und Handybreite.

KI · Beispielantwort

Ich liste Abweichungen auf und prüfe die tatsächliche Browseransicht. Eine gespeicherte Datei allein bestätigt das sichtbare Ergebnis nicht.

Auf meinem Handy ist die Überschrift abgeschnitten. Behebe das, ohne den Text zu ändern.

KI · Beispielantwort

Ich passe das responsive Layout an und prüfe dieselbe Handybreite erneut. Danach kannst du das Ergebnis freigeben.

Nächste Schritte

Änderungen vergleichen
Prüfe Texte, Bilder und den beauftragten Umfang.
Vorschau öffnen
Prüfe Desktop und Handy sowie Navigation und Kontakt.
Problem beschreiben
Beschreibe den Fehler und lass die korrigierte Ansicht erneut prüfen.

Ziel: Eine geprüfte Version zum Weiterbearbeiten oder Veröffentlichen.

Beispielablauf. Keine Live-Verbindung zu einer KI.

04 / Dateiunterschiede prüfen

Was bestätige ich nach Agents Arbeit?

Prüfe Dateiunterschiede und gerenderte Seite. Keines allein zeigt, ob Ausschnitte, lange Beschreibungen, Links und mobiles Verhalten zu deinem Portfolio passen.

01
Geänderte Pfade lesen
Prüfe Text- und Bildersetzungen sowie unerwartete Änderungen.
02
Seite prüfen
Teste Desktop, Mobilansicht, Dialoge, Tastaturfokus und echtes Anfrageziel.
03
Eine Korrektur anfordern
Beschreibe das beobachtete Problem und prüfe denselben Teil nach der Korrektur.

AI ChatBeispielablauf

Cursor Agent · Website-Version sichern und wiederherstellen

Sichere vor der Bearbeitung diese freigegebene Version. Erstelle einen Git-Stand, wenn verfügbar, und lasse mein originales ZIP unverändert.

KI · Beispielantwort

Ich bestätige vor der nächsten Änderung, wo die gesicherte Version liegt.

Das vorherige Layout gefällt mir besser. Stelle es wieder her, behalte aber die neue Kontaktadresse.

KI · Beispielantwort

Ich vergleiche die Versionen, stelle das vorige Layout wieder her und prüfe, ob die gewünschte Kontaktadresse bleibt.

Nächste Schritte

Vorher sichern
Behalte Original-ZIP und freigegebenen Ordner oder Git-Stand.
Wiederherstellung benennen
Sage der KI, welche Version und welche Elemente zurückkehren sollen.
Wiederhergestellte Seite prüfen
Öffne sie und prüfe Inhalte, Layout und Kontaktlinks.

Ziel: Gezielt zur bevorzugten Version zurückkehren.

Beispielablauf. Keine Live-Verbindung zu einer KI.

05 / Rückweg sichern

Kann ich eine unerwünschte Änderung rückgängig machen?

Ja, wenn du Original und freigegebene Versionen behältst. Lass den Agent das vorige Layout oder eine bestimmte Änderung zurücknehmen. Cursor-Checkpoints helfen bei Agent-Änderungen; Git oder separate Kopien sichern eine dauerhafte Historie. Prüfe die wiederhergestellte Seite.

Sind Checkpoints dasselbe wie Git?

Nein. Ein Agent-Checkpoint deckt nicht automatisch jede manuelle oder externe Änderung ab. Behalte dauerhafte Historie oder unabhängige Kopien.

Ist Cursor enthalten?

Nein. Organisiere Cursor separat und prüfe Funktionen von Konto, Modell und Umgebung.

Quelldateien und technische Details ansehen

Eine gespeicherte Version zum Wiederherstellen

05-offset · LP15-restore.diff

Die gespeicherte erste Änderung wurde in einer lokalen Testdatei wiederhergestellt; ihre Prüfsumme stimmte überein. Das zeigt eine Dateiwiederherstellung, keinen Agent-Checkpoint oder Hosting-Rollback.

475cc7f0b3521ee6dedb45cb890fe09244128f8ac978d956088bae480cd6afd9
475cc7f0b3521ee6dedb45cb890fe09244128f8ac978d956088bae480cd6afd9

Eine gespeicherte Version zum Wiederherstellen

05-offset · LP15-restore.diff

475cc7f0b3521ee6dedb45cb890fe09244128f8ac978d956088bae480cd6afd9
475cc7f0b3521ee6dedb45cb890fe09244128f8ac978d956088bae480cd6afd9

06 / Layout wählen

Welches Layout passt zu meinen Arbeiten?

Offset bietet ausgewählte Arbeiten, Leistungen und Studioansatz. Vergleiche verwandte Präsentationen nach Bildern und Inhalten, nicht nach einem allgemeinen Kompatibilitätssiegel.

Offset

Starte mit ausgewählten Arbeiten, Leistungen und Studioansatz. Ersetze das Beispielportfolio durch echte Projekte.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/contour.svg
assets/fern.png
assets/form-poster.svg
assets/geometric-print.svg
assets/glass.png
assets/packaging.png
assets/ribbon.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Primefolio

Zeige ausgewählte Studioarbeiten und Projektgeschichten mit eigenen freigegebenen Bildern und Fakten.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Forma Studio

Zeige Studioarbeiten, Leistungen und Ansatz mit freigegebenen Inhalten. Anfrage- und Newsletter-Demos brauchen echte Ziele.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/index.webp
assets/terra.webp
assets/vesper.webp

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Draftwell

Präsentiere einen kreativen Arbeitsbereich, Prozess und Team. Beispielhafte Projektprüfungen bleiben lokal.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/paper-detail.webp
assets/print-project.webp
assets/studio-review.webp

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Cursor Agent · Cloudflare Pages · vom Ordner ins Web

Meine Website ist fertig. Veröffentliche diesen Projektordner mit Wrangler auf Cloudflare Pages. Sag mir zuerst, welchen Kontozugriff und welche Freigabe du brauchst.

KI · Beispielantwort

Ich prüfe Dateien und Bildpfade. Melde dich mit deinem Cloudflare-Konto an und gib das Erstellen oder Aktualisieren des Pages-Projekts vor dem Upload frei.

Ich gebe die Veröffentlichung in einem neuen Pages-Projekt frei. Lass meine aktuelle Domain unverändert, bis ich die Vorschau geprüft habe.

KI · Beispielantwort

Nach dem freigegebenen Upload gebe ich die von Cloudflare bereitgestellte Adresse zurück und prüfe Bilder und Links. Nach deiner Freigabe können wir die Domain verbinden.

Nächste Schritte

Projekt an Agent geben
Nutze einen KI-Agent mit Datei- und Terminalzugriff; lasse index.html und Assets zusammen.
Upload freigeben
Melde dich beim Host an und bestätige das Projekt. Der Agent kann die unterstützte CLI oder API nutzen.
Echte Adresse prüfen
Öffne die zurückgegebene URL; verbinde die Domain erst nach Prüfung der Website.

Ziel: Deine Website an einer öffentlichen Adresse, danach unter deiner Domain.

Beispielablauf. Keine Live-Verbindung zu einer KI.

07 / Veröffentlichen und verbinden

Was bleibt außerhalb des Editors?

Nach der Bearbeitung verbindest du Kontakt- oder Buchungsdienste und lässt den KI-Agent den Ordner auf passendem Hosting veröffentlichen. Gib Konto und Upload frei, prüfe die echte URL und verbinde deine Domain. Hosting und KI-Zugang sind separat.

Cursor-Agent-Leitfaden folgen Echte Formulare und Dienste verbinden Lizenzbedingungen für Kundenprojekte prüfen

Formwell / Website-Dateien + Designanweisungen

Teste ein echtes Template, bevor du dich entscheidest.

Lade das originale Formwell-Projekt herunter. Gib die Dateien und RECREATE.md an ein geeignetes KI-Tool, probiere eine kleine Änderung und prüfe das Ergebnis.

Das kostenlose Beispiel ist Formwell. Originaldesign und Anleitung sind auf Englisch. Die Produktpreise bleiben unverändert.

Formwell-ZIP herunterladen RECREATE.md herunterladen ↗

Wähle ein Template. Mach es mit Cursor Agent zu deiner Website.

Lade Dateien herunter, öffne das Projekt im KI-Tool und beschreibe deine Änderungen. Du beginnst mit einem vorhandenen Design und kannst die gespeicherte Website weiter bearbeiten.

Meine Website-Vorlage wählen