Website-Vorlagen. Mach aus deiner Geschäftsidee deine eigene Website, die du mit KI weiter anpassen kannst.
Verbinde Angebot, Arbeiten und Kontakt auf einer durchgehenden Seite. Sieh dir das ganze Layout an und prüfe deine Inhalte, bevor du ein Design wählst.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Deine Geschichte
Du
Können Angebot, Arbeiten und Kontakt auf diese Website mit Detailseiten bei Bedarf?
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 Geschichte
Kann eine Seite die Fragen deiner Besucher beantworten?
Ja, wenn dein Angebot auf eine Website mit Abschnitten für Leistungen, Arbeiten, Informationen über dich und Kontakt passt. Besucher scrollen oder nutzen das Menü. Für ausführliche Artikel oder eigene Leistungsseiten kannst du KI zusätzliche Seiten erstellen lassen.
Unternehmenspräsentation
Mehrere zusammenhängende Fragen können einen durchgehenden Ablauf bilden.
Gezielte Kampagne
Eine Landingpage konzentriert sich auf eine Kampagnenaktion; Onepage beschreibt den Seitenaufbau.
02 / Ganze Layouts
Welche Reihenfolge passt zu deinen Inhalten?
Beim Portfolio kommen Arbeiten vor ausführlichen Studioinformationen, bei Kursen Angebot und erster Besuch früh, bei Produkten die Erklärung vor den FAQ. Die Templates haben unterschiedliche Reihenfolgen. Wähle diejenige, die deinen Inhalten am nächsten kommt.
Primefolio
Studio-Index, Arbeiten, Fähigkeiten, Werte und Umfang. Ergänze echte Projekte.
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.
Quelldateien und technische Details ansehen
Primefolio: Reihenfolge im Original
02-primefolio/ index.html · main section order
Exakte Reihenfolge im aktuellen HTML. Englische Originalüberschriften, kein vorgeschlagener Neuaufbau.
01 #hero — Clear thinking.Fresh digital form.
02 #studio-index — Inside this studio
03 #work — Selected studies
04 #studio — A small studio with a wide-angle view.
05 #capabilities — Designed forwhat comes next.
06 #values — ● What mattersGood design starts with a shared understanding. A clear question, room to explore and care in the details.
07 #scope — A clear scope.
08 #decisions — Behindthe decisions.
09 #collaboration — One direction. Many ways to bring it to life.
10 #faq — Good questions.
11 #notes — Studio notes
12 #contact — Let’s give yournext idea a form.
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.
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.
Primefolio
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
Inhalte prüfen
Du
Setze Wichtiges nach vorn und erstelle für diese lange Leistung eine eigene Seite.
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.
03 / Inhalte prüfen
Wie viel muss dein Besucher verstehen?
Besucher müssen verstehen, was du anbietest, ob es passt, wie deine Arbeit aussieht und wie sie dich erreichen. Beginne mit diesen Antworten. Braucht ein Thema viel Erklärung, lasse KI eine eigene Seite erstellen und von der Hauptseite verlinken.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
Dasselbe vorbereitete Briefing
Stellen im Original
Zuordnung der Inhalte
Was geändert werden muss
Primefolio: zwei Leistungen, drei Projekte, drei Schritte, FAQ und Anfrage
#capabilities → #work → #scope → #faq → #contact
Vorhandene Leistungen, Projektdetails und Prozessfolge bieten jedem Inhalt einen Platz.
Fiktives Studio und Projekte durch echte Rolle und Arbeiten ersetzen. Anfrage verbinden; ausführliche Belege können eigene Seiten erhalten.
Morrow: dieselben fünf Inhaltsgruppen
#classes → #studio → #begin → #first-visit
Kurskarten können zwei Leistungen zeigen; Einstieg und erster Besuch erklären Vorbereitung und Prozess.
Projektbelege und allgemeine FAQ ergänzen. Unpassende Retreat-Bilder und Standortangaben entfernen.
Funktionen und Szenarien liefern Blöcke, die Produktgeschichte passt jedoch nicht zu einem Leistungsportfolio.
Produktzustände umschreiben, Projektkontext und Kontaktweg ergänzen. Für dieses Briefing mehr Umbau als bei Primefolio.
Eigene Inhalte vor der Auswahl ordnen
Der Vergleich verwendet ein beispielhaftes Berater-Briefing. Durch Ihre Inhalte ersetzen. Das Blatt speichert nichts und bewertet Templates nicht automatisch.
AI ChatBeispielablauf
Navigation & Details
Du
Prüfe Menü und Projektdetails, damit Besucher zum richtigen Inhalt und zurück kommen.
KI · Beispielantwort
Ich kann Menülinks und Detailfenster prüfen: richtiges Ziel, Schließen und Rückkehr zum öffnenden Element. Benötigt ein Projekt einen eigenen teilbaren Link, können wir eine zusätzliche HTML-Seite erstellen.
Menü und Details bedienbar machen
Menü nutzen
Prüfe den sichtbaren Abschnitt ohne Überdeckung durch den Header.
Details öffnen und schließen
Prüfe Schließen, Escape und Rückkehr zum Projektbutton.
Bei Bedarf Adresse ergänzen
Lass eine eigene Projektseite erstellen, wenn ein eigener Link nötig ist.
Danach: Menü und Details auf Handy und Desktop bedienen.
Beispieldialog, keine Live-KI-Sitzung.
04 / Navigation & Details
Können Besucher jedes Detail öffnen und verlassen?
Das Menü kann zu Abschnitten führen und Projektbuttons können Detailfenster öffnen. Lass KI prüfen, dass das Menü nach dem Klick schließt und Detailfenster geschlossen werden können. Soll ein Projekt einen eigenen teilbaren Link haben, erstelle dafür eine eigene Seite.
Kompaktes Detail
Ein Dialog kann eine kurze Projekterklärung innerhalb der Seite halten.
Tiefe oder teilbare Inhalte
Plane neue Routen, wenn ein Artikel oder Fall eine eigene Adresse braucht.
Primefolio: tatsächliche Desktop-Prüfung
Bei 1118×958 in Desktop-Chrome änderte der Menülink die URL zu #work und schloss das Menü. Serein öffnete Frage und Richtung; Escape schloss den Dialog und gab den Fokus an den Projektbutton zurück. Mobile Bedienung, Touch und sämtliche Ankerabstände wurden hier nicht geprüft.
Tatsächlicher Serein-Dialog, Desktop-Chrome 1118×958, 2. Oktober 2026. Englisches Original.
AI ChatBeispielablauf
Die Seite ändern
Du
Füge einen weiteren Leistungsabschnitt im Design dieser Website hinzu.
KI · Beispielantwort
Ich kann den gelieferten HTML-Code mit deinen Inhalten und Bildern bearbeiten. Sage, was geändert und behalten werden soll. Danach können wir die Vorschau weiter anpassen.
Vorlage zu deiner Website machen
Aktuellen Ordner nutzen
Arbeite mit den zuletzt veröffentlichten Dateien, damit bisherige Änderungen erhalten bleiben.
Änderung beschreiben
Gib KI die neuen Angaben und nenne Abschnitt oder Element.
Prüfen und veröffentlichen
Öffne die geänderte Seite und lade das aktualisierte Projekt auf dem bisherigen Hosting hoch.
Danach: eigene Inhalte in der geänderten Website ansehen.
Beispieldialog, keine Live-KI-Sitzung.
05 / Die Seite ändern
Kann ich später an dieser Website weiterarbeiten?
Ja. Behalte deinen aktuellen Projektordner und lasse KI eine Leistung, einen Abschnitt oder eine weitere Seite im bestehenden Design ergänzen. Prüfe die Vorschau und veröffentliche die neuen Dateien. Du arbeitest an deiner Website weiter, statt jedes Mal neu zu gestalten.
Vorbereitetes Template-Beispiel ansehen
›_ Beispiel für KI-BearbeitungFormwell
Du
Ergänze eine neue Leistung im vorhandenen Leistungsabschnitt und behalte den visuellen Stil.
KI · Beispielantwort
Das vorbereitete Formwell-Beispiel ergänzt eine Leistung auf der vorhandenen Seite. Prüfe Inhalte, Abstände und Navigation vor deiner Veröffentlichung.
Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.
AI ChatBeispielablauf
Dateien zur Website
Du
Die Bearbeitung ist fertig. Hilf mir bei Cloudflare-Veröffentlichung oder bereite die ZIP für meinen Host vor.
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 / Dateien zur Website
Was ergänze ich vor der Veröffentlichung?
Ergänze Inhalte, Kontakt oder Buchungen und veröffentliche den vollständigen Projektordner auf deinem Hosting. Dein autorisierter KI-Agent kann ihn auf Cloudflare oder Vercel hochladen. Alternativ gib die vollständige ZIP an Hosting-Support oder IT weiter. Behalte die Ordnerstruktur bei.
Website-Dateien + Designanweisungen
KI-Agenten beauftragen
Lass das fertige Projekt mit deinem autorisierten Kontozugang auf Cloudflare oder Vercel veröffentlichen.
Oder ZIP weitergeben
Sende den vollständigen Ordner als ZIP an Hosting-Support oder IT und frage nach Unterstützung beim Hochladen.
Öffentliche Website öffnen
Verbinde bei Bedarf deine Domain und prüfe Bilder, Handyansicht, Links sowie Kontakt unter der öffentlichen Adresse.
Wähle den Aufbau passend zu deinen Inhalten und prüfe Dateien sowie Lizenz auf der Produktseite. Du kannst mit einer Vorlage starten und später Seiten hinzufügen. Ein separates CMS brauchst du für ein Redaktionspanel, wenn du Dateien nicht mit KI aktualisieren möchtest.
Enthält das Template ein CMS oder Blog?⌃
Es gibt kein eingebautes Redaktionspanel. Seiten und Artikel ergänzt du per KI-Bearbeitung und Dateiveröffentlichung. Für mehrere Autoren mit eigenem Panel bindest du ein separates CMS an.
Kann ich später weitere Seiten ergänzen?⌃
Ja. Lass KI eine weitere HTML-Seite im Projekt mit dem bisherigen Design und Menülinks erstellen. Prüfe die Vorschau und lade den aktualisierten Ordner auf denselben Host.
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 →
Savi
Template ansehen
Rondist
Template ansehen
Passer
Template ansehen
Outer Light
Template ansehen
Osma
Template ansehen
Nightglass
Template ansehen
Lark
Template ansehen
Drumlin
Template ansehen
Aveniq
Template ansehen
Novera
Template ansehen
Aurelia Atelier
Template ansehen
Nivora
Template ansehen
Savi
Template ansehen
Rondist
Template ansehen
Passer
Template ansehen
Outer Light
Template ansehen
Osma
Template ansehen
Nightglass
Template ansehen
Lark
Template ansehen
Drumlin
Template ansehen
Aveniq
Template ansehen
Novera
Template ansehen
Aurelia Atelier
Template ansehen
Nivora
Template ansehen
