Builder-Übersicht

Jede Generierung im 3D-Builder erzeugt fünf Ergebnisse aus einem Prompt:

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

Draftly verwendet eine segmentierte Pipeline anstelle eines einzigen riesigen KI-Aufrufs. Dies garantiert Qualität und Vollständigkeit:

Phase 0 — Plan (~5 Sekunden) KI liest Ihren Prompt und erstellt einen Website-Entwurf: Markenname, Slogan, Hero-Überschrift, Hero-CTA, Farbstimmung, Schriftstimmung, 3–7 Abschnitte und 3–5 spezifische Alleinstellungsmerkmale (einzigartige Fakten über Ihr Unternehmen, keine generischen Texte).

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

Phase 2 — Abschnitte (parallel, ~30 Sekunden) Jeder Abschnitt (Funktionen, Preise, Testimonials usw.) wird in einem separaten parallelen KI-Aufruf generiert. Eine Website mit 6 Abschnitten benötigt die gleiche Zeit wie eine Website mit 3 Abschnitten.

Phase 3 — Footer (~10 Sekunden) Generiert den Footer separat, sodass er immer vorhanden ist. Der Footer ist nie Teil des Abschnittsbudgets und kann niemals gekürzt werden.

Phase 4 — Zusammenfügen (~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.

Linkes Panel — Chat & Steuerung - Chat-Eingabe unten: Beschreiben Sie Ihre Website oder fordern Sie Bearbeitungen an - Systemprotokoll oben: jede Generierungsphase mit Zeitangabe und Status - Aktionsschaltflächen: Vorschau Vollbild, Text bearbeiten, Farben ändern, Live veröffentlichen - Registerkartenleiste: Protokoll, Bild, Video, Frames, Code, Verlauf, Business OS

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

Kopfzeile - Projektname — zum Umbenennen klicken - Speicherstatus-Anzeige — zeigt Gespeichert / Speichern... / In Arbeit... in Echtzeit an - Credit-Tracker — verbleibende Credits für diesen Abrechnungszyklus

Draftly speichert Ihr Projekt kontinuierlich in zwei Ebenen automatisch:

Speicherstatus-Anzeige in der Kopfzeile: - Gespeichert — Alle Änderungen mit der Cloud synchronisiert - Speichern... — Cloud-Synchronisierung läuft - In Arbeit... — Generierung läuft

Wenn Sie den Tab während der Generierung schließen, erscheint das Banner zur automatischen Wiederaufnahme, wenn Sie das Projekt erneut öffnen — klicken Sie darauf, um genau dort weiterzumachen, wo die Generierung aufgehört hat. Ihre Arbeit geht nie verloren.

Protokoll — Live-Generierungsfeed. Sehen Sie jede Pipeline-Phase, Zeitangaben und Warnungen, während sie auftreten.

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

Video — Das Bewegtbild. Laden Sie die MP4 herunter oder generieren Sie sie mit anderen Qualitätseinstellungen neu.

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

Code — Der rohe HTML-Code Ihrer generierten Website. Kopieren Sie ihn, laden Sie ihn als ZIP herunter oder pushen Sie ihn zu GitHub.

Verlauf — Versions-Checkpoints. Jede Regenerierung 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.

Klicken Sie auf Vorschau in der Studio-Kopfzeile oder auf Neuer Tab in der Vorschau-Symbolleiste, um Ihre Website in Veröffentlichungsqualität in einem separaten Browser-Tab zu öffnen — ohne Builder-Chrome — während Sie im Studio weiter bearbeiten.

KI-HTML-Websites werden von einer In-Memory-Vorschau-URL geladen, wobei Ihre Scroll-Frames und Videos eingefügt werden.

Voreingestellte Projekte öffnen /presets/live/[projectId], wobei Ihre Frames vom Öffner per postMessage gesendet werden.

Wenn das Popup blockiert ist, erlauben Sie Popups für draftly.space und versuchen Sie es erneut. Das automatische Speichern wird im ursprünglichen Tab fortgesetzt.

Während der Generierung von Hero-Bild, Video, Frame-Extraktion und Website-UI zeigt die Vorschau eine Fortschrittskarte mit:

Typische Gesamtzeiten: Hero ~2–3 Min., Video ~3–4 Min., Frames ~1–2 Min., Website-UI ~2–3 Min.

Wenn ein Job die Schätzung überschreitet, zeigt die Karte „dauert länger als üblich“ an — der API-Aufruf wird fortgesetzt, bis er abgeschlossen ist. Verwenden Sie Generierung abbrechen, um frühzeitig zu stoppen.

Der Studio-Chat ist auf Ihre Website und den Draftly Builder zugeschnitten — nicht auf einen allgemeinen KI-Chat.

Website-Bearbeitungen (direkte Befehle): „Ändern Sie die Hero-Überschrift zu …“, „FAQ-Abschnitt hinzufügen“, „Dunkleres Thema mit goldenen Akzenten“.

Anleitungsfragen erhalten sofortige Antworten: „Wie veröffentliche ich?“, „Wie funktioniert der Scroll-Modus?“, „Warum ist meine Website mit 4 Videos langsam?“

Off-Topic-Nachrichten (Wetter, Hausaufgaben, irrelevante Codierung) werden mit Links zu Anleitung und Dokumentation umgeleitet.

Öffnen Sie die Anleitung (Kopfzeile) für die vollständige Schritt-für-Schritt-Anleitung oder fragen Sie im Chat in Frageform.

Klicken Sie auf Bewegung reduzieren in der Vorschau-Symbolleiste, um Studio-UI-Animationen zu minimieren. Dieselbe Präferenz wird unter Einstellungen → Erscheinungsbild → Animationen reduzieren gespeichert.

Generierte Websites enthalten prefers-reduced-motion CSS-Fallbacks, sodass Besucher mit OS-Barrierefreiheitseinstellungen statische Einblendungen anstelle von bewegungsintensiven Effekten sehen.