Website-Vorlagen für KI-Agenten. Erstelle deine Unternehmenswebsite, indem du der KI sagst, was sie an deinem gewählten fertigen Design ändern soll.
Wähle ein Design, das du vorher prüfen kannst. Erhalte die Website-Dateien und Design-Anweisungen und passe sie mit einem Coding-Agenten mit Projektzugriff an dein Unternehmen an.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Die Dateien
Du
Ich habe die Template-ZIP. Welche Dateien öffne ich und gebe ich dir?
KI · Beispielantwort
Gib mir den entpackten Ordner. Ich kann HTML und Designanleitung lesen, die Assets erkennen und die gewünschten Dateien bearbeiten.
Website-Projekt öffnen
Projekt entpacken
Behalte index.html, Anleitung und Assets in der mitgelieferten Ordnerstruktur.
Ordner in KI öffnen
Gib dem Agenten Zugriff auf das gesamte Projekt, nicht nur auf einen Screenshot.
Änderungen beschreiben
Gib Texte und Bilder dazu und sage, welche Designteile bleiben sollen.
Danach: Vorschau öffnen und gewünschte Änderungen beschreiben.
Beispieldialog, keine Live-KI-Sitzung.
01 / Die Dateien
Was kaufe ich genau?
Du kaufst ein bearbeitbares Website-Projekt und eine Anleitung, die der KI das Design erklärt. Entpacke den Download, behalte die Ordnerstruktur und öffne die HTML-Vorschau. Dateien unterscheiden sich je Vorlage; das echte Paketbeispiel unten zeigt, worauf du achtest.
Website-Dateien + Designanweisungen
Projekt entpacken
Behalte index.html, Anleitung und Assets in der mitgelieferten Ordnerstruktur.
Ordner in KI öffnen
Gib dem Agenten Zugriff auf das gesamte Projekt, nicht nur auf einen Screenshot.
Änderungen beschreiben
Gib Texte und Bilder dazu und sage, welche Designteile bleiben sollen.
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.
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.
Wie gebe ich meinem vorhandenen KI-Tool Zugriff auf dieses Website-Projekt?
KI · Beispielantwort
Öffne das entpackte Projekt als Arbeitsordner und erlaube das Lesen. Lass index.html, Anleitung und Assets finden. Ohne Ordnerzugriff lädst du unterstützte Dateien hoch oder fügst die Anleitung ein und speicherst die erhaltenen Website-Dateien.
Agenten Projektzugriff geben
Projekt entpacken
Behalte index.html, Anleitung und Assets in der mitgelieferten Ordnerstruktur.
Ordner in KI öffnen
Gib dem Agenten Zugriff auf das gesamte Projekt, nicht nur auf einen Screenshot.
Änderungen beschreiben
Gib Texte und Bilder dazu und sage, welche Designteile bleiben sollen.
Danach: Dateien erklären lassen, bevor du die erste Änderung beauftragst.
Beispieldialog, keine Live-KI-Sitzung.
02 / Dein KI-Tool
Kann meine KI mit einem Projektordner arbeiten?
Ja, mit einem Agenten, der lokale Dateien lesen und bearbeiten kann, etwa Claude Code, Codex CLI, Cursor Agent oder Gemini CLI. Öffne den Projektordner und lasse index.html sowie Anleitung erkennen. Im normalen Chat lädst du unterstützte Dateien hoch oder kopierst die Anweisungen und speicherst das Ergebnis.
Soll ich index.html bearbeiten oder eine neue Version aus RECREATE.md aufbauen lassen?
KI · Beispielantwort
Für eigene Inhalte in diesem Design kann ich index.html direkt bearbeiten. Für eine neue Umsetzung gib RECREATE.md und beauftrage den Neuaufbau. Sage vor den Änderungen, welchen Weg du möchtest.
Bearbeitung oder Neuaufbau wählen
Vorhandene Website behalten
Bearbeite index.html für Inhalte, Bilder, Farben oder Abschnitte.
Oder Design neu umsetzen
Gib RECREATE.md an KI für eine neu erzeugte Umsetzung.
Ergebnisdateien öffnen
Öffne die Vorschau und passe deine Inhalte weiter an.
Für die erste Website beginnt direkte Bearbeitung mit der bereits gewählten Vorschau.
Beispieldialog, keine Live-KI-Sitzung.
03 / Zwei Wege
Dateien bearbeiten oder Design nachbauen?
Bearbeite den gelieferten HTML-Code für eigene Inhalte, Bilder und Farben im vorhandenen Design. Nutze RECREATE.md, wenn KI das Design neu umsetzen soll. Für die erste Website ist das Bearbeiten des gelieferten Projekts der direkte Einstieg.
Die gelieferte Seite behalten
Bitte um konkrete Text-, Bild- oder Stiländerungen und prüfe danach die Dateien.
Aus der Spezifikation aufbauen
Vergleiche die neue Seite mit dem Originaldesign und prüfe die Interaktionen.
Quelldateien und technische Details ansehen
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 / Design wählen
Wähle nach der Website, die du brauchst.
Wähle Forma Studio für ein Studioportfolio, Morrow für Leistungen und Kurse oder Veyra für ein Produkt. KI kann Inhalte und Marke anpassen. Benötigte Anfragen, Buchungen oder App-Anmeldungen bindest du bei der Anpassung an den entsprechenden Dienst an.
Forma Studio
Zeige Studioarbeiten, Leistungen und Ansatz mit freigegebenen Inhalten. Anfrage- und Newsletter-Demos brauchen echte Ziele.
Ersetze das Studio durch meine Firma mit diesen Leistungen und Bildern im gleichen Aufbau.
KI · Beispielantwort
Öffne den entpackten Template-Ordner und gib mir Inhalte sowie Bilder. Ich kann Beispiele im gelieferten HTML bei gleichem Design ersetzen. Danach prüfen und verfeinern wir die lokale Vorschau vor der Veröffentlichung.
Vorlage zu deiner Website machen
Heruntergeladenes Projekt öffnen
Entpacke die Vorlage und öffne den vollständigen Ordner im KI-Agenten mit Dateizugriff. Behalte die Asset-Pfade bei.
Eigene Inhalte liefern
Ergänze Texte, Bilder und Markenangaben und sage, welche Designteile bleiben sollen.
Lokale Vorschau öffnen
Lass die bearbeitete Seite anzeigen und vor der Veröffentlichung weiter anpassen. Für den Start brauchst du keine bestehende Website oder Hosting-Projekt.
Danach: erste eigene Vorschau öffnen und Hosting wählen, wenn du veröffentlichen möchtest.
Beispieldialog, keine Live-KI-Sitzung.
05 / Deine erste Anfrage
Sag deiner KI, was sich ändern soll.
Schreibe konkret: „Ersetze das Studio durch meine Firma, nutze diese Leistungen und Bilder, behalte den Aufbau und öffne über den Hauptbutton mein Kontaktformular.“ Gib KI Dateien und Materialien. Danach verfeinerst du einzelne Teile anhand der Vorschau.
Vorbereitetes Template-Beispiel ansehen
›_ Beispiel für KI-BearbeitungFormwell
Du
Passe Formwell für das fiktive Markenstudio Alder an. Ändere Name, Hero-Überschrift und Einleitung. Behalte Layout und Beispiel-Projektbilder.
KI · Beispielantwort
Diese vorbereitete Version ändert diese drei Inhaltsbereiche. Projektbilder bleiben Beispielinhalte; es ist kein Live-KI-Dienst verbunden.
Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.
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
Ergebnis prüfen
Du
Hilf mir diese bearbeitete Website vor dem Speichern für die Veröffentlichung zu prüfen.
KI · Beispielantwort
Wir können Vorschau, Texte, Bilder, Menü, Hauptbuttons und Handyansicht prüfen. Bei angebundenem Formular sendest du einen Test und kontrollierst den Eingang. Speichere vor weiteren Änderungen eine Kopie der passenden Version.
Neue Version prüfen und speichern
Inhalte lesen
Prüfe Namen, Angebot, Bilder und Kontaktdaten in der Vorschau.
Bedienung und Layout testen
Öffne Menü und Buttons auf Handy sowie Desktop und prüfe den Eingang beim angebundenen Formular.
Kopie speichern
Behalte diese vollständige Projektversion vor der nächsten Änderung oder Veröffentlichung.
Danach: geprüften Ordner veröffentlichen oder nach Änderungen darauf zurückgehen.
Beispieldialog, keine Live-KI-Sitzung.
06 / Ergebnis prüfen
Was prüfe ich, bevor ich die neue Version behalte?
Öffne die Vorschau und lies deine Inhalte. Prüfe Handyansicht, Bilder, Menü und Buttons; sende bei angebundenem Formular eine Testnachricht. Behalte Originaldownload und eine Kopie der passenden Version, damit du nach späteren Änderungen zurückkehren kannst.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
AI ChatBeispielablauf
Vor dem Kauf
Du
Die Bearbeitung ist fertig. Veröffentliche mit meiner Kontofreigabe auf Cloudflare und hilf bei der Domain.
KI · Beispielantwort
Ich kann den vollständigen Ordner vorbereiten und ihn mit Cloudflares CLI oder API hochladen, sobald du Kontozugriff freigibst. index.html und Asset-Pfade bleiben zusammen. Danach können wir die Adresse öffnen und deine Domain verbinden.
Fertige Website veröffentlichen
Ordner vorbereiten
Behalte fertiges HTML, Skripte und Assets an ihren ursprünglichen relativen Stellen.
Veröffentlichung freigeben
Nutze dein Cloudflare- oder Vercel-Konto und erlaube dem Agenten die Veröffentlichung über CLI oder API.
Öffentliche Adresse öffnen
Prüfe die Website online, verbinde die Domain und teste Links, Bilder sowie Kontakt.
Alternative: Vollständige ZIP an Hosting-Support oder IT geben und nach Upload sowie Domain-Anbindung fragen.
Beispieldialog, keine Live-KI-Sitzung.
07 / Vor dem Kauf
Welche Aufgaben bleiben bei mir?
Du lieferst Inhalte, KI-Konto und Hosting-Konto. Mit deiner Zugriffsfreigabe kann KI Bearbeitung und Veröffentlichung übernehmen: lasse den fertigen Ordner auf Cloudflare oder Vercel hochladen. Alternativ gib die vollständige ZIP mit unveränderter Ordnerstruktur an Hosting-Support oder IT weiter.
Ist KI-Zugang enthalten?⌃
Nein. Organisiere dein Tool und dessen aktuelle Konto- oder Nutzungsanforderungen separat.
Kann ich eine Vorlage kommerziell nutzen?⌃
Commercial Use erlaubt Unternehmens- und Kundenprojekte gemäß veröffentlichter Lizenz. Kläre die Weitergabe bearbeitbarer Dateien vor einer Zusage an Kunden.
Brauche ich PRO für eine Website?⌃
Eine einzelne Vorlage ist erhältlich. Vergleiche Yearly und Lifetime, wenn eine größere Bibliothek zu weiteren Projekten passt.
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.
OneDollarStock setzt ein Projekt zur Vorbereitung der Plattform auf den Eintritt in den deutschen Markt im Rahmen des Akzelerationspfads „Go Global“ des Programms „Unicorn Hub Startup Booster“ um (Projektnr. FENG.02.28-IP.02-0013/23). Das Projekt wird aus Mitteln des Programms European Funds for Smart Economy 2021–2027 im Rahmen der Priorität „Innovation-friendly environment“, Maßnahme FENG.2.28 Startup Booster Poland, kofinanziert.
Mehr über das Projekt erfahren →
Novaform
Template ansehen
Kroma-Adaptation
Template ansehen
Arcilla Archive
Template ansehen
DESIGN
Template ansehen
Virelia
Template ansehen
Nearfield
Template ansehen
Vorami
Template ansehen
Iris Halden
Template ansehen
Forma
Template ansehen
Editorial Portfolio
Template ansehen
Mora
Template ansehen
Atelier North
Template ansehen
Novaform
Template ansehen
Kroma-Adaptation
Template ansehen
Arcilla Archive
Template ansehen
DESIGN
Template ansehen
Virelia
Template ansehen
Nearfield
Template ansehen
Vorami
Template ansehen
Iris Halden
Template ansehen
Forma
Template ansehen
Editorial Portfolio
Template ansehen
Mora
Template ansehen
Atelier North
Template ansehen
