Builder Overview

Every generation in the 3D builder produces five deliverables from one prompt:

All five are created in one workflow. You don't manually combine anything.

Draftly uses a chunked pipeline instead of one giant AI call. This guarantees quality and completeness:

Phase 0 — Plan (~5 seconds) AI reads your prompt and outputs a site blueprint: brand name, tagline, hero headline, hero CTA, color mood, font mood, 3–7 sections, and 3–5 specific differentiators (unique facts about your business, not generic copy).

Phase 1 — Shell (~20 seconds) Generates navigation bar, hero section, CSS variables, scroll frame engine, and placeholder anchors for sections and footer.

Phase 2 — Sections (parallel, ~30 seconds) Each section (features, pricing, testimonials, etc.) is generated in a separate parallel AI call. A 6-section site takes the same time as a 3-section site.

Phase 3 — Footer (~10 seconds) Generates the footer separately so it is always present. The footer is never part of the section budget and can never be truncated.

Phase 4 — Assemble (~5 seconds) All pieces are stitched together. SEO meta tags, Open Graph tags, JSON-LD structured data, H1 guarantee, and canonical URL are injected.

Left panel — Chat & Controls - Chat input at the bottom: describe your site or request edits - System log above: each generation phase with timing and status - Action buttons: Preview fullscreen, Edit text, Change colors, Publish live - Tab bar: Log, Image, Video, Frames, Code, History, Business OS

Right panel — Live Preview - Your generated site rendered in an iframe with the scroll animation active - Click any text to edit inline (free, zero credits) - Toolbar: aspect ratio toggle (16:9 / 9:16), View / Edit / Editing modes, Fullscreen, Regenerate

Header bar - Project name — click to rename - Save status pill — shows Saved / Saving... / Working... in real time - Credit tracker — remaining credits for this billing cycle

Draftly auto-saves your project continuously in two layers:

Save status indicator in the header: - Saved — All changes synced to cloud - Saving... — Cloud sync in progress - Working... — Generation in progress

If you close the tab mid-generation, the Auto-resume banner appears when you reopen the project — click it to pick up exactly where generation left off. Your work is never lost.

Log — Live generation feed. See each pipeline phase, timing, and warnings as they happen.

Image — Your hero still. Download the raw image or trigger a new image generation.

Video — The motion video. Download the MP4 or re-generate with different quality settings.

Frames — The ~200 scroll frames extracted from the video. These power the parallax scroll effect.

Code — The raw HTML of your generated site. Copy it, download it as ZIP, or push to GitHub.

History — Version checkpoints. Every regeneration or major edit creates a restore point. Click any version to roll back — free, no credits.

Business OS — AI business intelligence dashboard for your brand (Pro+). Includes content suggestions, analytics context, and more.

Click Preview in the studio header or New tab in the preview toolbar to open your published-quality site in a separate browser tab — without builder chrome — while you keep editing in the studio.

AI HTML sites load from an in-memory preview URL with your scroll frames and video injected.

Preset projects open /presets/live/[projectId] with your frames postMessaged from the opener.

If the popup is blocked, allow pop-ups for draftly.space and try again. Autosave continues in the original tab.

During hero image, video, frame extraction, and website UI generation, the preview shows one progress card with:

Typical totals: hero ~2–3 min, video ~3–4 min, frames ~1–2 min, website UI ~2–3 min.

If a job exceeds the estimate, the card shows "taking longer than usual" — the API call continues until it completes. Use Cancel generation to stop early.

The studio chat is scoped to your website and the Draftly builder — not general AI chat.

Site edits (direct commands): "Change the hero headline to …", "Add FAQ section", "Darker theme with gold accents".

How-to questions get instant answers: "How do I publish?", "How does scroll mode work?", "Why is my site slow with 4 videos?"

Off-topic messages (weather, homework, unrelated coding) are redirected with links to Guide and Documentation.

Open Guide (header) for the full walkthrough or ask in chat using a question format.

Click Reduce motion in the preview toolbar to minimize studio UI animations. The same preference is stored in Settings → Appearance → Reduce animations.

Generated sites include prefers-reduced-motion CSS fallbacks so visitors with OS accessibility settings see static reveals instead of motion-heavy effects.