Visão Geral do Construtor
Como funciona o pipeline do Construtor 3D de Sites — do prompt ao site publicado.
O Que o Construtor Cria
Cada geração no construtor 3D produz cinco entregas a partir de um prompt:
*.draftly.space em segundosTodos os cinco são criados em um único fluxo de trabalho. Você não combina nada manualmente.
O Pipeline de Geração de 5 Fases
O Draftly usa um pipeline em etapas em vez de uma única chamada gigante de IA. Isso garante qualidade e completude:
Fase 0 — Planejamento (~5 segundos) A IA lê seu prompt e gera um blueprint do site: nome da marca, tagline, título hero, CTA hero, humor de cores, humor tipográfico, 3–7 seções e 3–5 diferenciais específicos (fatos únicos sobre seu negócio, não texto genérico).
Fase 1 — Estrutura (~20 segundos) Gera barra de navegação, seção hero, variáveis CSS, motor de frames de scroll e âncoras de espaço reservado para seções e rodapé.
Fase 2 — Seções (paralelo, ~30 segundos) Cada seção (recursos, preços, depoimentos, etc.) é gerada em uma chamada de IA paralela separada. Um site de 6 seções leva o mesmo tempo que um de 3 seções.
Fase 3 — Rodapé (~10 segundos) Gera o rodapé separadamente para que esteja sempre presente. O rodapé nunca faz parte do orçamento de seções e nunca pode ser truncado.
Fase 4 — Montagem (~5 segundos) Todas as peças são unidas. Meta tags de SEO, tags Open Graph, dados estruturados JSON-LD, garantia de H1 e URL canônica são injetados.
Interface do Construtor
Painel esquerdo — Chat e Controles - Campo de chat na parte inferior: descreva seu site ou solicite edições - Log do sistema acima: cada fase de geração com tempo e status - Botões de ação: Visualização em tela cheia, Editar texto, Mudar cores, Publicar ao vivo - Barra de abas: Log, Imagem, Vídeo, Frames, Código, Histórico, Business OS
Painel direito — Visualização ao Vivo - Seu site gerado renderizado em um iframe com a animação de scroll ativa - Clique em qualquer texto para editar inline (gratuito, zero créditos) - Barra de ferramentas: alternância de proporção (16:9 / 9:16), modos Visualizar / Editar / Editando, Tela Cheia, Regenerar
Barra de cabeçalho - Nome do projeto — clique para renomear - Indicador de status de salvamento — mostra Salvo / Salvando... / Trabalhando... em tempo real - Rastreador de créditos — créditos restantes neste ciclo de cobrança
Salvamento Automático e Recuperação
O Draftly salva seu projeto automaticamente de forma contínua em duas camadas:
Indicador de status de salvamento no cabeçalho: - Salvo — Todas as mudanças sincronizadas com a nuvem - Salvando... — Sincronização com a nuvem em andamento - Trabalhando... — Geração em andamento
Se você fechar a aba durante a geração, o Banner de Retomada Automática aparece quando você reabrir o projeto — clique nele para continuar exatamente de onde a geração parou. Seu trabalho nunca é perdido.
Abas do Construtor Explicadas
Log — Feed de geração ao vivo. Veja cada fase do pipeline, tempo e avisos conforme acontecem.
Imagem — Sua imagem hero estática. Baixe a imagem bruta ou acione uma nova geração de imagem.
Vídeo — O vídeo em movimento. Baixe o MP4 ou regenere com diferentes configurações de qualidade.
Frames — Os ~200 frames de scroll extraídos do vídeo. Eles alimentam o efeito de scroll de paralaxe.
Código — O HTML bruto do seu site gerado. Copie-o, baixe como ZIP ou envie para o GitHub.
Histórico — Checkpoints de versão. Cada regeneração ou edição importante cria um ponto de restauração. Clique em qualquer versão para reverter — gratuito, sem créditos.
Business OS — Dashboard de inteligência de negócios com IA para sua marca (Pro+). Inclui sugestões de conteúdo, contexto analítico e muito mais.