Editar Tu Sitio

Draftly te ofrece tres modos de edición distintos:

Para cambios de diseño, usa ediciones de chat. Para ajustes de texto, usa edición en línea. Para cambios estructurales más allá de lo que el chat puede manejar, usa el editor de código.

Las ediciones de chat son la herramienta principal de iteración. Cuando escribes en el chat después de la generación, la IA: 1. Analiza tu solicitud 2. Genera un conjunto mínimo de parches HTML/CSS (0–8 operaciones) 3. Los aplica en vivo a la vista previa 4. Deduce 0.5 créditos

Lo que las ediciones de chat pueden hacer: - Cambiar cualquier color, degradado o variable CSS - Reescribir cualquier texto — titulares, texto del cuerpo, etiquetas de botones - Reestructurar secciones — columnas de cuadrícula, lista vs. tarjetas - Agregar o eliminar elementos dentro de las secciones - Cambiar fuentes, espaciado, relleno, estilos de borde - Insertar una nueva sección al final de la página

Lo que activa una regeneración completa: - Rediseño estructural completo (cambia la arquitectura del diseño) - Solicitudes que requieren volver a ejecutar el pipeline de imagen o video - Cambios demasiado difusos para expresarse como parches específicos

Aparece una advertencia clara antes de cualquier regeneración completa. Verás el costo de créditos y podrás cancelar.

Haz clic en cualquier texto visible en la vista previa del sitio para editarlo. Aparece una superposición editable — escribe tu nuevo texto y presiona Enter o haz clic en otro lugar para confirmar.

Lo que puedes editar en línea: - Titular y subtítulo del hero - Etiquetas de enlaces de navegación - Encabezados de sección y texto del cuerpo - Etiquetas de botones - Eslogan del pie de página e información de contacto

Las ediciones en línea se guardan automáticamente en tu proyecto. Volver a publicar las aplica al sitio en vivo.

La edición en línea es completamente gratuita — cero créditos.

Los Presets de Diseño son transformaciones de estilo con un clic que cambian todo el carácter visual de tu sitio sin tocar el contenido.

Abre el panel de presets a través del ícono de pincel en el panel izquierdo del constructor.

Categorías de presets: - Industria — Restaurante, SaaS, Portafolio, Agencia, Salud, Fitness, Bienes Raíces, Belleza - Paletas de color — Oscuro, Claro, Sombrío, Vibrante, Mínimo, Lujo, Ember, Océano, Bosque - Conjuntos de tipografía — Sans Moderno, Serif Clásico, Geométrico, Monoespaciado, Editorial - Densidad de diseño — Aireado (espacio en blanco generoso), Estándar, Compacto

Aplicar un preset: Haz clic en cualquier preset — la vista previa se actualiza en vivo. Haz clic en otro para comparar. Aplica para confirmar.

Los presets modifican variables CSS y elecciones de fuente — no la estructura HTML. Son completamente gratuitos, sin consumo de créditos.

Los colores de tu sitio se almacenan como variables CSS en el bloque <style>:

Tres formas de cambiar colores: - Chat: "Cambia el acento primario a #FF6B35" o "Haz el fondo un azul marino profundo" - Presets de Diseño: Elige una paleta de colores coordinada — cambia todas las variables a la vez - Editor de código: Edita las variables CSS :root directamente en la pestaña de Código

Los cambios de color por chat cuestan 0.5 créditos. Los cambios de preset y código son gratuitos.

Cada regeneración completa y edición importante crea un punto de control de versión guardado en tu pestaña de Historial.

Para revertir: 1. Abre la pestaña de Historial en el constructor 2. Haz clic en cualquier versión anterior para previsualizarla en el panel derecho 3. Haz clic en Restaurar para convertirla en tu versión actual

Revertir es gratuito — restaura el HTML guardado sin consumir créditos.

Los puntos de control del historial se almacenan en Firestore y sobreviven a recargas del navegador, cambios de dispositivo y cierres de sesión.