Aperçu du constructeur

Chaque génération dans le constructeur 3D produit cinq livrables à partir d'une seule invite :

Les cinq sont créés en un seul flux de travail. Vous ne combinez rien manuellement.

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

Phase 0 — Planification (~5 secondes) L'IA lit votre prompt et génère un plan de site : nom de marque, slogan, titre principal, CTA principal, ambiance couleur, ambiance police, 3 à 7 sections, et 3 à 5 éléments 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 principale, les variables CSS, le moteur de défilement par images, et les ancres de remplacement pour les sections et le pied de page.

Phase 2 — Sections (en parallèle, ~30 secondes) Chaque section (fonctionnalités, tarifs, 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 — Pied de page (~10 secondes) Génère le pied de page séparément afin qu'il soit toujours présent. Le pied de page ne fait jamais partie du budget des 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.

Panneau de gauche — Chat et Contrôles - Champ de saisie du chat en bas : décrivez votre site ou demandez des modifications - Journal système au-dessus : chaque phase de génération avec son timing et son statut - Boutons d'action : Prévisualiser en plein écran, Modifier le texte, Changer les couleurs, Publier en direct - Barre d'onglets : Journal, Image, Vidéo, Images clés, Code, Historique, Business OS

Panneau de droite — Prévisualisation 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 du rapport d'aspect (16:9 / 9:16), modes Affichage / Modification / Édition, Plein écran, Régénérer

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

Draftly sauvegarde automatiquement votre projet en continu sur deux niveaux :

Indicateur de statut de sauvegarde dans l'en-tête : - Enregistré — Toutes les modifications synchronisées avec le cloud - Enregistrement... — Synchronisation cloud en cours - Travail 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'était arrêtée. Votre travail n'est jamais perdu.

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

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

Vidéo — La vidéo animée. Téléchargez le MP4 ou régénérez-la avec des paramètres de qualité différents.

Images clés — Les ~200 images de défilement extraites de la vidéo. Celles-ci alimentent l'effet de défilement parallaxe.

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

Historique — Points de contrôle de version. 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 économique IA pour votre marque (Pro+). Inclut des suggestions de contenu, un contexte analytique, et plus encore.

Cliquez sur Prévisualiser dans l'en-tête du studio ou sur Nouvel onglet dans la barre d'outils de prévisualisation pour ouvrir votre site de qualité publiée dans un onglet de navigateur séparé — sans l'interface du builder — pendant que vous continuez à éditer dans le studio.

Les sites HTML IA se chargent à partir d'une URL de prévisualisation en mémoire avec vos images de défilement et votre vidéo injectées.

Les projets prédéfinis ouvrent /presets/live/[projectId] avec vos images clés postMessaged depuis l'ouvreur.

Si la fenêtre contextuelle est bloquée, autorisez les pop-ups pour draftly.space et réessayez. La sauvegarde automatique continue dans l'onglet d'origine.

Pendant la génération de l'image principale, de la vidéo, l'extraction des images clés et la génération de l'interface utilisateur du site web, la prévisualisation affiche une carte de progression avec :

Totaux typiques : image principale ~2–3 min, vidéo ~3–4 min, images clés ~1–2 min, interface utilisateur du site web ~2–3 min.

Si une tâche dépasse l'estimation, la carte affiche "prend plus de temps que d'habitude" — l'appel API continue jusqu'à ce qu'il soit terminé. Utilisez Annuler la génération pour arrêter plus tôt.

Le chat du studio est limité à votre site web et au builder Draftly — pas à un chat IA général.

Modifications du site (commandes directes) : "Changez le titre principal en…", "Ajoutez une section FAQ", "Thème plus sombre avec des accents dorés".

Les questions pratiques obtiennent des réponses instantanées : "Comment publier ?", "Comment fonctionne le mode défilement ?", "Pourquoi mon site est-il lent avec 4 vidéos ?"

Les messages hors sujet (météo, devoirs, codage non lié) sont redirigés avec des liens vers le Guide et la Documentation.

Ouvrez le Guide (en-tête) pour le parcours complet ou posez votre question dans le chat.

Cliquez sur Réduire les animations dans la barre d'outils de prévisualisation pour minimiser les animations de l'interface utilisateur du studio. La même préférence est enregistrée dans Paramètres → Apparence → Réduire les animations.

Les sites générés incluent des solutions de repli CSS prefers-reduced-motion afin que les visiteurs ayant des paramètres d'accessibilité du système d'exploitation voient des révélations statiques au lieu d'effets très animés.