Visão Geral do Construtor

Cada geração no construtor 3D produz cinco entregáveis a partir de um prompt:

Todos os cinco são criados em um único fluxo de trabalho. Você não combina nada manualmente.

Draftly usa um pipeline em blocos 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 projeto do site: nome da marca, slogan, título principal, CTA principal, paleta de cores, estilo de fonte, 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 principal, variáveis CSS, motor de quadros de rolagem e âncoras de placeholder 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 site 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 SEO, tags Open Graph, dados estruturados JSON-LD, garantia H1 e URL canônica são injetados.

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: Pré-visualizar em tela cheia, Editar texto, Mudar cores, Publicar ao vivo - Barra de abas: Log, Imagem, Vídeo, Quadros, Código, Histórico, Business OS

Painel Direito — Pré-visualização ao Vivo - Seu site gerado renderizado em um iframe com a animação de rolagem ativa - Clique em qualquer texto para editar inline (grátis, zero créditos) - Barra de ferramentas: alternar 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 para este ciclo de faturamento

Draftly salva automaticamente seu projeto continuamente em duas camadas:

Indicador de status de salvamento no cabeçalho: - Salvo — Todas as alterações sincronizadas com a nuvem - Salvando... — Sincronização com a nuvem em andamento - Trabalhando... — Geração em andamento

Se você fechar a aba no meio da geração, o banner de Retomar automaticamente aparece ao reabrir o projeto — clique nele para continuar exatamente de onde a geração parou. Seu trabalho nunca é perdido.

Log — Feed de geração ao vivo. Veja cada fase do pipeline, tempo e avisos conforme acontecem.

Imagem — Sua imagem principal estática. Baixe a imagem original 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.

Quadros — Os ~200 quadros de rolagem extraídos do vídeo. Eles alimentam o efeito de rolagem parallax.

Código — O HTML bruto do seu site gerado. Copie-o, baixe-o como ZIP ou envie para o GitHub.

Histórico — Pontos de verificação de versão. Cada regeneração ou edição importante cria um ponto de restauração. Clique em qualquer versão para reverter — grátis, sem créditos.

Business OS — Painel de inteligência de negócios de IA para sua marca (Pro+). Inclui sugestões de conteúdo, contexto de análise e muito mais.

Clique em Pré-visualizar no cabeçalho do estúdio ou em Nova aba na barra de ferramentas de pré-visualização para abrir seu site com qualidade de publicação em uma aba separada do navegador — sem a interface do construtor — enquanto você continua editando no estúdio.

Sites HTML de IA carregam de uma URL de pré-visualização em memória com seus quadros de rolagem e vídeo injetados.

Projetos predefinidos abrem /presets/live/[projectId] com seus quadros enviados via postMessage do abridor.

Se o pop-up for bloqueado, permita pop-ups para draftly.space e tente novamente. O salvamento automático continua na aba original.

Durante a geração da imagem principal, vídeo, extração de quadros e interface do site, a pré-visualização mostra um cartão de progresso com:

Totais típicos: imagem principal ~2–3 min, vídeo ~3–4 min, quadros ~1–2 min, UI do site ~2–3 min.

Se uma tarefa exceder a estimativa, o cartão mostra "demorando mais que o usual" — a chamada da API continua até ser concluída. Use Cancelar geração para parar antes.

O chat do estúdio é focado no seu site e no construtor Draftly — não é um chat de IA geral.

Edições do site (comandos diretos): "Mude o título principal para …", "Adicione seção de FAQ", "Tema mais escuro com detalhes dourados".

Perguntas de como fazer obtêm respostas instantâneas: "Como eu publico?", "Como funciona o modo de rolagem?", "Por que meu site está lento com 4 vídeos?"

Mensagens fora do tópico (clima, lição de casa, codificação não relacionada) são redirecionadas com links para Guia e Documentação.

Abra o Guia (cabeçalho) para o passo a passo completo ou pergunte no chat usando um formato de pergunta.

Clique em Reduzir movimento na barra de ferramentas de pré-visualização para minimizar as animações da interface do estúdio. A mesma preferência é armazenada em Configurações → Aparência → Reduzir animações.

Sites gerados incluem fallbacks CSS prefers-reduced-motion para que visitantes com configurações de acessibilidade do SO vejam revelações estáticas em vez de efeitos com muito movimento.