Docs3D-Website-BuilderBuilder-Übersicht

Builder-Übersicht

Wie die 3D-Website-Builder-Pipeline funktioniert — vom Prompt zur veröffentlichten Website.

Was der Builder erstellt

Jede Generierung im 3D-Builder produziert fünf Liefergegenstände aus einem Prompt:

1.KI-Hero-Bild — Ein kinematisches, hochauflösendes Standbild als visuelle Grundlage der Website
2.Bewegungsvideo — Ein Veo 3.1-Videoclip, der die Hintergrundanimation definiert
3.Scroll-Frames — ~200 WebP-Frames, die aus dem Video für scroll-synchronisierte Wiedergabe extrahiert wurden
4.Website-HTML — Vollständige responsive Website mit Abschnitten, Navigation, Footer, Scroll-Engine und SEO-Meta
5.Live-URL — In Sekunden auf Ihrer Subdomain unter *.draftly.space veröffentlicht

Alle fünf werden in einem Workflow erstellt. Sie müssen nichts manuell kombinieren.

Die 5-phasige Generierungs-Pipeline

Draftly verwendet eine aufgeteilte Pipeline anstelle eines einzigen großen KI-Aufrufs. Dies garantiert Qualität und Vollständigkeit:

Phase 0 — Plan (~5 Sekunden) KI liest Ihren Prompt und gibt einen Website-Blueprint aus: Markenname, Tagline, Hero-Überschrift, Hero-CTA, Farbstimmung, Schriftstimmung, 3–7 Abschnitte und 3–5 spezifische Alleinstellungsmerkmale (einzigartige Fakten über Ihr Unternehmen, kein generischer Text).

Phase 1 — Grundgerüst (~20 Sekunden) Generiert Navigationsleiste, Hero-Abschnitt, CSS-Variablen, Scroll-Frame-Engine und Platzhalter-Anker für Abschnitte und Footer.

Phase 2 — Abschnitte (parallel, ~30 Sekunden) Jeder Abschnitt (Features, Preise, Testimonials usw.) wird in einem separaten parallelen KI-Aufruf generiert. Eine 6-Abschnitte-Website nimmt dieselbe Zeit wie eine 3-Abschnitte-Website.

Phase 3 — Footer (~10 Sekunden) Generiert den Footer separat, damit er immer vorhanden ist. Der Footer ist nie Teil des Abschnittsbudgets und kann nie abgeschnitten werden.

Phase 4 — Zusammensetzen (~5 Sekunden) Alle Teile werden zusammengefügt. SEO-Meta-Tags, Open Graph-Tags, JSON-LD-strukturierte Daten, H1-Garantie und kanonische URL werden eingefügt.

Builder-Oberfläche

Linkes Panel — Chat & Steuerung - Chat-Eingabe unten: Website beschreiben oder Bearbeitungen anfordern - Systemprotokoll oben: jede Generierungsphase mit Zeitangabe und Status - Aktionsschaltflächen: Vorschau im Vollbild, Text bearbeiten, Farben ändern, Live veröffentlichen - Tab-Leiste: Protokoll, Bild, Video, Frames, Code, Verlauf, Business OS

Rechtes Panel — Live-Vorschau - Ihre generierte Website in einem iframe mit aktiver Scroll-Animation dargestellt - Klicken Sie auf einen beliebigen Text, um ihn inline zu bearbeiten (kostenlos, null Credits) - Werkzeugleiste: Seitenverhältnis-Umschalter (16:9 / 9:16), Ansichts-/Bearbeitungs-/Bearbeitungsmodi, Vollbild, Neu generieren

Kopfzeile - Projektname — zum Umbenennen klicken - Speicherstatuspille — zeigt Gespeichert / Speichern... / Arbeiten... in Echtzeit - Credit-Tracker — verbleibende Credits für diesen Abrechnungszyklus

Automatisches Speichern & Wiederherstellung

Draftly speichert Ihr Projekt kontinuierlich in zwei Ebenen automatisch:

Lokal (sofort) — Änderungen werden alle 250ms im lokalen Speicher Ihres Browsers gespeichert
Cloud (Firestore) — Alle 20–60 Sekunden mit dem Server synchronisiert

Speicherstatusanzeige im Header: - Gespeichert — Alle Änderungen mit der Cloud synchronisiert - Speichern... — Cloud-Synchronisierung läuft - Arbeiten... — Generierung läuft

Wenn Sie den Tab während der Generierung schließen, erscheint das Auto-Wiederaufnahme-Banner, wenn Sie das Projekt wieder öffnen — klicken Sie darauf, um genau dort weiterzumachen, wo die Generierung unterbrochen wurde. Ihre Arbeit geht nie verloren.

Builder-Tabs erklärt

Protokoll — Live-Generierungsfeed. Sehen Sie jede Pipeline-Phase, Zeitangaben und Warnungen in Echtzeit.

Bild — Ihr Hero-Standbild. Laden Sie das Rohbild herunter oder starten Sie eine neue Bildgenerierung.

Video — Das Bewegungsvideo. Laden Sie das MP4 herunter oder generieren Sie es mit anderen Qualitätseinstellungen neu.

Frames — Die ~200 Scroll-Frames, die aus dem Video extrahiert wurden. Diese ermöglichen den Parallax-Scroll-Effekt.

Code — Das reine HTML Ihrer generierten Website. Kopieren, als ZIP herunterladen oder zu GitHub pushen.

Verlauf — Versionspunkte. Jede Neugenerierung oder größere Bearbeitung erstellt einen Wiederherstellungspunkt. Klicken Sie auf eine beliebige Version, um zurückzusetzen — kostenlos, keine Credits.

Business OS — KI-Business-Intelligence-Dashboard für Ihre Marke (Pro+). Enthält Inhaltsvorschläge, Analysekontext und mehr.