Vom Editor-Kontext zur geprüften Seite

Wie erstellst du eine Website mit Cursor Agent? Mach aus einer Vorlage deine eigene Website, indem du dem Agenten sagst, was du brauchst.

Öffne den vollständigen Website-Ordner im lokalen Cursor-Editor. Bitte Agent um Erklärung, liefere Inhalte und prüfe eine gezielte Änderung in Editor und Browser.

Meinen Ordner in Cursor vorbereiten Gezielte Agent-Änderung planen

Primefolio

Offset

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 soll ich in Cursor öffnen?

Öffne den entpackten Website-Ordner im lokalen Cursor-Editor, nicht nur einen Screenshot. Behalte Quellen, Leitfaden und Begleitressourcen zusammen sowie eine unveränderte Kopie.

Website-Dateien + Designanweisungen

Zugang prüfen

Cursor-Konto, Modell und Agent-Funktionen sind vom Vorlagenkauf getrennt.

Mit Quellen starten

Nutze index.html für direkte Änderungen und RECREATE.md als Designreferenz.

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 / Kontext wählen

Welchen Kontext soll Agent zuerst nutzen?

Bitte um Erklärung der Seitenstruktur und Erkennung des Änderungsteils. Liefere Text, Dateinamen oder Sektionsverweise und Briefing. Nimm nicht an, dass fehlende Assets sichtbar sind.

Deine Portfolio-InhalteLiefere echte Projektnamen, Arbeitsbilder, Rollenbeschreibungen und Kontaktziel.Behalten/Ändern-AnweisungenSage, welches Layout und welche Bedienelemente bleiben und welche Beispiele entfernt werden.

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

Quelldateien und technische Details ansehen

Die tatsächlichen Projektdateien

02-primefolio · 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/current-product.png
assets/hero-form.png
assets/serein-brand.png

Was die Originalanleitung festlegt

02-primefolio/RECREATE.md · L5

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

Build one complete `index.html` for **Forma North — Independent digital design**. Use semantic HTML, one inline stylesheet and one inline classic JavaScript block at the end of the body. No framework, build step, package manager, bundler, JavaScript library or application backend is required. Implement the page and every state described below, including all six project stories, all three editorial notes, thirteen capabilities, the full-width studio menu and the local downloadable project brief.

03 / Gezielte Anfrage

Wie vermeide ich einen vollständigen Neuaufbau?

Beauftrage eine Änderung an der aktuellen Seite und nenne die Elemente: Farben ändern, diese Bilder ersetzen oder Überschrift kürzen. Sage Agent, welche Sektionen und Links bleiben sollen.

Beispiel für KI-BearbeitungFormwell

Nutze ausgehend von der vorbereiteten Alder-Version einen hellen Fliederton und dunkles Violett. Behalte Layout und Inhalte.

KI · Beispielantwort

Die vorbereitete Vorschau ändert Hintergrund- und Textfarben bei gleichem Layout. Vergleiche Farben und Inhalte und prüfe die Lesbarkeit mit eigenen Texten.

index.html · RECREATE.md

Formwell · vorbereitete HTML-Vorschau

Ganze Vorschau öffnen ↗

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

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 / Beide Ansichten prüfen

Was bestätige ich nach Agents Arbeit?

Prüfe Dateiunterschiede im Editor und die Seite im Browser. Quellen zeigen, was geändert wurde; die Seite zeigt Auswirkungen für Besucher.

01
Unterschiede lesen
Prüfe freigegebene Texte, richtige Bildpfade und vorgesehenen Umfang.
02
Browser testen
Prüfe Ausschnitte, lange Beschreibungen, mobile Navigation, Dialoge und Tastaturfokus.
03
Ein beobachtetes Problem korrigieren
Beschreibe das Problem, fordere die Korrektur an und prüfe die betroffene Ansicht erneut.

Quelldateien und technische Details ansehen

Eine kleine Änderung zum Prüfen

02-primefolio/index.html · L53

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.

Vorher
<h1 id="hero-title" class="hero-heading"><span>Clear thinking.</span><span>Fresh <span class="muted" style="display:inline">digital form.</span></span></h1>

Erste vorbereitete Änderung
<h1 id="hero-title" class="hero-heading"><span>Clear ideas.</span><span>Considered <span class="muted" style="display:inline">digital design.</span></span></h1>

Vorbereitete Folgeänderung
<h1 id="hero-title" class="hero-heading"><span>Clear ideas.</span><span>Design <span class="muted" style="display:inline">with purpose.</span></span></h1>

Originalprojekt · Primefolio

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 · 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 / Wiederherstellung

Wozu kehre ich nach einer schlechten Änderung zurück?

Kehre zu einem freigegebenen Ordner, Git-Stand oder verfügbaren Agent-Checkpoint zurück. Lass die abgelehnte Änderung gezielt zurücknehmen und gewünschte spätere Änderungen behalten. Öffne die Seite zur Kontrolle.

Agent-Checkpoint

Nimm nicht an, dass er jede manuelle oder externe Änderung umfasst.

Dauerhafte Historie

Behalte geprüfte Versionen und kontrolliere Dateien und Darstellung nach Wiederherstellung.

Quelldateien und technische Details ansehen

Eine gespeicherte Version zum Wiederherstellen

02-primefolio · LP20-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.

b4a8778294f146b2031e511556c94ecb488afab63681b5fb8ec3b897b6d42697
b4a8778294f146b2031e511556c94ecb488afab63681b5fb8ec3b897b6d42697

Eine gespeicherte Version zum Wiederherstellen

02-primefolio · LP20-restore.diff

731ad73fcc29b330d464de20f69f28588d25c99c417ef1f68e5cf609ccfb6567
731ad73fcc29b330d464de20f69f28588d25c99c417ef1f68e5cf609ccfb6567

Cursor-Kontext und Freigabe vorbereiten

Dein eigener Arbeitsplan

06 / Projekt wählen

Welches Quellprojekt soll ich öffnen?

Wähle eine Struktur für vorhandene Arbeiten und Inhalte. Die Designoptionen versprechen kein identisches Verhalten aller Cursor-Modelle oder Konfigurationen.

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.

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.

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.

Relayline

Präsentiere ein Kommunikationsprodukt-Konzept. Live-Nachrichten und Konten brauchen einen separaten Dienst.

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/relayline-focus.png
assets/relayline-portrait.png

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 / Außerhalb von Cursor

Was bleibt nach der Editorsitzung zu organisieren?

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.

Website-Designs für Cursor wählen Echtes Anfrageziel verbinden Geprüftes Projekt veröffentlichen

Echte Formwell-Dateien testen

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 Startvorlage wählen