Community
Cursor Annotate, i prompt visivi per gli agenti
- Cursor aggiorna il Design Mode con Annotate: nel browser dell'Agents Window indichi sulla tua app in esecuzione cosa cambiare (un elemento, un'area o un testo) e l'agente modifica il codice mentre tu passi alla nota successiva.
- Si apre col pulsante Annotate nella barra del browser o con Cmd/Ctrl + Shift + D. Serve Cursor 3.24.18 o successivo: nelle versioni precedenti al suo posto c'è l'icona a penna "Design Mode".
- Un clic su un elemento apre una nota, Shift + clic ne aggiunge altri alla stessa (utile per chiedere "rendi questo uguale a quello"), le frecce su e giù spostano la selezione sul contenitore o su un elemento interno.
- Trascinando si riquadra un'area e ci si disegna sopra con 4 strumenti: tratto libero, ellisse, rettangolo e freccia.
- Doppio clic su un testo per riscriverlo direttamente sulla pagina; su un singolo elemento si apre un ispettore CSS per cambiarne i valori, e le note si possono anche dettare a voce.
- Con Batch edits acceso le note restano sulla pagina come segnaposto numerati e partono tutte insieme, in un solo messaggio, col pulsante Send.
- Per ogni elemento l'agente riceve tag, id, classi, attributi, selettore, i primi 200 caratteri di testo, misure, posizione e 6 stili calcolati; in React, Vue e Svelte anche il nome del componente e la sua gerarchia. In più arriva uno screenshot ritagliato sull'elemento o sull'area disegnata.
- Nel video di lancio si vede anche l'anteprima con le misure di dispositivi diversi, per controllare il design su più dimensioni di schermo.
- Per lavorare così Cursor consiglia un modello veloce e forte sulle interfacce come Composer 2.5.
