HTML-Website-Vorlagen. Wähle ein fertiges Design und passe es mit KI an (Claude, ChatGPT/Codex, Gemini und mehr).
Beginne mit einer Website, die du dir schon als deine vorstellen kannst. Vergleiche Layout und enthaltene Dateien und passe das gewählte Projekt mit deinen Inhalten und deinem KI-Tool an.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Deine Website
Du
Ordne Leistungen, Projekte und Kontakt dieser Website für meine Firma.
KI · Beispielantwort
Gib mir Angebot, Beispiele und Kontaktweg. Ich kann sie in die Abschnitte einsetzen und bei Bedarf Abschnitte verschieben oder ergänzen.
Website-Inhalte ordnen
Material sammeln
Nutze Leistungsbeschreibungen, Projektbilder und Kontaktdaten.
Ins Template einsetzen
Lass Beispielabschnitte ersetzen und gewünschte Designelemente behalten.
Umordnen oder Seite ergänzen
Ziehe Wichtiges nach vorn oder ergänze für mehr Details eine Seite.
Danach: Angebot und Kontakt aus Besuchersicht finden.
Beispieldialog, keine Live-KI-Sitzung.
01 / Deine Website
Was soll ein Besucher auf deiner Website tun?
Besucher sollen dein Angebot verstehen, deine Arbeiten ansehen oder dein Produkt ausprobieren und anschließend Kontakt aufnehmen können. Wähle eine Vorlage, die dafür bereits Platz bietet. Texte, Bilder und Links kannst du mit KI ändern.
Leistungen vorstellen
Erkläre dein Angebot, für wen es passt und wie man dich erreicht.
Arbeiten zeigen
Gib echten Projekten Raum für Bilder, deine Rolle und den Kontext.
Ein Produkt vorstellen
Erkläre den Ablauf und verlinke deine echte App oder Demo.
02 / Design wählen
Vergleiche, was die einzelnen Designs präsentieren.
Wähle Forma Studio oder Offset für ein visuelles Portfolio, Morrow für Kurse und Leistungen oder Relayline zur Erklärung eines Softwareprodukts. Öffne die vollständigen Vorschauen und vergleiche auch die Abschnitte unter dem Hero.
Forma Studio
Identity- und Digitalstudio: Arbeiten, Vorgehen und Leistungen. Ergänze eigene Projekte.
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.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
Quelldateien und technische Details ansehen
Relayline: Reihenfolge im Original
04-relayline/ index.html · main section order
Exakte Reihenfolge im aktuellen HTML. Englische Originalüberschriften, kein vorgeschlagener Neuaufbau.
01 #unnamed — Give every handoffa clear next step
02 #unnamed — (visual section)
03 #overview — Keep the contextwith the next step
04 #features — Small details. Clearer handoffs. Explore the building blocks of this fictional workspace.
05 #unnamed — The next person should be able to pick up the work without piecing together the whole story.
06 #scenarios — Different work.The same clear handoff.
07 #principles — Built around the personwho picks up next
08 #faq — FAQ
09 #try — A clear next step.Ready when you are.
Morrow: Reihenfolge im Original
07-morrow/ index.html · main section order
Exakte Reihenfolge im aktuellen HTML. Englische Originalüberschriften, kein vorgeschlagener Neuaufbau.
01 #home — Make roomfor yourself.
02 #begin — Take it at your pace.
03 #unnamed — (visual section)
04 #classes — A little movement.A little space.
05 #studio — A shared space.Your own rhythm.
06 #retreat — A slower weekend.
07 #first-visit — You can start here.
08 #journal — A few thoughts onmoving, noticingand making space.
Frage des Besuchers
Stelle im Original
Was die Originalseite zeigt
Was Ihre Website braucht
Was soll der Besucher nutzen oder verstehen?
Relayline #overview / #features / #scenarios
Eine Software-Erklärung führt zu drei Übergabe-Szenarien.
Echte Produktansichten und unterstützte Aufgaben ergänzen. Die lokale Übergabe ist kein App-Backend.
Welche Leistung soll ich wählen?
Morrow #classes / #studio / #first-visit
Sechs Kursarten stehen neben Studio-Kontext und einem Leitfaden für den ersten Besuch.
Echte Kursinhalte, Standort und Verfügbarkeit ergänzen. Buchung und Zahlung brauchen einen eigenen Dienst.
Relayline
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
Morrow
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
In der ZIP
Du
Was mache ich mit HTML und RECREATE.md im Download?
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.
03 / In der ZIP
Wozu dienen Website-Dateien und Anleitung?
Die HTML-Datei ist die Website, die du öffnen und bearbeiten kannst. RECREATE.md erklärt deiner KI das Design. Entpacke das Projekt in einen Ordner und gib dem Agenten Zugriff auf den gesamten Ordner einschließlich vorhandener Assets. Die genauen Dateien stehen beim Produkt.
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
Forma Studio: mitgelieferte Rekonstruktionsanleitung
11-forma-studio/ RECREATE.md, first 8 lines (output contract)
Die Anleitung beschreibt diese konkrete Seite und ihren Aufbau. Mit index.html lesen; sie ist weder CMS noch Hosting-Dienst.
# Recreate Forma Studio
## 1. Output contract
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.
Target current Chromium with native dialog, named details, IntersectionObserver, backdrop-filter and svh support. The page should open directly from disk with network access and via a local HTTP server. All enquiry and email-preview actions are local browser demos with no submission, storage or backend. Generate the page and its three supplied asset files. Preserve the exact design and copy below, including all fictional/concept disclosures and testimonial-example labels. Do not create additional commercial claims, external destinations, animations or content.
AI ChatBeispielablauf
Besucheraktionen
Du
Wie verbinde ich die Website, damit Anfragen bei mir ankommen?
KI · Beispielantwort
Wähle E-Mail, Formular-Empfangsdienst oder Buchungslink. Ich kann das Ziel anbinden und bei einer Testsendung helfen. Eine Meldung im Browser belegt noch keinen Eingang.
Anfragen mit deinem Postfach verbinden
Ziel wählen
Nutze E-Mail-Adresse, Formular-Empfangsdienst oder deinen Buchungslink.
Mit KI verbinden
Gib das Ziel an und lasse Button oder Formular anbinden. Private Zugangsdaten gehören in die autorisierte Einrichtung, nicht in öffentliches HTML.
Test senden
Prüfe den tatsächlichen Nachrichteneingang oder Termin im Dienst, nicht nur eine Erfolgsmeldung auf der Seite.
Danach: Testnachricht oder Buchung im Empfangsdienst prüfen.
Beispieldialog, keine Live-KI-Sitzung.
04 / Besucheraktionen
Wird durch einen Klick wirklich eine Nachricht versendet?
Erst wenn du den Kontaktweg verbindest. Bitte die KI, den Button mit deiner E-Mail-Adresse zu verknüpfen, das Formular an einen Empfangsdienst anzuschließen oder deinen Buchungslink einzusetzen. Sende eine Testanfrage und prüfe den tatsächlichen Eingang.
Ziel wählen
Nutze E-Mail-Adresse, Formular-Empfangsdienst oder deinen Buchungslink.
Mit KI verbinden
Gib das Ziel an und lasse Button oder Formular anbinden. Private Zugangsdaten gehören in die autorisierte Einrichtung, nicht in öffentliches HTML.
Test senden
Prüfe den tatsächlichen Nachrichteneingang oder Termin im Dienst, nicht nur eine Erfolgsmeldung auf der Seite.
AI ChatBeispielablauf
Anpassen
Du
Ersetze das Studio durch meine Firma, nutze meine Texte und Bilder und behalte den 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 / Anpassen
Kann meine KI die Website verändern?
Ja. Öffne das heruntergeladene Projekt in einem KI-Agenten mit Dateizugriff und beschreibe deine Wünsche: Firmenname, Texte, Bilder, Farben oder ein anderes Layout. Sage, was bleiben soll, und passe die Vorschau anschließend weiter an.
Vorbereitetes Template-Beispiel ansehen
›_ Beispiel für KI-BearbeitungFormwell
Du
Ersetze die Beispieltexte zu Studio und Leistungen durch meine gelieferten Unternehmensinhalte. Behalte das Layout bei.
KI · Beispielantwort
Das vorbereitete Beispiel ändert die Studiotexte und behält das Layout. Prüfe Formulierungen und Kontaktweg, bevor du deine eigene Version verwendest.
Meine Website ist fertig. Veröffentliche den Ordner über Cloudflares CLI oder API nach meiner Kontofreigabe.
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.
06 / Vor dem Start
Was braucht meine Website noch?
Du brauchst deine fertigen Inhalte, funktionierende Kontaktlinks und Hosting. Bitte deinen KI-Agenten mit Dateizugriff, den fertigen Ordner mit deinem autorisierten Kontozugang auf Cloudflare oder Vercel zu veröffentlichen. Alternativ gib die ZIP an den Hosting-Support oder eine IT-Person weiter; behalte die Ordnerstruktur bei.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
07 / Zugang wählen
Ein Design oder weitere Projekte?
Wähle Single für ein bestimmtes Design. PRO passt, wenn du die Template-Bibliothek für diese und weitere Websites sowie die übrigen PRO-Kreativmaterialien nutzen möchtest. Yearly verlängert sich jährlich, Lifetime ist ein Einmalkauf. Vergleiche die Optionen unten.
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 →
NERRA
Template ansehen
Morrow Journal
Template ansehen
Solenne
Template ansehen
Vela Skin
Template ansehen
Mira Solis
Template ansehen
Mira
Template ansehen
Avenra
Template ansehen
Veyra Studio
Template ansehen
Threadwell
Template ansehen
Asterline Workflow
Template ansehen
Avenly
Template ansehen
Relaydesk
Template ansehen
NERRA
Template ansehen
Morrow Journal
Template ansehen
Solenne
Template ansehen
Vela Skin
Template ansehen
Mira Solis
Template ansehen
Mira
Template ansehen
Avenra
Template ansehen
Veyra Studio
Template ansehen
Threadwell
Template ansehen
Asterline Workflow
Template ansehen
Avenly
Template ansehen
Relaydesk
Template ansehen
