DocsConstructeur de site 3DAperçu du constructeur

Aperçu du constructeur

Comment fonctionne le pipeline du constructeur de site 3D — du prompt au site publié.

Ce que crée le constructeur

Chaque génération dans le constructeur 3D produit cinq livrables à partir d'un seul prompt :

1.Image Hero IA — Un visuel statique cinématique haute résolution utilisé comme fondation visuelle du site
2.Vidéo en mouvement — Un clip vidéo Veo 3.1 définissant l'animation de fond
3.Frames de défilement — ~200 frames WebP extraites de la vidéo pour une lecture synchronisée au défilement
4.HTML du site web — Site responsive complet avec sections, navigation, footer, moteur de défilement et méta SEO
5.URL en direct — Publié sur votre sous-domaine à *.draftly.space en quelques secondes

Les cinq sont créés dans un seul workflow. Vous n'avez rien à combiner manuellement.

Le pipeline de génération en 5 phases

Draftly utilise un pipeline découpé au lieu d'un seul appel IA géant. Cela garantit qualité et complétude :

Phase 0 — Planification (~5 secondes) L'IA lit votre prompt et génère un plan de site : nom de la marque, tagline, titre hero, CTA hero, ambiance colorée, ambiance typographique, 3 à 7 sections, et 3 à 5 différenciateurs spécifiques (faits uniques sur votre entreprise, pas de texte générique).

Phase 1 — Structure (~20 secondes) Génère la barre de navigation, la section hero, les variables CSS, le moteur de frames de défilement et les ancres de placeholder pour les sections et le footer.

Phase 2 — Sections (parallèle, ~30 secondes) Chaque section (fonctionnalités, tarification, témoignages, etc.) est générée dans un appel IA parallèle distinct. Un site de 6 sections prend le même temps qu'un site de 3 sections.

Phase 3 — Footer (~10 secondes) Génère le footer séparément pour qu'il soit toujours présent. Le footer ne fait jamais partie du budget de sections et ne peut jamais être tronqué.

Phase 4 — Assemblage (~5 secondes) Toutes les pièces sont assemblées. Les balises méta SEO, les balises Open Graph, les données structurées JSON-LD, la garantie H1 et l'URL canonique sont injectées.

Interface du constructeur

Panneau gauche — Chat & Contrôles - Saisie de chat en bas : décrivez votre site ou demandez des modifications - Journal système au-dessus : chaque phase de génération avec timing et statut - Boutons d'action : Aperçu plein écran, Modifier le texte, Changer les couleurs, Publier en direct - Barre d'onglets : Journal, Image, Vidéo, Frames, Code, Historique, Business OS

Panneau droit — Aperçu en direct - Votre site généré rendu dans un iframe avec l'animation de défilement active - Cliquez sur n'importe quel texte pour le modifier en ligne (gratuit, zéro crédit) - Barre d'outils : bascule de format d'image (16:9 / 9:16), modes Voir / Modifier / En cours d'édition, Plein écran, Régénérer

Barre d'en-tête - Nom du projet — cliquez pour renommer - Pilule de statut de sauvegarde — affiche Enregistré / Enregistrement... / En cours... en temps réel - Indicateur de crédits — crédits restants pour ce cycle de facturation

Sauvegarde automatique & Récupération

Draftly sauvegarde automatiquement votre projet en continu sur deux couches :

Local (instantané) — Modifications sauvegardées dans le stockage local de votre navigateur toutes les 250ms
Cloud (Firestore) — Synchronisé avec le serveur toutes les 20 à 60 secondes

Indicateur de statut de sauvegarde dans l'en-tête : - Enregistré — Toutes les modifications synchronisées avec le cloud - Enregistrement... — Synchronisation cloud en cours - En cours... — Génération en cours

Si vous fermez l'onglet en cours de génération, la bannière de reprise automatique apparaît lorsque vous rouvrez le projet — cliquez dessus pour reprendre exactement là où la génération s'est arrêtée. Votre travail n'est jamais perdu.

Onglets du constructeur expliqués

Journal — Flux de génération en direct. Voyez chaque phase du pipeline, le timing et les avertissements au fur et à mesure.

Image — Votre visuel hero statique. Téléchargez l'image brute ou déclenchez une nouvelle génération d'image.

Vidéo — La vidéo en mouvement. Téléchargez le MP4 ou régénérez avec différents paramètres de qualité.

Frames — Les ~200 frames de défilement extraites de la vidéo. Elles alimentent l'effet de défilement parallaxe.

Code — Le HTML brut de votre site généré. Copiez-le, téléchargez-le en ZIP ou poussez vers GitHub.

Historique — Points de contrôle de versions. Chaque régénération ou modification majeure crée un point de restauration. Cliquez sur n'importe quelle version pour revenir en arrière — gratuit, sans crédits.

Business OS — Tableau de bord d'intelligence business IA pour votre marque (Pro+). Inclut des suggestions de contenu, du contexte analytique, et plus.