Resumen del Constructor

Cada generación en el constructor 3D produce cinco entregables a partir de un solo prompt:

Los cinco se crean en un solo flujo de trabajo. No tiene que combinar nada manualmente.

Draftly utiliza una arquitectura de procesamiento por fases en lugar de una única llamada masiva a la IA. Esto garantiza calidad y exhaustividad:

Fase 0 — Planificación (~5 segundos) La IA lee tu prompt y genera un esquema del sitio: nombre de marca, eslogan, titular principal, CTA principal, ambiente de color, ambiente de fuente, 3-7 secciones y 3-5 diferenciadores específicos (hechos únicos sobre tu negocio, no texto genérico).

Fase 1 — Estructura (~20 segundos) Genera la barra de navegación, la sección principal, variables CSS, el motor de fotogramas de desplazamiento y anclajes de marcador de posición para secciones y pie de página.

Fase 2 — Secciones (en paralelo, ~30 segundos) Cada sección (características, precios, testimonios, etc.) se genera en una llamada de IA paralela separada. Un sitio de 6 secciones tarda el mismo tiempo que uno de 3 secciones.

Fase 3 — Pie de página (~10 segundos) Genera el pie de página por separado para que siempre esté presente. El pie de página nunca forma parte del presupuesto de la sección y nunca puede ser truncado.

Fase 4 — Ensamblaje (~5 segundos) Todas las piezas se unen. Se inyectan metaetiquetas SEO, etiquetas Open Graph, datos estructurados JSON-LD, garantía H1 y URL canónica.

Panel izquierdo — Chat y Controles - Entrada de chat en la parte inferior: describe tu sitio o solicita ediciones - Registro del sistema arriba: cada fase de generación con su tiempo y estado - Botones de acción: Vista previa a pantalla completa, Editar texto, Cambiar colores, Publicar en vivo - Barra de pestañas: Registro, Imagen, Video, Fotogramas, Código, Historial, Business OS

Panel derecho — Vista previa en vivo - Tu sitio generado renderizado en un iframe con la animación de desplazamiento activa - Haz clic en cualquier texto para editarlo en línea (gratis, cero créditos) - Barra de herramientas: alternar relación de aspecto (16:9 / 9:16), modos Ver / Editar / Editando, Pantalla completa, Regenerar

Barra de encabezado - Nombre del proyecto — haz clic para renombrar - Indicador de estado de guardado — muestra Guardado / Guardando... / Trabajando... en tiempo real - Rastreador de créditos — créditos restantes para este ciclo de facturación

Draftly guarda automáticamente tu proyecto de forma continua en dos capas:

Indicador de estado de guardado en el encabezado: - Guardado — Todos los cambios sincronizados con la nube - Guardando... — Sincronización en la nube en curso - Trabajando... — Generación en curso

Si cierras la pestaña a mitad de la generación, el banner de Reanudación automática aparece cuando vuelves a abrir el proyecto — haz clic en él para continuar exactamente donde la generación se detuvo. Tu trabajo nunca se pierde.

Registro — Feed de generación en vivo. Ve cada fase del proceso, su tiempo y advertencias a medida que ocurren.

Imagen — Tu imagen principal estática. Descarga la imagen original o activa una nueva generación de imagen.

Video — El video en movimiento. Descarga el MP4 o vuelve a generarlo con diferentes configuraciones de calidad.

Fotogramas — Los ~200 fotogramas de desplazamiento extraídos del video. Estos impulsan el efecto de desplazamiento parallax.

Código — El HTML original de tu sitio generado. Cópialo, descárgalo como ZIP o súbelo a GitHub.

Historial — Puntos de control de versión. Cada regeneración o edición importante crea un punto de restauración. Haz clic en cualquier versión para revertir — gratis, sin créditos.

Business OS — Panel de inteligencia de negocio con IA para tu marca (Pro+). Incluye sugerencias de contenido, contexto analítico y más.

Haz clic en Vista previa en el encabezado del estudio o en Nueva pestaña en la barra de herramientas de vista previa para abrir tu sitio con calidad de publicación en una pestaña de navegador separada — sin la interfaz del constructor — mientras sigues editando en el estudio.

Los sitios HTML de IA se cargan desde una URL de vista previa en memoria con tus fotogramas de desplazamiento y video inyectados.

Los proyectos preestablecidos abren /presets/live/[projectId] con tus fotogramas enviados por postMessage desde la ventana de origen.

Si la ventana emergente está bloqueada, permite las ventanas emergentes para draftly.space e inténtalo de nuevo. El guardado automático continúa en la pestaña original.

Durante la generación de la imagen principal, el video, la extracción de fotogramas y la interfaz de usuario del sitio web, la vista previa muestra una tarjeta de progreso con:

Totales típicos: imagen principal ~2–3 min, video ~3–4 min, fotogramas ~1–2 min, interfaz de usuario del sitio web ~2–3 min.

Si una tarea excede la estimación, la tarjeta muestra "tomando más tiempo de lo habitual" — la llamada a la API continúa hasta que se completa. Usa Cancelar generación para detenerla antes.

El chat del estudio está limitado a tu sitio web y al constructor de Draftly — no es un chat de IA general.

Ediciones del sitio (comandos directos): "Cambia el titular principal a …", "Añade una sección de preguntas frecuentes", "Tema más oscuro con detalles dorados".

Preguntas de cómo hacer obtienen respuestas instantáneas: "¿Cómo publico?", "¿Cómo funciona el modo de desplazamiento?", "¿Por qué mi sitio es lento con 4 videos?"

Los mensajes fuera de tema (clima, tareas, codificación no relacionada) se redirigen con enlaces a la Guía y la Documentación.

Abre la Guía (encabezado) para ver el recorrido completo o pregunta en el chat usando un formato de pregunta.

Haz clic en Reducir movimiento en la barra de herramientas de vista previa para minimizar las animaciones de la interfaz de usuario del estudio. La misma preferencia se guarda en Configuración → Apariencia → Reducir animaciones.

Los sitios generados incluyen alternativas CSS prefers-reduced-motion para que los visitantes con configuraciones de accesibilidad del sistema operativo vean revelaciones estáticas en lugar de efectos con mucho movimiento.