Editando Seu Site
Patches por chat, edição de texto inline, presets de design, mudanças de cores e histórico de versões.
Três Formas de Editar
O Draftly oferece três modos de edição distintos:
Para mudanças de design, use edições por chat. Para ajustes de texto, use edição inline. Para mudanças estruturais além do que o chat consegue lidar, use o editor de código.
Edições por Chat (Patches Cirúrgicos)
Edições por chat são a principal ferramenta de iteração. Quando você digita no chat após a geração, a IA: 1. Analisa sua solicitação 2. Gera um conjunto mínimo de patches HTML/CSS (0–8 operações) 3. Aplica-os ao vivo na visualização 4. Deduz 0,5 créditos
O que as edições por chat podem fazer: - Mudar qualquer cor, gradiente ou variável CSS - Reescrever qualquer texto — títulos, corpo do texto, rótulos de botões - Reestruturar seções — colunas de grade, lista vs. cards - Adicionar ou remover elementos dentro de seções - Mudar fontes, espaçamento, preenchimento, estilos de borda - Inserir uma nova seção no final da página
O que aciona uma regeneração completa: - Redesenho estrutural completo (muda a arquitetura de layout) - Solicitações que requerem executar novamente o pipeline de imagem ou vídeo - Mudanças muito difusas para expressar como patches direcionados
Um aviso claro aparece antes de qualquer regeneração completa. Você verá o custo de créditos e poderá cancelar.
Edição de Texto Inline
Clique em qualquer texto visível na visualização do site para editá-lo. Uma sobreposição editável aparece — digite seu novo texto e pressione Enter ou clique em outro lugar para confirmar.
O que você pode editar inline: - Título e subtítulo do hero - Rótulos de links de navegação - Cabeçalhos de seções e corpo de texto - Rótulos de botões - Tagline e informações de contato do rodapé
As edições inline são salvas automaticamente no seu projeto. Republicar as aplica ao site ao vivo.
A edição inline é completamente gratuita — zero créditos.
Presets de Design
Os Presets de Design são transformações de estilo com um clique que mudam todo o caráter visual do seu site sem tocar no conteúdo.
Abra o painel de presets pelo ícone de pincel no painel esquerdo do construtor.
Categorias de preset: - Setor — Restaurante, SaaS, Portfólio, Agência, Saúde, Fitness, Imóveis, Beleza - Paletas de cores — Escuro, Claro, Sombrio, Vibrante, Minimalista, Luxo, Ember, Oceano, Floresta - Conjuntos de tipografia — Sans Moderno, Serif Clássico, Geométrico, Monoespaçado, Editorial - Densidade de layout — Arejado (espaço generoso), Padrão, Compacto
Aplicando um preset: Clique em qualquer preset — a visualização atualiza ao vivo. Clique em outro para comparar. Aplique para confirmar.
Os presets modificam variáveis CSS e escolhas de fontes — não a estrutura HTML. São completamente gratuitos, sem créditos consumidos.
Mudando Cores
As cores no seu site são armazenadas como variáveis CSS no bloco <style>:
--bg — fundo da página--accent — cor de destaque principal / CTA--text — texto do corpo--heading — cor dos títulos--border — cor de borda / divisorTrês formas de mudar cores:
- Chat: "Mude o destaque principal para #FF6B35" ou "Deixe o fundo azul marinho profundo"
- Presets de Design: Escolha uma paleta de cores coordenada — muda todas as variáveis de uma vez
- Editor de código: Edite as variáveis CSS :root diretamente na aba Código
Mudanças de cor por chat custam 0,5 créditos. Mudanças por preset e código são gratuitas.
Histórico de Versões
Cada regeneração completa e edição importante cria um checkpoint de versão salvo na sua aba Histórico.
Para reverter: 1. Abra a aba Histórico no construtor 2. Clique em qualquer versão anterior para visualizá-la no painel direito 3. Clique em Restaurar para torná-la sua versão atual
Reverter é gratuito — restaura o HTML salvo sem consumir créditos.
Os checkpoints de histórico são armazenados no Firestore e sobrevivem a atualizações do navegador, trocas de dispositivo e logouts de sessão.