Edita directamente en el lienzo
Perfecciona un diseño HTML después de generarlo: edita texto, ajusta los elementos seleccionados, guarda los cambios y comprueba el resultado antes de compartirlo.
Elige cómo realizar el cambio
| Tu tarea | Usa | Qué cambia |
|---|---|---|
| Conoces el texto, el color o el espaciado exactos | Edit (Editar) | El archivo HTML seleccionado, después de confirmar o guardar la edición |
| Quieres que el agente modifique un elemento | Comment (Comentar) → Send to chat (Enviar al chat) | El agente recibe una instrucción específica para el elemento |
| Quieres explicar una región visual | Mark (Marcar) | Se añaden a la conversación una captura de pantalla y notas |
Para crear una sección nueva, definir un comportamiento adaptable o realizar un cambio en varias pantallas, proporciona al agente instrucciones claras. Usa la edición directa para realizar un pequeño ajuste visual. Consulta comentarios y feedback marcado para conocer las otras dos opciones.
Abre una vista previa editable
- Abre un artefacto HTML desde Design Files (Archivos de diseño) y selecciona Preview (Vista previa). Los artefactos de diapositivas HTML también usan el editor de vista previa; los controles disponibles dependen del archivo.
- Elige Edit (Editar) en la barra de herramientas de la vista previa y selecciona el elemento en el lienzo. Espera a que aparezcan su contorno de selección y el panel de parámetros.
- Sal de Edit antes de probar enlaces, formularios o botones como un usuario normal. Seleccionar un elemento en el modo de edición tiene una finalidad distinta de usar el prototipo.
Cambia una línea de texto
- En Edit, haz clic en el texto que quieras cambiar. El texto y las etiquetas de los enlaces se pueden editar en el lienzo.
- Escribe el texto de sustitución. Pulsa Enter para confirmar este texto; Shift+Enter inserta un salto de línea. Pulsa Escape para cancelar la entrada de texto actual.
- Comprueba el texto en Preview normal. Si la página genera ese texto con JavaScript, prueba también la acción que vuelve a renderizarlo.
Ajusta un elemento o su disposición
Selecciona un elemento para ver las propiedades que admite. El inspector incluye tipografía, color, tamaño, espaciado, borde y radio de las esquinas. Los contenedores Flex y Grid muestran controles de disposición como dirección, alineación y Gap. Un enlace puede mostrar su Href; una imagen puede sustituirse mediante Upload image. Estos controles son contextuales, por lo que no todos los elementos tienen todos los campos.
Puedes arrastrar un elemento seleccionado para ajustar su posición. Haz cambios pequeños y comprueba los elementos cercanos y las disposiciones móviles; mover algo hasta que encaje en una vista de escritorio no establece una disposición adaptable.
| Campo | Qué introducir o comprobar |
|---|---|
| Text / Href / Image URL / Alt text | Los elementos de texto muestran su contenido; los enlaces también muestran su destino. Las imágenes muestran el origen y el texto alternativo. Los campos dependen del elemento seleccionado. |
| Text / Background / Border color | Usa un color hexadecimal como #262626. Comprueba el contraste y los estados al pasar el cursor después de guardar. |
| Opacity | Un número de 0 a 1: 0 es transparente y 1 es opaco. Esto afecta al elemento seleccionado, no solo a su fondo. |
| Font / Size / Weight / Line height / Letter spacing | Elige la fuente y el grosor, y después ajusta el tamaño y el espaciado entre caracteres. Line height acepta un número positivo o un valor en px; 1.5 es un multiplicador, mientras que 24px es una altura fija. |
| Width / Height | Un número sin unidad se convierte en px. Estas dimensiones admiten valores porcentuales. Comprueba las disposiciones estrechas antes de elegir un ancho fijo. |
| Padding / Margin | Ajusta por separado la parte superior, derecha, inferior e izquierda. Padding es el espacio interior del elemento; Margin lo separa de los elementos cercanos. Margin puede usar auto. |
| Border width / Style / Radius | Configura juntos el grosor, el estilo y el color del borde. Un grosor sin un estilo visible puede parecer que no hace nada. Radius redondea las esquinas. |
| Direction / Distribution / Gap / Align | Los controles de disposición dependen de que se seleccione un contenedor de disposición. En un elemento normal, Align cambia la alineación del texto; no es un comando para reorganizar su elemento principal. |
La mayoría de los campos de espaciado aceptan números o px, no expresiones CSS arbitrarias. Si se rechaza un valor, comprueba su unidad y el elemento seleccionado en lugar de intentar guardarlo repetidamente. Los campos vacíos pueden reflejar estilos heredados o calculados, en vez de un valor de cero.
Guarda, cancela o deshaz
| Acción | Qué significa |
|---|---|
| Enter mientras editas texto | Confirmar la edición de texto actual |
| Save en el panel de parámetros | Escribir en el archivo los cambios actuales de contenido y estilo |
| Cancel / Reset | Descartar o restablecer el borrador actual; esto no elimina todos los cambios confirmados anteriormente |
| Undo / Redo en el editor | Revertir o volver a aplicar las ediciones manuales confirmadas |
| Delete element | Eliminar el elemento seleccionado; comprueba las dependencias y usa Undo si es necesario |
Comprueba el resultado guardado
- Sal de Edit y vuelve a cargar la vista previa. Confirma que el cambio se conserva.
- Cambia el menú del área de visualización a un tamaño móvil y prueba los controles reales.
- Usa el historial de versiones si necesitas una versión HTML anterior. En el caso de un archivo compartido, actualiza su enlace después de comprobar la nueva versión.
Editar una animación HTML no cambia un MP4 ya renderizado. Solicita un nuevo renderizado y revisa el vídeo nuevo.
Si no puedes seleccionar o guardar
Confirma que has abierto un archivo HTML compatible en Preview y que el proyecto se puede editar. Un proyecto compartido de solo lectura puede permitir comentarios y, a la vez, desactivar la edición. Sal de Edit, vuelve a abrirlo y recarga el archivo si es necesario. Si al seleccionar sigues sin ver un contorno o el inspector, usa Comment o Mark para describir el cambio al agente e incluye la versión de tu aplicación cuando informes del problema. No sigas haciendo clic en Save sin un elemento seleccionado o un resultado confirmado.