Modo de diseño
El Modo de diseño te permite guiar a los agentes de programación con instrucciones visuales. Desde el navegador de la ventana de agente de programación, puedes hacer clic en un elemento, dibujar en la página o describir un cambio por voz. Cursor captura el contexto necesario y edita el código mientras avanzas al siguiente cambio.
El trabajo de UI suele ser espacial. En lugar de describir un cambio con una frase, tu instrucción puede incluir el elemento seleccionado, el código que hay detrás, el diseño circundante y las relaciones visuales de la página. Esto acorta el ciclo entre detectar algo y solucionarlo.
Haz clic en un elemento de la app en ejecución, escribe una instrucción para ese elemento seleccionado y deja que el agente de programación edite el código.
Abrir el Modo de diseño
El Modo de diseño está en el navegador, dentro de la ventana de agente de programación. Abre el navegador y activa el Modo de diseño con CmdCtrl + Shift + D. Vuelve a desactivarlo con el mismo atajo para regresar a la navegación normal.
Formas de indicarle al agente qué hacer
El Modo de diseño te permite expresar tu intención de varias maneras.
Selecciona un elemento
Haz clic en cualquier elemento del producto en ejecución para seleccionarlo. El agente recibe el elemento y su código, por lo que puedes darle instrucciones sobre exactamente lo que ves sin salir de la app.
Seleccionar varios elementos
La selección múltiple resulta útil cuando el cambio depende de la relación entre elementos. Haz referencia a dos componentes y pide al agente que haga que uno coincida con el otro, elimine contenido repetido o ajuste un grupo en conjunto.
Selecciona varios elementos y describe cómo deberían cambiar en conjunto.
Dibuja en la página
El dibujo le indica al agente a qué área de la página se aplica tu instrucción. Rodea una sección saturada, delimita una región con un recuadro o marca parte de una página animada. La anotación se superpone a un fotograma congelado de la ventana gráfica, para que el agente vea el estado exacto de la página al que te referías.
Narrar con la voz
Puedes dictar instrucciones en lugar de escribirlas. El micrófono permanece disponible mientras se ejecutan los agentes de programación, así que puedes poner en cola el siguiente cambio sin esperar.
Usa la entrada de voz y el dibujo a la vez para describir un cambio.
Atajos de teclado
| Acción | Atajo |
|---|---|
| Activar o desactivar el Modo de diseño | CmdCtrl + Shift + D |
| Seleccionar un área | Shift + arrastrar |
| Añadir un elemento al chat | CmdCtrl + L |
| Añadir un elemento a la entrada | OptionAlt + clic |
Lo que ve el agente
Al seleccionar un elemento, se añaden dos señales complementarias al contexto:
- Identidad del elemento: el xpath, el componente, los atributos, los estilos calculados y las props del árbol de fibras. Esto ayuda al agente a encontrar el origen y editar el código adecuado.
- Una captura de pantalla: el diseño, los elementos circundantes y el estado exacto de la página. Esto proporciona al agente contexto espacial para el cambio.
Trabaja con fluidez
Al perfeccionar una interfaz, una edición suele llevar a la siguiente. Ajustas un componente, te fijas en el espaciado que lo rodea y luego ves cómo debería encajar otro componente.
El Modo de diseño te permite enviar esos cambios en cuanto los detectas. Señala un elemento, describe el cambio, pasa a otra parte de la página y envía otra edición antes de que termine la primera. Así puedes realizar varias tareas y gestionar varios subagentes a la vez. A medida que los agentes terminan, la app se recarga en caliente y tus cambios aparecen en el producto en ejecución.
Este flujo funciona mejor con un modelo rápido que destaque en el trabajo de interfaces. Recomendamos Composer 2.5.