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:
*.draftly.space veröffentlichtAlle 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:
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.