Beschreibe die Änderung mit normalen Worten

Eine Website, ohne den Code selbst zu schreiben. Erstelle sie, indem du der KI deinen gewünschten Look und deine Inhalte beschreibst.

Du kannst einen KI-Agenten mit Dateizugriff um Vorlagenänderungen bitten, ohne den Quellcode selbst zu schreiben. Dateien, Inhalte und Prüfung bleiben deine Aufgaben. Probiere zuerst eine kleine Änderung.

Zuerst eine kleine Änderung ansehen Echte Vorlagendateien testen

Morrow

Formwell

Orbit

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

01 / Eine Änderung ansehen

Wie sieht Bearbeitung ohne selbst geschriebenen Code aus?

Du beschreibst die Änderung, und ein KI-Agent mit Dateizugriff bearbeitet den Template-Code für dich. Zum Beispiel: Markenfarben verwenden, Überschrift ersetzen oder Leistung ergänzen. Öffne die Seite und beurteile das Ergebnis.

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.

Quelldateien und technische Details ansehen

Die tatsächlichen Projektdateien

07-morrow · 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/favicon.svg
assets/morrow-cabin.png
assets/morrow-fold.png
assets/morrow-group.png
assets/morrow-hero.png
assets/morrow-portrait.png
assets/morrow-still.png

Was die Originalanleitung festlegt

07-morrow/RECREATE.md · L5

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

Build an English movement-studio demonstration as `index.html` plus `assets/favicon.svg` and six local PNG copies listed in section 9. Put all CSS and vanilla JavaScript in the HTML; use no framework, bundler, build step, external JavaScript or library. Reproduce the structure, copy, proportions, palette, image placement and behavior specified here. Keep native browser scrolling and native HTML dialogs.

OpenAI Codex CLI ↗

AI ChatBeispielablauf

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.

02 / Deine Aufgaben

Muss ich Dateien und Prüfungen trotzdem verstehen?

Du musst das Projekt entpacken, der KI Zugriff geben und die Vorschau öffnen. Codeänderungen musst du nicht selbst tippen. Lass unbekannte Schritte erklären und behalte das Original-ZIP für einen Neustart.

Geeignete KI-UmgebungDein Tool braucht Lese- und Bearbeitungszugriff. Ein Markenname allein reicht nicht.Eine gespeicherte VersionBehalte Original und freigegebene Ergebnisse vor der nächsten Änderung.

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

AI ChatBeispielablauf

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.

03 / Echte Inhalte

Was darf die KI nicht für mich erfinden?

Unternehmensfakten, Ergebnisse, Preise, Kunden und Bildrechte. Liefere freigegebene Inhalte und entferne unbelegte fiktive Beispielbehauptungen.

Dein Angebot

Benenne Leistung, Zielgruppe und echte nächste Aktion.

Was du zeigen kannst

Nutze echte Arbeiten, freigegebene Beschreibungen und erlaubte Bilder.

AI ChatBeispielablauf

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 / Testen und prüfen

Wie erkenne ich eine richtige erste Änderung?

Vergleiche mit der Anfrage und prüfe die echte Browserseite. Eine flüssige KI-Antwort beweist weder Funktion noch Nachrichtenversand.

01
Lesen und klicken
Prüfe Texte, echte Links und Besucheraktion.
02
Mobilansicht prüfen
Achte auf abgeschnittene Überschriften, fehlende Bilder und Navigationsprobleme.
03
Genaue Korrektur anfordern
Beschreibe Problem und gewünschtes Ergebnis, dann prüfe erneut.

Quelldateien und technische Details ansehen

Eine kleine Änderung zum Prüfen

07-morrow/index.html · L84

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">Make room<br>for <em>yourself.</em></h1>

Erste vorbereitete Änderung
<h1 id="hero-title">Make room<br>for <em>movement.</em></h1>

Vorbereitete Folgeänderung
<h1 id="hero-title">Make room<br>for <em>movement.</em></h1>

Originalprojekt · Morrow

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

Kontaktformular verbinden

Lass dieses Formular Anfragen an mich zustellen. Nutze meinen Formulardienst, ergänze die nötigen Felder und halte Zugangsdaten aus öffentlichem HTML heraus.

KI · Beispielantwort

Ich prüfe, ob das aktuelle Formular eine Anfrage sendet oder nur lokal eine Meldung zeigt. Danach setze ich den dokumentierten Ablauf des gewählten Dienstes um.

Sende nach Veröffentlichung eine klar markierte Testanfrage. Ich bestätige, ob sie angekommen ist.

KI · Beispielantwort

Ich teste Versand und Fehlerzustände an der öffentlichen URL. Die Zustellung gilt erst nach Prüfung des Postfachs oder Dienstes als bestätigt.

Nächste Schritte

Empfang festlegen
Nutze eigene E-Mail und Formulardienst oder eingerichteten Server-Endpunkt.
KI mit Verbindung beauftragen
Gib die Dienstdokumentation an und bestätige Kontoeinstellungen.
Empfang prüfen
Sende einen Test von der veröffentlichten Seite und prüfe das Ziel.

Ziel: Eine Anfrage kommt an deinem gewählten Ziel an.

Beispielablauf. Keine Live-Verbindung zu einer KI.

05 / Wann Hilfe sinnvoll ist

Was braucht mehr als eine kleine Änderung?

Konten, Zahlungen, komplexe Formulare, Datenhaltung und CMS-Workflows brauchen Einrichtung und Tests. Entscheide zwischen Hilfe und einem System für diese Anforderungen.

Vorlagenweg behalten

Nutze es für Präsentationsseiten, wenn du offene Aufgaben organisieren kannst.

Anderen Weg wählen

Ein gehosteter Editor oder begleiteter Aufbau passt bei geführter Einrichtung oder häufiger redaktioneller Pflege.

Kleine Anfrage und Helferbrief schreiben

Dein eigener Arbeitsplan

06 / Startwebsites

Kann ich dieses Design mit echten Inhalten füllen?

Wähle Sektionen, die du belegen kannst. Beispielgeschichten zeigen Präsentationsmöglichkeiten, keine Kunden, Ergebnisse oder Live-Dienste für eigene Behauptungen.

Morrow

Präsentiere Kurse, Studio und Informationen zum ersten Besuch. Live-Buchung braucht ein separates Ziel.

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/favicon.svg
assets/morrow-cabin.png
assets/morrow-fold.png
assets/morrow-group.png
assets/morrow-hero.png
assets/morrow-portrait.png
assets/morrow-still.png

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

Formwell

Nutze eine leistungsorientierte Präsentation als Startdesign. Die kostenlose Probe enthält echte Quelldateien und Anleitung.

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/common-ground.png
assets/loop-radio.png
assets/mono-house.png
assets/serein.png

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

Orbit

Erkläre Beratungsleistungen und Vorgehen. Die Präsentation liefert keine Beratungsautomatisierung.

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/bridge.webp
assets/connect.webp
assets/folio.webp
assets/lens.webp
assets/loop.webp
assets/relay.webp

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

Framewise

Präsentiere einen Kurs, Ansatz und Lehrplan. Kursbereitstellung und Lernkonten bleiben separat.

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/creator-blue.png
assets/creator-coral.png
assets/creator-lilac.png
assets/creator-mint.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

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 / Öffentliche Website

Was bleibt nach einer guten Vorschau?

Verbinde benötigte Kontakt- oder Buchungsdienste und lass den KI-Agent den fertigen Ordner veröffentlichen. Dafür braucht er dein autorisiertes Hostingkonto und die Upload-Freigabe. Prüfe die echte Adresse vor dem Verbinden oder Wechseln deiner Domain.

Vollständigen KI-Workflow ansehen Öffentlichen Start planen Formulare und App-Funktionen planen

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 ↗

Wenn der Workflow passt, wähle deine Startwebsite.

Wähle ein Design für freigegebene Inhalte. Wenn Dateien oder öffentliche Prüfungen ungewohnt sind, teste das Beispiel mit Hilfe vor der Workflow-Entscheidung.

Meine Startvorlage wählen