Agentation

Cos'è Agentation?

Agentation è uno strumento di feedback visivo che ti permette di annotare elementi direttamente in un'interfaccia utente, quindi condividere quel feedback con agenti AI affinché possano identificare il target esatto nel tuo codebase. Il suo scopo principale è trasformare il feedback “indica qui” in istruzioni strutturate e azionabili dalle macchine, su cui gli agenti possono agire.

Funziona particolarmente bene con strumenti di coding AI che possono accedere ai tuoi file di progetto, dove l'output di Agentation può includere selettori, percorsi file e informazioni sulla struttura per aiutare un agente a navigare alle giuste righe e componenti.

Caratteristiche Principali

• Annotazioni visive on-page: Attiva una barra degli strumenti e clicca o seleziona elementi per creare un'annotazione legata a un target specifico sullo schermo.
• Targeting di elementi per agenti: Agentation può produrre un percorso elemento, selettori CSS e dettagli sulla posizione del file, così l'agente non deve indovinare quale elemento UI intendevi.
• Contesto codebase per fix migliori: Quando l'agente ha accesso al codebase (ad es., tramite tool come Claude Code o Cursor), l'agente può usare selettori per grep, percorsi file sorgente per saltare alla riga giusta, un albero di componenti React per capire la gerarchia e stili computati per inferire l'aspetto attuale dell'elemento.
• Output markdown formattato: Dopo aver aggiunto feedback, gli utenti possono cliccare per copiare markdown formattato e incollarlo nell'input di un agente.
• Supporto integrazione MCP: Con MCP, puoi saltare il copia-incolla perché il tuo agente vede già il contesto dell'annotazione; gli agenti possono essere istruiti con prompt come “rispondi al mio feedback” o “fixa annotazione 3”.
• Controlli lifecycle annotazioni: Gli agenti possono interrogare feedback esistenti (ad es., elenca tutte le annotazioni tra le pagine) e rispondere ad azioni come eliminare o risolvere item (ad es., “cancella tutte le annotazioni”).

Come Usare Agentation

1. Attiva la barra degli strumenti per annotazioni: La barra è disponibile nell'interfaccia Agentation (il contenuto della pagina nota che la barra è attiva nella demo page).
2. Passa il mouse per identificare elementi: Passa il mouse sugli elementi per vedere i loro nomi evidenziati.
3. Crea un'annotazione: Clicca su un elemento target o seleziona testo (ad esempio, sugli elementi demo forniti) per creare una nuova annotazione, poi inserisci il tuo feedback.
4. Invia e condividi feedback: Aggiungi l'annotazione e clicca per copiare l'output markdown formattato da incollare nel tuo agente.
5. Opzionalmente usa MCP: Se il tuo agente è connesso via MCP, puoi evitare il copia-incolla manuale e chiedere all'agente di affrontare o fixare annotazioni specifiche.

Casi d'Uso

• Report bug per un elemento UI specifico: Quando vedi uno stato bottone “sbagliato” o styling, passa il mouse per identificare l'elemento, annotalo con ciò che ti aspettavi vs. ciò che vedi, e condividi selettori/info percorso così l'agente può localizzare il codice rilevante.
• Feedback su tipografia e spaziatura: Per issue come padding e sizing, puoi annotare l'area esatta del componente e chiedere all'agente di decidere tra alternative (ad es., “24px o 16px”) come parte della risoluzione del feedback.
• Correzione testo/contenuti: Se un'etichetta o copy ha un refuso, seleziona il testo esatto e aggiungi feedback conciso (ad es., “Testo bottone poco chiaro” o “contenuto dovrebbe leggere X”) così l'agente può targettare la stringa UI specifica.
• Feedback specifico per frame animazione: Pausa un'animazione (via barra strumenti) al frame che ti interessa, annota quello stato visivo specifico e fornisci feedback legato al contesto pausato.
• Coordinamento feedback team o multi-pagina: Fai elencare agli agenti tutte le annotazioni visibili tra le pagine, risolvile una per una e cancella tutto quando la review è completa.

FAQ

Come aiuta Agentation un agente a trovare la parte giusta della mia app?
L'output di Agentation può includere selettori CSS, percorsi di file sorgente, gerarchia dei componenti React e stili computati, così un agente può fare grep, navigare alla riga corretta e capire dove e come si inserisce l'elemento.

Devo copiare e incollare il feedback nell'agente?
Non sempre. La pagina nota che con l'integrazione MCP puoi saltare il copia-incolla perché l'agente vede già il contesto dell'annotazione.

Che tipo di feedback dovrei scrivere nelle annotazioni?
La pagina raccomanda di essere specifici (es. descrivi chiaramente il problema), trattare un problema per annotazione e includere contesto su ciò che ti aspettavi rispetto a ciò che vedi.

Gli agenti possono fare domande o rispondere alle annotazioni?
Sì. Con l'integrazione MCP e uno Schema di Formato Annotazione, la pagina descrive interazioni degli agenti come elencare annotazioni, richiedere chiarimenti, risolvere con un riassunto e archiviare annotazioni.

Qual è il modello di licenza di Agentation?
Agentation è gratuito per individui e aziende per uso interno. Per ridistribuire Agentation come parte di un prodotto che vendi, la pagina consiglia di contattarli per una licenza commerciale.

Alternative

• Strumenti interattivi per screenshot/markup UI (con workflow di revisione umana): Gli strumenti che catturano e markup UI per review possono supportare la condivisione di feedback, ma tipicamente non generano selettori strutturati/percorsi file per agenti code-aware.
• Template di issue basati su testo in un tracker (es. ticket di bug): I tracker di bug aiutano a documentare comportamento atteso vs. attuale, ma si basano su descrizioni anziché puntare gli agenti a un percorso specifico di un elemento UI nel codebase.
• Strumenti di navigazione codice per agenti senza annotazione visiva: Gli assistenti di coding che capiscono il tuo repository possono agire sul feedback, ma senza un layer di annotazione dovrai solitamente descrivere il target in modo più indiretto (es. nominando manualmente i componenti).