@media (max-width: 1100px) { .ai-website-builder-document .site-chrome [data-nav-primary], .ai-website-builder-document .site-chrome [data-nav-toggle] { display: none !important; } .ai-website-builder-document .site-chrome .nav-inner { grid-template-columns: minmax(0, 1fr) auto; } .ai-website-builder-document .site-chrome .nav-inner > .brand { order: 1; justify-self: start; } .ai-website-builder-document .site-chrome .nav-inner > .nav-side { order: 2; justify-self: end; } }

KI-Website-BuilderOpenDesign

KI-Website-Builder. Deine Vision, auf deine Art umgesetzt.

OpenDesign vereint Designsysteme, visuelle Bearbeitung und die Wahl des KI-Setups in einem KI-Website-Builder. Erstelle eine Website, die zu deiner Marke passt, verfeinere sie in der Vorschau und behalte die Frontend-Dateien.

OpenDesign herunterladen Websites ansehen

Workflow eines KI-Website-Builders: Ein Kreativbriefing, wiederverwendbare Komponenten und Code werden zu einer responsiven Website für Desktop, Tablet und Mobilgeräte. — Responsives Website-System · generiert

01Workflow mit DesignsystemenWähle ein Designsystem in OpenDesign aus oder erstelle eines.

02Visuelle HTML-BearbeitungBearbeite ausgewählte Details in der Website-Vorschau von OpenDesign.

03Drei KI-SetupsVerbinde einen lokalen Agenten, nutze Bring Your Own Key oder OpenDesign Cloud.

04HTML- und Quellcode-ExportExportiere aus OpenDesign und arbeite mit deinen Projektdateien weiter.

Beispiele für Website-Designs

KI-Website-Builder-Konzepte für verschiedene Website-Arten.

Drei mit KI generierte Konzeptbilder zeigen unterschiedliche Ansätze für eine SaaS-Website, ein Portfolio und einen Produktlaunch. Sie veranschaulichen mögliche visuelle Richtungen – keine Kundenprojekte, Produkt-Screenshots oder getesteten Website-Implementierungen.

SaaS-Website

Ein Designkonzept für eine SaaS-Website

Ein helles Analytics-Konzept stellt eine Dashboard-Illustration neben die Produkterklärung und den Weg zur Conversion. Für deine eigene Website solltest du freigegebene Produktansichten und geprüfte Nachweise bereitstellen. Die hier gezeigte Oberfläche, Logos und Kennzahlen dienen nur zur Veranschaulichung.

Produkterklärung mit einer Interface-Illustration
Karten- und Diagrammmuster, die zu wiederverwendbaren Abschnitten weiterentwickelt werden können
Eine Desktop-Richtung zur Umsetzung und Prüfung auf kleineren Bildschirmbreiten

Produktlayout Interface-Richtung Abschnittsmuster

Illustratives Konzept für eine SaaS-Analytics-Website mit einer vollständigen Desktop-Landingpage und integriertem Dashboard. — Illustratives Design · Kein Kundenprojekt1672 × 941 · 16:9

Portfolio

Ein Editorial-Designkonzept für ein Portfolio

Dieses Architektur-Portfolio-Konzept kombiniert ein großes Aufmacherbild mit zurückhaltenderen Ansichten und dezenter Typografie. Nutze die Komposition als Referenz für die Reihenfolge deiner eigenen Arbeiten und stelle anschließend die echten Projekte, Bildunterschriften, Credits und Bildrechte bereit.

Abwechslungsreiche Bildrahmen statt einer Wand aus gleich großen Vorschaubildern
Editorial-Typografie für Titel und Bildunterschriften
Eine visuelle Richtung für Projekt-, Über-uns- und Kontaktseiten

Galerie-Layout Editorial-Typografie

Illustratives Konzept für ein Architekturportfolio mit einer vollständigen Desktop-Startseite, einem großen Projektbild und einer Editorial-Galerie. — Illustratives Design · Kein Kundenprojekt1672 × 941 · 16:9

Produktlaunch

Ein Designkonzept für einen Produktlaunch

Ein filmisch anmutendes Produktkonzept verbindet ein großes Bild mit einem prägnanten Versprechen und einem kompakten Spezifikationsbereich. Das Bild veranschaulicht die Art Direction, keinen funktionierenden Shop. Ersetze beispielhafte Aussagen und Spezifikationen durch freigegebene Informationen und verknüpfe die Kaufaktion mit deinem Commerce-Dienst.

Dunkler Hero-Bereich, in dem das Produktfoto für sich wirkt
Spezifikationszeile mit den Details, die wirklich zählen
Eine eindeutige Hauptaktion, am Ende einmal wiederholt

Launch-Layout Einzelner CTA

Illustratives Konzept für einen Produktlaunch: eine vollständige Desktop-Landingpage mit Kopfhörern, Launch-Texten und Produktspezifikationen. — Illustratives Design · Kein Kundenprojekt1672 × 941 · 16:9

So funktioniert es

Erstelle eine Website mit KI – vom ersten Gedanken bis zur fertigen Datei.

Wähle einen lokalen Coding-Agent mit Zugriff auf Projektdateien, Bring Your Own Key für den direkten Modellzugriff oder OpenDesign Cloud für einen Start mit gehosteten Modellen. Wähle dann ein Designsystem und beschreibe die Website. Die App ist kostenlos und Open Source; Kosten für Agent-Abos, die Nutzung von Anbietern oder Cloud-Credits hängen von deiner gewählten Konfiguration ab.

Schritt 1 — BeschreibenBeginne mit einem Satz.

01 / 04

Deine Vorgaben Bereit

Ein Portfolio für eine Fotografin oder einen Fotografen – ganzflächige Bilder, eine kurze Biografie und eine klare Kontaktmöglichkeit.

PortfolioEditorialContact-focused

Wähle ein Designsystem, füge eigene Medien hinzu und beschreibe Zielgruppe, Seiten und nächste Aktion in einfacher Sprache.

Was damit entsteht

Der OpenDesign-KI-Website-Builder in der Praxis.

Wechsle zwischen der generierten Website und den Details dahinter. OpenDesign vereint wiederverwendbaren Designkontext, unterstützte visuelle Bearbeitungen, markiertes Feedback für Agenten und portablen Frontend-Output in einem Workflow.

Designkontext aus deiner Marke

Mit OpenDesign kannst du ein Designsystem auswählen oder Designkontext aus einer Website, einem Repository oder freigegebenem Figma-Material erstellen. Ergänze neben diesen Regeln auch Zielgruppe und gewünschte Aktion. So erhält die Generierung sowohl eine visuelle Referenz als auch einen Zweck. Prüfe das Ergebnis, statt davon auszugehen, dass die Referenz exakt umgesetzt wurde.

Visuelle Bearbeitungen für kleine Änderungen

Wähle in der bearbeitbaren HTML-Vorschau von OpenDesign ein unterstütztes Element aus, um Text, ein Bild und dessen Alt-Text oder ein Linkziel zu ändern. Mit den visuellen Steuerelementen lassen sich auch Schrift, Abmessungen, Abstände und Ausrichtung bearbeiten. Korrigiere das konkrete Detail, das du siehst, und prüfe anschließend angrenzende Inhalte sowie den Zeilenumbruch auf Mobilgeräten.

Markiertes Feedback für größere Änderungen

Mit OpenDesign kannst du einen Abschnitt der Vorschau markieren und zusammen mit Feedback an deinen Agenten senden. Bitte mit einem sichtbaren Ziel um eine klarere Hierarchie, eine andere Bildgestaltung oder eine neue Anordnung der Abschnitte. Prüfe die geänderte Seite, bevor du sie übernimmst. Die Markierung dient als Orientierung für die Umsetzung, bestätigt aber nicht, dass das Ergebnis korrekt ist.

Lokaler Agent, BYOK oder Cloud

OpenDesign unterstützt den Zugriff auf lokale Coding-Agenten, einen unterstützten Modellanbieter mit deinem eigenen Schlüssel sowie OpenDesign Cloud. Wähle anhand deines vorhandenen Setups und deines Modellzugriffs. Projektberechtigungen, Anbietergebühren und Cloud-Credits hängen von deiner Wahl ab. Der Modellzugriff über Cloud ist kein Website-Hosting.

Ansicht auf Desktop, Tablet und Mobilgeräten

Die Website-Vorschau von OpenDesign bietet Ansichtsgrößen für Desktop, Tablet und Mobilgeräte. Prüfe die vollständige Navigation, längere Texte, Bildausschnitte, Formulare und Zustände der Bedienelemente – nicht nur einen ansprechenden Hero-Bereich. Nutze beim Anfordern von Korrekturen denselben Designkontext und überprüfe nach einer Layoutänderung jede Ansichtsgröße erneut.

Vorlagen und Frontend-Export

Mit OpenDesign kannst du ein freigegebenes Artefakt als Vorlage speichern. Außerdem gibt es einen HTML-Export oder einen Export von Quellcode und Assets. Prüfe den Inhalt des Pakets und teste es in der vorgesehenen Umgebung. Ein wiederverwendbarer Ausgangspunkt erleichtert das nächste Projekt, während das exportierte Frontend für Entwicklung und Veröffentlichung verfügbar bleibt.

Warum OpenDesign

Was OpenDesign zum Erstellen von Websites mit KI beiträgt.

OpenDesign bietet einen Workflow mit Designsystemen, eine bearbeitbare HTML-Vorschau, markiertes Feedback für deinen Agenten und drei Optionen für das KI-Setup. Mit diesen Produktfunktionen kannst du deine Marke in die Website einbringen und im Verlauf des Projekts gezielte Änderungen vornehmen.

Codex — **index.htmlstyles.csscomponents/**

Claude Code — **index.htmlstyles.csscomponents/**

Designsysteme in deinem Workflow

Wähle in OpenDesign ein Designsystem aus oder erstelle eines aus einer Website, einem GitHub-Repository oder Figma-Material. OpenDesign stellt der Generierung den Designkontext bereit, damit du Schrift, Farben, Abstände und Komponentenregeln deiner Marke auf mehreren Seiten wiederverwenden kannst.

Visuelle Bearbeitung und markiertes Feedback

In der bearbeitbaren HTML-Vorschau von OpenDesign kannst du Text, Bilder oder Links auswählen und unterstützte Inhalte und Stile ändern. Markiere einen Bereich, um größere Änderungen an deinen Agenten zu senden. Beide Werkzeuge geben deinem Feedback ein sichtbares Ziel, statt nur eine weitere Beschreibung der ganzen Seite zu liefern.

Dein Agent, BYOK oder OpenDesign Cloud

OpenDesign unterstützt einen lokalen Coding-Agenten, Bring Your Own Key und OpenDesign Cloud. Verbinde das Setup, das zu deinem Modellzugriff und deinen Projektanforderungen passt. Die App ist kostenlos und Open Source. Kosten für Agentenabos, Anbieternutzung und Cloud-Credits fallen separat an.

HTML- und Quellcode-Export

OpenDesign bietet Exportoptionen für HTML sowie für Quellcode und Assets. Prüfe das generierte Paket und arbeite anschließend mit Codex, Claude Code, Cursor oder deinem eigenen Editor weiter. Dein Team arbeitet mit bearbeitbarem Frontend-Output statt mit einer Designreferenz, die erst neu umgesetzt werden muss.

Die Wahl kurz erklärt

Mehr Einfluss darauf, wie deine Website entsteht.

Wähle OpenDesign für markenbewusste Websites, die du voraussichtlich weiterentwickeln wirst. Ein Portfolio, eine Kampagne oder eine SaaS-Website profitiert von wiederverwendbaren Designregeln, gezielten visuellen Änderungen und Frontend-Dateien, mit denen auch die nächste Person weiterarbeiten kann. Darin liegt der Grund, OpenDesign zu wählen – nicht in einem Versprechen, dass die erste Generierung automatisch fertig ist.

Wähle eine verwaltete Plattform, wenn du vor allem einen All-in-one-Betrieb brauchst. OpenDesign ist ein Design- und Frontend-Arbeitsbereich, kein verwaltetes CMS, kein Shop und keine Datenbank. Für die Veröffentlichung sind Integrationen mit einem konfigurierten Anbieter nötig. Formulare, Zahlungen und Produktionsdaten benötigen weiterhin verbundene Dienste. Wähle OpenDesign, wenn dir die Kontrolle über die Website wichtig ist und du einen Plan dafür hast, was im Hintergrund läuft.

Quellcode behalten

Ein KI-Website-Builder, der dir die Dateien überlässt.

Deine Website ist mehr als eine Vorschau in einem Builder. Sie besteht aus echten Dateien und Komponenten in deinem eigenen Projekt. So kannst du jede Änderung prüfen und das Ergebnis mit Codex, Claude Code, Cursor oder deinem Entwicklungsteam weiterentwickeln.

Codex

Claude Code Cursor

Cursor

Echtes HTML, CSS und JSEinfache Dateien, die du in jedem Editor öffnen, lesen und ändern kannst.

Struktur zum VerfeinernPrüfe die Ausgabe und bitte deinen Agent, gemeinsame Abschnitte zu organisieren. Die Dateistruktur hängt vom generierten Projekt ab.

Im eigenen Projekt gespeichertBehalte lokale Dateien, prüfe den Export und übernimm freigegebene Änderungen in deinen eigenen Versionskontroll-Workflow.

Mit deinem Agent weiterbauenÜbergib das Repository an den Coding-Agent, den du bereits nutzt, und arbeite dort weiter.

Website-Frontend Ein Designsystem.
Ganz normale Projektdateien.

index.htmlstyles.csscomponents/

components/Hero.js

export function Hero() {

return (

− <section class="hero">

+ <section class="hero hero--split">

<h1>{title}</h1>

</section>

);

}

Öffnen mit

Codex

Claude Code

Cursor

Mit Bring Your Own Key kannst du den Modellanbieter auswählen. Prüfe die Abrechnungs- und Datenrichtlinien des Anbieters. Wenn du Zugriff auf Projektdateien benötigst, nutze einen lokalen Coding-Agent.

Wähle deinen Ausgangspunkt

Ein KI-Website-Builder. Verschiedene Aufgaben, die du erledigen kannst.

Jeder Weg beginnt mit einem anderen Briefing, einer anderen Struktur und einem anderen Ziel.

Kostenloser KI-Website-BuilderEntdecke den vollständigen Workflow vom Design bis zum Frontend, bevor du entscheidest, wie es weitergeht.Entdecken Für Start-upsMach aus deiner Produktpositionierung ein launchfertiges Marken-Website-Frontend.Entdecken Für kleine UnternehmenErstelle Leistungsseiten, Vertrauensbelege, FAQs und einen klaren Kontaktweg.Entdecken Portfolio-WebsitesGib deinen Arbeiten Raum – mit redaktionell gestalteten Projektseiten und einer klaren Biografie.Entdecken SaaS-WebsitesErstelle Startseite, Funktionen, Preise und FAQ in einem gemeinsamen System.Entdecken Für AgenturenMach aus einem Kundenbriefing ein überprüfbares Website-Frontend, das du behalten kannst.Entdecken Für MarketingteamsGestalte Kampagnen- und Produktgeschichten, ohne die Markenkonsistenz zu verlieren.Entdecken Affiliate-Marketing-WebsitesOrdne Vergleiche, Empfehlungen und Vertrauenssignale in einem klaren Inhaltssystem.Entdecken Beratungs-WebsitesMach aus Fachwissen, Leistungen und Ergebnissen einen überzeugenden Weg ins Gespräch.Entdecken Persönliche WebsitesFühre deine Geschichte, Arbeiten und Links zusammen, ohne wie ein generisches Profil auszusehen.Entdecken Für EntwicklerStarte mit strukturierten Frontend-Dateien, statt ein Mock-up neu aufzubauen.Entdecken Statische WebsitesErstelle ein schnelles, portables Frontend, ohne die Benutzeroberfläche an eine Plattform zu binden.Entdecken Interaktive WebsitesGestalte sinnvolle Zustände und Interaktionen als Teil des Frontends – nicht als Dekoration.Entdecken Mehrsprachige WebsitesPlane eine sprachfähige Seitenstruktur und wiederverwendbare Benutzeroberflächen, bevor Übersetzungen den Umfang vervielfachen.Entdecken

Von Figma zur WebsiteÜberführe eine vorhandene visuelle Richtung in responsive, editierbare Frontend-Dateien.Entdecken

Klare Abgrenzung

Ein KI-Website-Builder fürs Frontend – mit klarer Abgrenzung.

OpenDesign erstellt das sichtbare Website-Erlebnis: responsive Seiten, wiederverwendbare Komponenten, Gestaltung und Dateien, die du behältst. Die Infrastruktur hinter der Benutzeroberfläche betreibt OpenDesign ausdrücklich nicht.

Was du erhältst

Responsive Seiten und wiederverwendbare Komponenten
Echte HTML-, CSS- und JavaScript-Dateien
Ein Designsystem, das du umgestalten kannst
Quellcode, den du behältst, bearbeitest und selbst bereitstellst

Dienste, die du separat verbindest

Hosting-Konten und Infrastruktur
Domainregistrierung
Ein CMS
Ein E-Commerce-Backend
Eine Produktionsdatenbank

Nutze unterstützte Integrationen mit Cloudflare Pages oder Vercel, nachdem du den Anbieter eingerichtet hast, oder exportiere die Dateien zu einem kompatiblen Host. Die verfügbaren Veröffentlichungsziele hängen von der Integration ab. Prüfe Pfade zu Medien, Links und Formulare auf der veröffentlichten Website. Anbieterkonten, Domains und Gebühren sind separat.

FAQ zum KI-Website-Builder

Fragen zum KI-Website-Builder – klar beantwortet.

Was OpenDesign erstellt, wie der Workflow weitergeht und wann ein anderes Tool sinnvoll ist.

Was ist ein KI-Website-Builder?

Ein KI-Website-Builder verwandelt ein Briefing in natürlicher Sprache in eine Website-Struktur, ein visuelles System und ein funktionierendes Frontend. OpenDesign konzentriert sich auf Frontend-Dateien im Markendesign, die responsiv sind und die du prüfen, bearbeiten und weiterentwickeln kannst.

Kann ich ohne Programmieren eine vollständige Website erstellen?

Du kannst eine Frontend-Richtung generieren und unterstützte HTML-Details verfeinern, ohne die erste Version selbst zu schreiben. Für Arbeiten an Projektdateien wählst du einen lokalen Coding-Agent, für deinen Anbieter und dein Modell BYOK oder für den Zugriff auf gehostete Modelle OpenDesign Cloud. Die App ist kostenlos; dein gewählter Modelldienst kann Gebühren berechnen. Formulare, Zahlungen, Authentifizierung und Produktionsdaten benötigen weiterhin verbundene Dienste oder Entwicklungsarbeit.

Sind OpenDesign-Websites für Mobilgeräte geeignet?

Du kannst ein responsives Frontend anfordern und die funktionierende Seite in Desktop-, Tablet- und Mobilansichten prüfen. Kontrolliere Navigation, längere Texte, Steuerelemente und Bildausschnitte bei jeder Größe. Eine Vorschau bestätigt nicht automatisch die Qualität des responsiven Designs, und die Konzeptbilder oben belegen keine getestete Umsetzung für Mobilgeräte.

Kann ich eine mit KI generierte Website bearbeiten?

Im editierbaren HTML kannst du Text, Bilder oder Links auswählen und Inhalte, Bildquellen und Alternativtexte, Linkziele, Typografie sowie Abstände ändern. Markiere größere Änderungen für den Agent. Für Änderungen an der Implementierung in lokalen Dateien brauchst du einen Coding-Agent mit Projektzugriff. Speichere ein freigegebenes Artefakt als Vorlage oder prüfe vor der Übergabe den HTML- oder Quellcodeexport.

Kann ich ein vorhandenes Figma-Design verwenden?

OpenDesign kann einen lokalen .fig-Export in einen strukturierten Snapshot mit Elementbaum, Tokens, Medien und Vorschau umwandeln und dieses Material als Designkontext verwenden. Ist eine Figma-URL nicht zugänglich, kannst du die freigegebene lokale Datei bereitstellen. Vergleiche die generierte Website mit der Vorlage: Eine verlustfreie Konvertierung, Live-Synchronisierung oder automatische Ausarbeitung aller responsiven und interaktiven Details ist nicht garantiert.

Ist die generierte Website SEO-freundlich?

Das Frontend kann semantisches HTML, aussagekräftige Metadaten, strukturierte Überschriften, barrierefreie Bildtexte und auf Leistung ausgelegte Medien enthalten. Diese Grundlagen erleichtern die Optimierung, doch kein Builder kann Rankings garantieren. Die Suchleistung hängt weiterhin von hilfreichen Inhalten, Crawlbarkeit, internen Links, Autorität, Veröffentlichungsqualität und laufender technischer Prüfung ab.

Umfasst OpenDesign Hosting, Domains oder ein CMS?

OpenDesign bietet unterstützte Veröffentlichungsintegrationen für entsprechend eingerichtete Cloudflare-Pages- und Vercel-Anbieter. Außerdem kannst du Dateien für einen anderen kompatiblen Host exportieren. Das Anbieterkonto, die Domain, ein verwaltetes CMS, ein Zahlungsdienst oder eine Produktionsdatenbank sind nicht enthalten. Veröffentlichungsziele und Kosten hängen vom Anbieter und der Integration ab. Prüfe das endgültige Live-Ergebnis.

Welche Arten von Websites kann ich erstellen?

Marketing-Websites, Portfolios, SaaS-Websites, Start-up- und Websites für kleine Unternehmen, Agentur- und persönliche Websites, statische Websites, Kampagnenseiten und Produktlaunches eignen sich besonders gut. Gemeinsam ist ihnen ein Frontend-Erlebnis, bei dem visuelle Hierarchie, Inhalte, responsives Verhalten und wiederverwendbare Komponenten wichtig sind.

Mit dem Erstellen beginnen

Mit deiner Marke erstellen. Optionen behalten.

Beginne mit einem Designsystem, wähle deinen Agenten oder dein Modell und gestalte die Website in einer funktionierenden Vorschau. Übernimm die Frontend-Dateien in den nächsten Arbeitsschritt, wenn du bereit bist.

OpenDesign herunterladen

Kostenlos und Open Source · Dein KI-Setup · Bearbeitbare Frontend-Dateien

Ausgabe eines KI-Website-Builders mit editierbaren Frontend-Dateien, wiederverwendbaren Komponenten, einem Code-Editor und responsiven Geräteansichten.

Bereit zur weiteren BearbeitungWebsite-Frontend generiertHTML · CSS · JS · Komponenten