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 :
*.draftly.space en quelques secondesLes 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 :
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.