Cursor Design Mode Annotate: señala tu interfaz y deja que el agente edite el código

Cursor Design Mode Annotate te permite señalar un elemento de una página web en ejecución, describir un cambio visual y enviar la instrucción a un agente de programación junto con los detalles del elemento y una captura de pantalla. Necesitas Cursor 3.24.18 o una versión posterior. Abre el navegador dentro de Agents Window y selecciona Annotate o pulsa Cmd/Ctrl + Shift + D. Si quieres realizar varios cambios relacionados, activa Batch edits para reunir las notas y enviarlas juntas.

Este flujo resulta útil cuando sabes qué aspecto de la interfaz está mal, pero no sabes qué componente React, regla CSS o plantilla controla ese elemento. También permite a los desarrolladores experimentados conectar las observaciones visuales con el código fuente de forma más directa. Aun así, el agente debe interpretar correctamente tu solicitud y modificar el proyecto. Por eso, revisa el código resultante y la página renderizada.

¿Dónde está Annotate y por qué solo veo un icono de lápiz?

Annotate está en la barra de herramientas del navegador dentro de Agents Window de Cursor. El control que aparece depende de la versión y de la interfaz que estés utilizando.

Sigue estos pasos:

1. Abre tu proyecto en Cursor y entra en Agents Window.
2. Inicia una sesión de agente o abre una existente. Después, abre el navegador que muestra tu aplicación en ejecución.
3. Haz clic en Annotate en la barra de herramientas del navegador. También puedes enfocar el navegador y pulsar Cmd + Shift + D en macOS o Ctrl + Shift + D en Windows y Linux.
4. Como alternativa, abre la paleta de comandos y busca Toggle Design Mode.
5. Sigue las indicaciones de la parte superior de la página para consultar los gestos disponibles.

Según la documentación oficial de Design Mode, Annotate está disponible desde Cursor 3.24.18.

Si ves un icono de lápiz con la etiqueta Design Mode, comprueba primero tu versión de Cursor. Las versiones anteriores utilizan ese control en lugar del nuevo botón Annotate. Actualiza Cursor si quieres utilizar la interfaz documentada de Annotate.

Hay otras dos razones por las que la barra puede tener un aspecto diferente. Antes de abrir Design Mode por primera vez, el botón muestra una vista previa Try Annotate con una demostración breve. Después de dejar más de cinco notas, el botón muestra únicamente su icono.

Para salir de Design Mode, haz clic en el botón de salida de la fila de indicaciones, pulsa de nuevo el atajo o presiona Esc. Escape cancela primero un trazo activo, una edición de texto o una nota abierta. Solo sale de Design Mode cuando esas interacciones están cerradas.

La documentación pública de Cursor no especifica qué planes de suscripción incluyen Annotate ni confirma un calendario de disponibilidad general. No des por hecho que todos los usuarios tienen acceso solo porque su versión cumple el requisito.

¿Cómo seleccionar elementos, dibujar anotaciones y editar CSS?

Selecciona un elemento cuando sepas qué componente quieres modificar. Marca una zona cuando el problema afecte al espaciado, la alineación o una composición visual más amplia.

Seleccionar uno o varios elementos

Haz clic en un elemento de la aplicación en ejecución para seleccionarlo y abrir una nota. Describe allí el cambio que necesitas.

Por ejemplo, imagina un panel SaaS con una cabecera demasiado cargada, un campo de búsqueda y una fila de botones de filtro. Selecciona el campo de búsqueda y escribe:

Aumenta la altura del campo de entrada y añade más espacio interior. Alinea verticalmente el texto con los botones de filtro. Conserva la combinación de colores actual.

El elemento seleccionado proporciona al agente un objetivo concreto. La instrucción escrita explica el resultado esperado.

Para seleccionar varios elementos relacionados, mantén pulsada Shift y haz clic en cada uno. Por ejemplo, selecciona el campo de búsqueda y los botones de filtro. Pide al agente que los alinee sobre la misma línea base y normalice sus alturas.

Utiliza la selección múltiple cuando los elementos deban cambiar juntos. Las notas separadas suelen ser más claras cuando los cambios son independientes o necesitan instrucciones diferentes.

Marcar una zona y dibujar sobre la página

Arrastra el cursor por la página para marcar una zona. Después, describe el cambio y añade marcas visuales.

La fila de indicaciones ofrece cuatro herramientas:

• Draw: dibuja una forma o marca una zona que necesita atención.
• Ellipse: rodea un elemento o un grupo de elementos.
• Rectangle: delimita una sección de la página.
• Arrow: señala la parte que debe cambiar.

Mantén pulsada Shift mientras arrastras para limitar el movimiento a un eje. Mantén pulsada Option en macOS o Alt en Windows y Linux para dibujar un rectángulo desde su centro. Pulsa Cmd/Ctrl + Z para deshacer una marca.

Imagina que una tarjeta de resumen está demasiado cerca de un gráfico. Dibuja un rectángulo alrededor de la zona que los separa y añade esta nota:

Añade un espaciado vertical de 24px entre las tarjetas de resumen y el gráfico. Conserva las dimensiones actuales del gráfico y mantén el diseño adaptable.

El dibujo identifica la ubicación. El texto explica el cambio y las restricciones que el agente debe respetar.

Editar el texto directamente en la página

Haz doble clic en un elemento de texto para modificar su contenido. Pulsa Return o Enter para guardar el cambio, o Esc para revertirlo.

Por ejemplo, cambia directamente en el navegador el encabezado «Usage Overview» por «API Usage». No necesitas describir la sustitución por separado.

Hay una distinción importante: las ediciones de texto siempre esperan a Send, incluso cuando Batch edits está desactivado. Guardar la edición en línea no la envía inmediatamente al agente.

Considera una edición de texto en línea como una propuesta de cambio en el código, no como una modificación permanente del navegador. Cursor la envía junto con la nota para que el agente pueda actualizar el proyecto.

Cambiar propiedades CSS con el inspector

En una nota dirigida a un solo elemento, selecciona Edit CSS properties para abrir el inspector CSS. Filtra las propiedades, cambia un valor y envía las modificaciones CSS con la nota.

Este método resulta útil para cambios concretos, como ajustar el padding, el tamaño de fuente, el comportamiento de display o el posicionamiento. Puedes modificar directamente la propiedad sin depender por completo de una descripción en lenguaje natural.

Comprueba la página después de que el agente aplique los cambios. El nuevo valor CSS puede interactuar con los estilos existentes, las reglas de diseño o el comportamiento adaptable. Revisa el diff para confirmar que el agente modificó el componente correcto y no introdujo cambios ajenos a la tarea.

Dictar una nota con la voz

La entrada de voz está disponible cuando una nota ya contiene texto o modificaciones CSS. Haz clic en Dictate o mantén pulsado el botón mientras hablas.

Puedes combinar instrucciones habladas con dibujos. Por ejemplo, rodea un banner promocional y explica que el texto debe ser más corto, el botón debe alinearse a la derecha y el diseño móvil debe organizar los elementos verticalmente.

Revisa la nota antes de enviarla. Las marcas visuales identifican el objetivo y el texto dictado describe el resultado esperado. Utiliza instrucciones claras, especialmente cuando varios cambios afectan al mismo componente.

¿Cuándo conviene activar Batch edits?

Activa Batch edits cuando quieras reunir varios cambios visuales relacionados antes de pedir al agente que los implemente. Déjalo desactivado cuando quieras enviar notas de elementos o zonas inmediatamente y revisar el resultado antes de decidir el siguiente cambio.

El interruptor está desactivado de forma predeterminada. Cambia cómo se envían las notas de elementos y zonas, pero las ediciones de texto siempre esperan a Send.

Comportamiento	Batch edits desactivado	Batch edits activado
Notas de elementos o zonas	Se envían individualmente	Se acumulan como marcadores numerados
Envío de notas de elementos o zonas	Pulsa Return o Enter en una nota para enviarla inmediatamente	Haz clic en Send en la barra para enviar todas las notas pendientes
Agrupación de mensajes	Cada nota se envía por separado	Todas las notas pendientes se envían en un solo mensaje
Ediciones de texto en línea	Esperan a Send	También esperan a Send
Revisión de notas pendientes	Consulta las ediciones de texto pendientes en la lista Send, cuando esté disponible	Revisa las notas acumuladas en la lista junto a Send
Eliminación de notas pendientes	Usa Clear All para las notas pendientes; las notas ya enviadas no se pueden borrar de la cola	Usa Clear All para eliminar las notas pendientes

Es importante distinguir entre las notas de envío inmediato y las ediciones de texto pendientes. Con Batch edits desactivado, puedes enviar una nota de elemento o zona pulsando Return o Enter. Una edición de texto permanece pendiente hasta que la envíes. Si tienes ediciones de texto pendientes, revísalas en la lista Send o elimínalas con Clear All.

Cuando Batch edits está activado, la barra sustituye Annotate por un botón Send que muestra el número de notas pendientes. Puedes revisar los marcadores numerados antes de enviarlos. El envío de todas las notas pendientes también cierra Design Mode.

Si sales del modo con notas pendientes, el botón Send permanece en la barra hasta que las envíes o las elimines.

Ejemplo práctico: rediseñar una página de precios

Supongamos que quieres corregir tres problemas en una página de precios:

1. El encabezado principal ocupa demasiado espacio vertical.
2. El botón principal de llamada a la acción no está alineado con el precio.
3. La tabla comparativa resulta demasiado estrecha en pantallas pequeñas.

Activa Batch edits y crea una nota para cada problema.

Para el encabezado, selecciona el texto y pide reducir su tamaño sin perder la jerarquía visual. Para el botón, selecciónalo junto con el precio para mostrar la relación de alineación. Para la tabla comparativa, marca la zona correspondiente y describe el comportamiento adaptable que necesitas.

Antes de enviar, revisa los marcadores numerados. Comprueba que cada nota se refiere al elemento o zona correctos. Después, envía todas las notas en un solo mensaje.

Este método funciona mejor cuando los cambios forman parte de una misma tarea. El agente puede ver todas las notas juntas y considerar sus relaciones. Sin embargo, agruparlas no garantiza que el modelo implemente correctamente todas las instrucciones.

Si un cambio depende de un resultado intermedio importante, envía primero una nota por separado. Comprueba la página actualizada y decide qué hacer después. Por ejemplo, modifica primero la distribución general de la página. Después, pide al agente que ajuste el espaciado entre los componentes individuales.

También puedes utilizar Cmd/Ctrl + L dentro de una nota o una edición de texto para enviar su contenido al campo de chat, en lugar de enviarlo inmediatamente o mantenerlo pendiente para Send. Mantén pulsado Option/Alt y haz clic en un elemento para añadirlo directamente al campo de chat. Si ya tienes una nota abierta, el mismo atajo añade el elemento a esa nota.

¿Qué contexto recibe realmente el agente?

Cada nota enviada incluye tu instrucción, información estructurada del elemento y una captura recortada. En aplicaciones compatibles con React, Vue y Svelte, los detalles también incluyen información de componentes que ayuda al agente a localizar el código fuente correspondiente.

Cursor documenta el siguiente contexto para cada elemento seleccionado:

Contexto	Información que proporciona Cursor	Para qué sirve
Etiqueta HTML	El nombre de la etiqueta del elemento	Identifica el tipo de elemento
Atributos	El id, las clases y los atributos del elemento	Ayuda a distinguir el objetivo
Ruta del selector	Una ruta con formato de selector CSS	Ayuda a localizar el elemento en la página renderizada
Texto visible	Los primeros 200 caracteres del texto visible	Relaciona la selección con su contenido
Geometría	El tamaño y la posición del elemento	Describe su ubicación y dimensiones
Estilos calculados	Color, color de fondo, tamaño de fuente, familia tipográfica, display y position	Proporciona información sobre su estilo renderizado
Contexto del componente	Nombre y pila de componentes en aplicaciones React, Vue y Svelte	Ayuda a relacionar el elemento renderizado con el código fuente
Captura de pantalla	Un recorte del elemento seleccionado o de la zona marcada con el dibujo	Muestra el contexto visual del cambio solicitado

Esto proporciona más información que una instrucción genérica como «mejora el encabezado». El agente recibe un objetivo, propiedades renderizadas, contenido visible y evidencia visual.

Sin embargo, sigue siendo una captura limitada del estado de la página. La documentación no promete un volcado completo del DOM, toda la hoja de estilos, los estilos calculados de cada elemento superior, el estado completo de la aplicación ni una captura de toda la página. La pila de componentes está disponible para los frameworks indicados, pero no garantiza que el agente identifique el archivo fuente correcto en todos los proyectos.

Por ejemplo, al seleccionar un botón, el agente recibe su tipo, clases, dimensiones, texto y estilos calculados. La captura muestra su posición junto al precio. En una aplicación React, la información del componente puede ayudar a seguir el botón renderizado hasta su pila de componentes.

El mismo tipo de contexto de componentes está documentado para Vue y Svelte. Cursor también incluye el nombre del componente y su pila en estas aplicaciones. La documentación no garantiza resultados idénticos al localizar el código fuente en distintos frameworks o proyectos.

El agente todavía debe inspeccionar el repositorio, comprender la implementación y decidir cómo realizar el cambio. Revisa el diff del código y la página en ejecución cuando termine.

Cursor no publica una fórmula de coste en tokens para las capturas y los metadatos de Annotate. No supongas que cada nota tiene un coste fijo ni que agrupar notas reduce necesariamente el uso total del modelo. Batch edits cambia cómo se envían las notas. El coste real depende del flujo de trabajo del agente y del uso del modelo.

¿Cómo verificar los cambios del agente?

Utiliza Annotate para describir la solicitud con precisión y después comprueba la implementación en el proyecto y en la página renderizada.

Después de enviar las notas:

1. Espera a que el agente termine los cambios correspondientes.
2. Inspecciona el diff para detectar modificaciones ajenas a la tarea, selectores incorrectos y cambios que incumplan las convenciones del proyecto.
3. Comprueba la página en ejecución después de la recarga en caliente, si tu servidor de desarrollo la admite.
4. Vuelve a revisar el diseño en los tamaños de pantalla importantes para tu aplicación.
5. Comprueba las interacciones y la accesibilidad cuando corresponda, incluidos el foco del teclado y la legibilidad del texto.

El anuncio de Cursor del 28 de octubre de 2026 indica que Annotate ayuda a revisar diseños en diferentes tamaños de pantalla. La documentación pública de Design Mode proporcionada no describe un mecanismo automático para revisar el diseño adaptable. Por tanto, comprueba los distintos tamaños de pantalla por separado, salvo que tu versión instalada ofrezca un método documentado para automatizarlo.

Para trabajos de interfaz más amplios, Inspo MCP permite incorporar referencias de diseño y capturas a los flujos de trabajo con agentes de programación. Resuelve un problema diferente: Annotate señala qué cambiar en una interfaz en ejecución, mientras que las referencias de diseño ayudan a explicar la dirección visual deseada.

Si estás eligiendo un flujo de desarrollo más amplio, consulta la comparación entre Cursor y Codex en 2026. Analiza sus flujos de desarrollo, precios, límites y uso bajo demanda.