Vom gewählten Design zur ersten geprüften Version

Erstelle eine Website mit KI. Mach aus deiner gewählten Vorlage deine eigene Website mit deiner Marke und deinen Inhalten.

Wähle eine Website-Vorlage, liefere deine Unternehmensinhalte und bitte um gezielte Änderungen. Dieser Leitfaden hilft bei Dateien, Prüfung und Planung noch fehlender Verbindungen.

Mein Website-Briefing vorbereiten Eine erste Änderung ansehen

Forma Studio

Formwell

Orbit

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

01 / Weg wählen

Ist eine Website aus Dateien der richtige Weg?

Ja, für Firmenwebsite, Portfolio oder Produktpräsentation mit Dateien, die du per KI bearbeiten möchtest. Für Konten, Zahlungen oder ein umfangreiches Redaktionssystem wähle passende Dienste und nutze das Template als Website-Präsentation.

Präsentationsseite

Starte mit einem HTML-Design und verbinde die benötigte Besucheraktion.

Redaktion oder Anwendung

Wähle Inhaltssystem oder Anwendungsdienste, bevor du ein Frontend als Gesamtlösung behandelst.

Claude Code quickstart ↗ OpenAI Codex CLI ↗ Cursor Agent ↗ Gemini CLI file context ↗

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.

02 / Dein Briefing

Was gebe ich der KI vor der Bearbeitung?

Deine Fakten, dein Ziel und freigegebene Assets. Fehlende Informationen bleiben außerhalb der Seite, bis du sie liefern kannst.

Unternehmen und ZielgruppeName, Angebot, Zielgruppe und die Frage, die die Seite beantworten soll.Inhalte und nächste AktionFreigegebene Texte, lizenzierte Bilder und echtes Kontakt-, Buchungs- oder Kaufziel.Behalten, ändern, entfernenBenenne zu behaltendes Layout, zu ersetzende Inhalte und zu entfernende Beispielbehauptungen.

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

Quellweg und erste Änderung wählen

Dein eigener Arbeitsplan

AI ChatBeispielablauf

HTML + Designanleitung

Ich habe index.html und RECREATE.md. Ich möchte diese Website personalisieren, nicht die fiktive Firma nachbauen. Welche Dateien nutzt du?

KI · Beispielantwort

Ich bearbeite index.html und nutze RECREATE.md als Designkontext. Deine Texte, Bilder und Änderungen haben Vorrang vor der Beispielfirma.

Behalte das Layout, nutze mein Angebot und meine Kontaktdaten und entferne fiktive Referenzen.

Nächste Schritte

Bestehende Website
HTML ist die Datei zur Personalisierung.
Designkontext
RECREATE.md beschreibt ursprüngliches Layout und Verhalten.
Dein Brief
Gib Unternehmensfakten und gewünschte Änderungen an.

Ziel: Das ausgewählte Design wird mit seinen Quelldateien zu deiner Website.

Beispielablauf. Keine Live-Verbindung zu einer KI.

03 / Dateien nutzen

Mit welcher Datei soll die KI arbeiten?

Beginne für direkte Änderungen mit dem gelieferten index.html. RECREATE.md beschreibt das Originaldesign zum Nachbauen. Liefere für beide Wege dein Briefing und sichere eine unveränderte Kopie.

Website-Dateien + Designanweisungen

Entpackten Ordner öffnen

Nutze eine KI-Umgebung, die die echten Projektdateien prüfen und bearbeiten kann.

Ressourcen zusammenhalten

Behalte Begleitdateien und prüfe externe Bild- oder Schriftverweise.

Kann ein kopierter Prompt die ganze Website fertigstellen?

Die Dateien liefern bereits eine Seite. Ein kopierter Leitfaden kann den Nachbau anfordern; Anpassung, Prüfung und Veröffentlichung brauchen eventuell weitere Arbeit.

Quelldateien und technische Details ansehen

Die tatsächlichen Projektdateien

11-forma-studio · 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/index.webp
assets/terra.webp
assets/vesper.webp

Was die Originalanleitung festlegt

11-forma-studio/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 single-page fictional design studio in `index.html`, with inline CSS and plain inline JavaScript at the end of its body. No framework, build step, module loader or external JavaScript dependency is needed. Supply `assets/terra.webp`, `assets/index.webp` and `assets/vesper.webp` alongside it, using the supplied image files unchanged. These files are identical copies of the corresponding fixed remote images in §9. If the local copies are not included with these instructions, obtain their exact bytes from the corresponding §9 URLs and save them at these three local paths without conversion or regeneration. The rendered page uses the remote image URLs; the local copies are not an automatic offline fallback. Runtime is **network**: images and Google Fonts need internet access. Do not call the result offline self-contained.

Weg A · gelieferte Quelle behalten und bearbeiten

Authored task specimen · not a provider transcript

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.

Lies index.html und RECREATE.md. Bearbeite das vorhandene HTML. Ersetze nur den Studionamen und die gewünschte Überschrift. Behalte Struktur, Beispielbilder und lokale Bedienelemente bei. Liste geänderte Dateien auf.

Weg B · vor der Anpassung rekonstruieren

RECREATE.md · experimental route still pending

Die gespeicherten Vorschauen zeigen Weg A. Sie belegen weder eine erfolgreiche Rekonstruktion noch ein Ergebnis aus dem ersten Prompt.

Setze in einem separaten Ordner die fiktive Originalseite aus RECREATE.md um. Vergleiche Struktur, Ressourcen und Bedienelemente mit der gelieferten Quelle, bevor du Anpassungen anforderst. Dieser Rekonstruktionsweg wurde hier nicht ausgeführt.

04 / Erste Änderung

Was ist eine sinnvolle erste Anfrage?

Sage der KI, was die fertige Seite über dein Unternehmen zeigen soll. Gib Name, Angebot, Bilder und Kontaktlink an und lass sie ins gewählte Template einfügen, während das gewünschte Layout erhalten bleibt.

Beispiel für KI-BearbeitungFormwell

Passe Formwell für das fiktive Markenstudio Alder an. Ändere Name, Hero-Überschrift und Einleitung. Behalte Layout und Beispiel-Projektbilder.

KI · Beispielantwort

Die vorbereitete Vorschau ersetzt Firmenname, Hero-Überschrift und Einleitung. Vergleiche Inhalte und Original; übrige Projektbilder bleiben Beispielinhalte.

index.html · RECREATE.md

Formwell · vorbereitete HTML-Vorschau

Ganze Vorschau öffnen ↗

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

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.

05 / Prüfen und korrigieren

Woher weiß ich, dass das Richtige geändert wurde?

Vergleiche das Ergebnis mit deiner Anfrage. Beschreibe bei Fehlern das sichtbare Problem und gewünschte Ergebnis. Prüfe die Korrektur vor weiteren Änderungen.

01
Änderungen lesen
Prüfe freigegebene Fakten, Texte, Bildpfade und unerwartete Änderungen.
02
Mobil und am Desktop öffnen
Prüfe lange Überschriften, Bildausschnitte, Navigation und Tastaturbedienung.
03
Freigegebene Version sichern
Behalte Original und geprüfte Ergebnisse als klaren Ausgangspunkt für spätere Änderungen.

Quelldateien und technische Details ansehen

Eine kleine Änderung zum Prüfen

11-forma-studio/index.html · L28

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>Forma</h1>

Erste vorbereitete Änderung
<h1>Cedar</h1>

Vorbereitete Folgeänderung
<h1>Cedar</h1>

Originalprojekt · Forma Studio

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

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.

06 / Verbinden und veröffentlichen

Was bleibt, wenn die Seite richtig aussieht?

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.

Formulare und Live-Funktionen planen Geprüfte Website-Dateien veröffentlichen Workflow für meine KI wählen

07 / Startdesigns

Welche Struktur passt zu meinen Inhalten?

Vergleiche Arbeitspräsentationen, Leistungsgeschichten und Produktseiten. Wähle eine Struktur, die du mit echten Informationen füllen kannst, statt fiktive Nachweise zu übernehmen.

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.

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.

Veyra

Präsentiere ein Sprachprodukt mit Beispielen und Workflows. Eine Voice-to-Text-Anwendung ist nicht enthalten.

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

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.

Eine Website zum Anpassen wählen

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 ↗