Statische Website-Vorlagen. Behalte deine eigenen Dateien und entwickle deine Website weiter, auch wenn du Hosting oder KI-Tool wechselst.
Beginne mit bearbeitbaren Website-Dateien und einem sichtbaren Design. Prüfe, wie du Inhalte aktualisierst, die Seite veröffentlichst und benötigte Dienste verbindest.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Was statisch bedeutet
Du
Kann die statische Seite Menü und Projektdetails interaktiv behalten?
KI · Beispielantwort
Ja. Das gelieferte JavaScript kann Menü und Detailfenster im Besucherbrowser steuern. Ich kann diese Interaktionen behalten oder anpassen. Nachrichteneingang und Konten verbinden wir separat mit dem passenden Dienst.
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.
01 / Was statisch bedeutet
Kann eine statische Website interaktiv sein?
Ja. JavaScript kann Menüs, Filter, Detailfenster und weitere Interaktionen direkt im Browser steuern. Eine statische Website kann interaktiv sein. Nachrichten, Anmeldungen und Zahlungen benötigen einen angebundenen Dienst zum Empfangen und Verarbeiten der Daten.
Darstellung und lokale UI
Inhalte, Navigation und Beispielinteraktionen gehören zum Frontend.
Daten und Dienste
Buchungen, Zahlungen, Konten und Nachrichtenempfang brauchen ein gewähltes System und Umsetzung.
AI ChatBeispielablauf
Anforderungen prüfen
Du
Ich brauche eine Firmenwebsite mit Kontakt und vielleicht Blog, Shop oder Kundenkonten. Was liefert das HTML-Design und wofür brauche ich einen weiteren Dienst?
KI · Beispielantwort
Das HTML-Projekt liefert die öffentliche Website mit Inhalten, Bildern, Navigation und Browserinteraktionen. Sage, welche Funktionen du jetzt brauchst. Ein Kontaktformular benötigt einen Empfangsdienst, ein Shop Checkout und Bestellbearbeitung, Kundenkonten ein Kontosystem. Für häufiges Publizieren über ein Panel ergänzt du ein CMS; gelegentliche Änderungen können wir mit KI in den Dateien machen.
Anforderungen an die Website festlegen
Kurze Anforderungen schreiben
Nenne Seiten, Bearbeiter und benötigte Funktionen: Kontakt, Buchung, Shop, Konten oder häufige Artikel.
Funktionen den Diensten zuordnen
Lass KI Darstellung und nötige Formular-, Buchungs-, Shop-, Konto- oder CMS-Dienste unterscheiden.
Design passend zur Einrichtung wählen
Wähle den Aufbau für deine Inhalte und plane nötige Anbindungen bei der Anpassung. Nicht benötigte Funktionen musst du nicht hinzufügen.
Danach: HTML-Design wählen und wissen, welche Kontakt-, Shop-, Konto- oder Publishing-Dienste du zusätzlich brauchst.
Beispieldialog, keine Live-KI-Sitzung.
02 / Anforderungen prüfen
Was muss deine Website tun?
Ein statisches Projekt passt zu Firmenwebsite, Portfolio oder Kampagne mit gelegentlichen Dateiänderungen. Für häufige Veröffentlichungen mehrerer Autoren oder eine Kunden-App kann ein CMS oder Backend nötig sein. Lass KI erklären, was deine geplanten Funktionen benötigen.
Dateien können passen
Du akzeptierst Bearbeitung und erneute Veröffentlichung und kannst nötige Dienste anbinden.
Ein weiteres System planen
Häufige Autorenbearbeitung, Konten oder Transaktionen brauchen einen eigenen Betriebsablauf.
AI ChatBeispielablauf
Dateien und Ressourcen
Du
Prüfe den Ordner: Welche Bilder und Schriften liegen lokal, welche laden aus dem Internet?
KI · Beispielantwort
Ich kann lokale Bildpfade, entfernte Bilder und Schrift-URLs im HTML prüfen und erklären, was Internetzugang braucht und welche Dateien bei index.html bleiben müssen.
Benötigte Ressourcen prüfen
Quelle prüfen
Lass KI lokale und extern geladene Ressourcen auflisten.
Pfade behalten
Behalte Asset-Ordner und relative Dateinamen beim Verschieben bei.
Öffentliche Kopie öffnen
Prüfe Bilder und Schriften auf der tatsächlichen Hosting-Adresse.
Danach: fehlenden Pfad korrigieren oder unerreichbare Ressource ersetzen.
Beispieldialog, keine Live-KI-Sitzung.
03 / Dateien und Ressourcen
Ist das gewählte Projekt eigenständig?
Das hängt vom Projekt ab: Bilder und Schriften können von externen Adressen laden. Lass KI den HTML-Code prüfen und lokale sowie externe Ressourcen benennen. Behalte die mitgelieferte Ordnerstruktur beim Kopieren und Veröffentlichen bei.
Website-Dateien + Designanweisungen
Lokale Dateien
index.html und Asset-Ordner müssen beim Verschieben zusammenbleiben.
Externe Ressourcen
Lass KI entfernte Bilder und Schriften benennen. Mit entsprechenden Rechten kann sie lokale Kopien vorbereiten.
Online-Dienste
Formulare, Buchungen und App-Links benötigen funktionierende Ziele, auch wenn alle Seitendateien lokal liegen.
Aktuelle Quelle: zwei interne Style-Blöcke, ein internes Script, kein Formular und keine externe Script- oder Stylesheet-URL. Drei Bilder laden von einem öffentlichen Medienhost. Drei Begleitbilder liegen im ZIP; HTML verwendet weiter Host-URLs. Quellinventar, keine Offline- oder Ladezeitgarantie.
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
Updates verantworten
Du
Ändere diesen Leistungstext in meiner aktuellen statischen Website und bereite die Dateien vor.
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.
04 / Updates verantworten
Wer übernimmt das nächste Inhaltsupdate?
Du kannst es selbst mit KI machen. Öffne den aktuellen Ordner und beschreibe Text-, Bild- oder Abschnittsänderungen. Direkte HTML-Bearbeitung oder Entwicklerhilfe sind ebenfalls möglich. Prüfe die Vorschau und veröffentliche die Dateien im gleichen Hosting-Projekt.
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.
Quelldateien und technische Details ansehen
Original → gespeicherter Leistungsinhalt
11-forma-studio/index.html · #services first service heading and paragraph
Exakter Inhalt vor/nach der Änderung. Die bearbeitete Datei steht oben.
Web design
Start with the pages and decisions a visitor needs. Shape the content, establish a readable hierarchy and carry the visual identity through responsive layouts and useful interface states.
→
Webdesign für Publikationen
Für eine unabhängige Publikation: Ausgabenübersicht, Artikellayout und Angaben zu Mitwirkenden planen. Ergebnis: Seitenplan, wiederverwendbares Artikellayout und Inhaltsnotizen. Hypothetischer Leistungsbrief, kein echtes Kundenprojekt.
Ursprüngliche Forma-Studio-Leistung
Mitgelieferte englische Originalseite mit fiktiven Inhalten. Ganze Seite öffnen, um Aufbau und Bedienung zu prüfen.Ganze Vorschau öffnen ↗
Gespeicherte Änderung: Publikationswebsite
Tatsächliche vorbereitete Quelländerung: Erster Titel und Absatz nennen Zielgruppe, Unterlagen und Ergebnisse. Hypothetische Leistung, kein KI-Protokoll. Lokale Vorschau; Kunden-ZIP unverändert.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
Dateien veröffentlichen
Du
Veröffentliche meine fertige Website mit Cloudflares CLI oder API. Ich gebe den Kontozugriff frei.
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.
05 / Dateien veröffentlichen
Wie werden Dateien zu einer Live-Website?
Bitte deinen KI-Agenten mit Dateizugriff, den fertigen Ordner mit deinem autorisierten Kontozugang auf Cloudflare oder Vercel zu veröffentlichen. Er kann CLI- oder API-Schritte übernehmen und bei der Domain helfen. Alternativ sende die vollständige ZIP an Hosting-Support oder IT. Behalte alle Ordner und Assets bei.
01
KI-Agenten beauftragen
Lass das fertige Projekt mit deinem autorisierten Kontozugang auf Cloudflare oder Vercel veröffentlichen.
02
Oder ZIP weitergeben
Sende den vollständigen Ordner als ZIP an Hosting-Support oder IT und frage nach Unterstützung beim Hochladen.
03
Öffentliche Website öffnen
Verbinde bei Bedarf deine Domain und prüfe Bilder, Handyansicht, Links sowie Kontakt unter der öffentlichen Adresse.
Wenn der Aufbau passt, mit welchem Design beginne ich?
Starte mit dem Design passend zu deinen Inhalten und prüfe Dateien sowie vollständige Vorschau. Die Projekte bieten unterschiedliche Website-Aufbauten für KI-Anpassungen. Wähle bei Leistungen, Portfolio oder Produktpräsentation nach den Informationen für Besucher.
Forma Studio
Identity- und Digitalstudio-Präsentation mit Arbeiten, Vorgehen und Leistungen.
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.
07 / Faire Abwägung
Ist statisch automatisch günstiger, schneller oder sicherer?
Nicht automatisch. Hostingpreis, Bildgrößen, angebundene Dienste und Aktualisierung bestimmen das Ergebnis. Ein statisches Projekt lässt dir Hostingwahl und eigene Dateien. Vergleiche deine geplante Einrichtung, statt eine pauschale Ersparnis anzunehmen.
Kann ich Kontaktnachrichten erhalten?⌃
Ja. Verbinde das Formular mit einem Empfangsdienst oder nutze E-Mail-Link. Lass KI den Weg einrichten und prüfe eine Testsendung im Postfach oder Dienst.
Kann das ein häufig bearbeitetes CMS ersetzen?⌃
Für gelegentliche Aktualisierungen bearbeitest du Dateien mit KI und veröffentlichst erneut. Für häufiges Publizieren mehrerer Personen über ein Panel bindest du ein CMS an oder wählst ein passendes System.
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
