Vista previa y edición

El panel de vista previa presenta el estado actualizado del proyecto. Desde allí puedes:

• Modificar dimensiones — alternar entre vistas de Teléfono, Tableta o Ancho completo.
• Inspect — al activar este modo, un clic sobre cualquier elemento abre la barra de inspección.
• Design — cambiar la identidad visual del proyecto completo (ver detalles más adelante).
• Deshacer, Rehacer e Historial de versiones.

El panel no requiere actualización manual: se recarga automáticamente al concluir cada compilación. (Excepción: los temas de WordPress en Playground cuentan con su propio botón de recarga independiente.)

Inspector de elementos

Herramientas disponibles según el tipo de elemento seleccionado:

• Edit Text — modificar texto directamente (exclusivo para nodos de texto).
• Image — sustituir la imagen mediante carga de archivo local o dirección URL (etiquetas img).
• Style — ajustar estilos en línea (color, márgenes, tipografía y tamaño) de forma directa y sin consultar a la IA.
• AI Edit — enviar el elemento seleccionado a la IA con una instrucción específica de rediseño.
• Close — ocultar la barra de herramientas.

Guardar cambios de texto e imágenes

Las modificaciones hechas con Edit Text e Image se acumulan en una barra de cambios pendientes. Ninguna modificación se consolida en el código hasta que pulses Save All. Al presionar Save All, se ejecuta una compilación que consume créditos. En cambio, los cambios aplicados mediante Style no intervienen en la IA y se guardan de forma instantánea.

Modo diseño (Design mode)

El panel Design permite transformar la apariencia global de un sitio previamente generado:

1. Selecciona un sistema de diseño disponible (y, si lo deseas, una variante de acento).
2. Haz clic en Ask AI to apply.

Este proceso aplica una capa de diseño estructurada, recompila el proyecto y ejecuta un pase de ajuste cromático para garantizar coherencia en todo el sitio. Esta operación consume créditos y requiere que no haya otra tarea en ejecución.

Exclusivo para proyectos web

El modo diseño no se encuentra disponible en proyectos de temas para WordPress o Shopify, ya que en dichos formatos el sistema de diseño se define durante la creación inicial.

Deshacer y Rehacer (Undo / Redo)

Disponibles mediante los botones de la barra superior o a través de los atajos Ctrl/Cmd + Z y Ctrl/Cmd + Shift + Z (o Ctrl + Y). Cada acción revierte exactamente un cambio (indicación de chat, ajuste con Style o cambio de diseño) y reconstruye la vista previa de inmediato.

Edición manual durante la navegación del historial

Si retrocedes en el historial y realizas modificaciones directas en el editor de código mientras te encuentras en un punto intermedio, cualquier acción posterior de Deshacer, Rehacer o Restaurar descartará dichas modificaciones manuales. Se recomienda regresar a la versión más reciente antes de editar código a mano o solicitar los cambios mediante el chat.

En proyectos de Shopify, aunque el panel no muestre estos botones, los atajos de teclado permanecen plenamente operativos.

Historial de revisiones

El icono de reloj despliega hasta las 20 versiones más recientes registradas antes de cada interacción con la IA, ajuste de estilo o cambio de diseño. Puedes pulsar Restore sobre cualquier versión anterior. El sistema crea una instantánea del estado actual antes de restaurar, por lo que la acción es completamente reversible y regenera la vista previa.

Instantáneas de publicación

Cada vez que publicas el proyecto, se almacena una instantánea del resultado generado (Pre-publish snapshot), visible bajo la sección Previous Versions en la ventana de publicación. Se mantienen disponibles las 5 versiones más recientes.

Alcance de las instantáneas de publicación

Estas instantáneas restauran únicamente la salida publicada en la web, sin alterar los archivos fuente del proyecto. Para revertir cambios en el código de trabajo, utiliza las funciones de Deshacer o el Historial de revisiones.