Immagina di lavorare con gli agenti AI come lavori con un collega. Non solo scrivendo, ma facendogli vedere e sentire quello che vedi tu, esattamente come quando registri un Loom per evitare l'ennesima call.
C'è un problema, però. Quando vuoi costruire qualcosa da zero (una pagina, un prototipo, la replica di un sito che ti piace) la parte lenta non è realizzarla. È spiegare all'agente cosa hai in testa: paragrafi su paragrafi per descrivere un'interfaccia che potresti mostrare in dieci secondi.
E si può risolvere. A costo zero sulla registrazione, usando una versione open source di Loom pensata apposta per gli agenti: Clips.
Il problema: gli agenti leggono, ma non guardano
Oggi lavoriamo con agenti potentissimi: Claude Opus 4.8, GPT-5.5 e simili. Ma il modo in cui li imbocchiamo è quasi sempre solo testuale. La parte visiva (gli screenshot, le schermate, il "guarda qui") quasi sempre dobbiamo fornirla noi, a mano, un'immagine alla volta.
Loom sarebbe lo strumento principe: registri schermo, audio e webcam in un colpo solo. Ma il punto è un altro: un video Loom non è pensato per essere "letto" da un agente multimodale. Niente che gli permetta di capire i fotogrammi, non solo la trascrizione.
Per "agente multimodale" intendo un modello che ragiona insieme su testo e immagini. Un video, in fondo, è una sequenza di immagini più una traccia audio: se gliela dai nel formato giusto, l'agente la guarda davvero.
Una precisazione che conta: questi flussi girano bene su agenti come Claude Code o Codex, quelli con più potere d'azione: toccano file, eseguono comandi, costruiscono cose. In questa guida useremo Claude Design, di cui è uscito da poco l'aggiornamento che lo porta a un altro livello.
Cosa otteniamo in 45 secondi
In questa guida vediamo, in 2 modi, quanto è facile replicare un linktree (la classica pagina-bio con tutti i tuoi link in fila) partendo da un video stile Loom di soli 45 secondi, e arrivare a una pagina pronta come quella qui sotto, senza aver toccato una riga di codice.
- Un account Clips gratuito e uno spazio di archiviazione: basta il free tier di Builder.io (storage video e crediti AI inclusi).
- Un browser basato su Chromium — Google Chrome, Arc, Brave o Edge (non Firefox né Safari) — per l'estensione ufficiale Agent-Native Clips. Nessun ambiente di sviluppo, nessuna riga di codice.
- Un piano Claude a pagamento (Pro, Max, Team o Enterprise): Claude Design è incluso lì, in research preview.
Clips: il Loom open source per gli agenti
Clips è un'alternativa a Loom 100% gratuita e open source, costruita da Builder.io. La differenza che cambia tutto: un agente può capire un Clip partendo da un semplice URL. Ogni clip porta con sé metadati, trascrizione e fotogrammi con timestamp. L'agente non legge soltanto cosa hai detto: vede anche cosa hai mostrato.
Clips è open source: se preferisci avere tutto in casa puoi forkarlo e self-hostarlo dal repository ufficiale su GitHub.
Qui sotto il percorso completo, così com'è: dalla registrazione fino al link pronto per l'agente. Lo facciamo tutto dall'estensione Chrome, la via più veloce per registrare direttamente dal browser.
1. Registrati e collega lo spazio di archiviazione
Vai su clips.agent-native.com e registrati, con Google o via email. Alla prima schermata la libreria è vuota: premi "Record your first Clip" per iniziare.
Prima di registrare devi collegare uno spazio dove salvare le clip: lo dice la schermata stessa.
“Clips is 100% free and open source, so you need to hook up a way to store clips. Connect storage with Builder.io for free-tier storage and AI, or use S3-compatible object storage and your own LLM keys.”
Per andare veloci scegliamo lo spazio gratuito di Builder.io: il free tier include già storage video e crediti AI. (In alternativa puoi collegare uno storage S3-compatibile e le tue chiavi, ma è tutta un'altra configurazione.)
Builder.io ti chiede di creare un account: procedi con Google (o GitHub, o email).
Completi un breve onboarding — scegli come vuoi usare Builder (per il nostro caso va bene "Create Prototypes") e prosegui.
Infine autorizzi l'accesso: Clips chiede il permesso di usare il tuo spazio Builder.io per salvarci le registrazioni.
Fatto: vieni rimandato a clips.agent-native.com/record con lo storage collegato e il recorder pronto a partire.
2. Installa e configura l'estensione Chrome
Serve un browser basato su Chromium: Google Chrome, Arc, Brave o Edge. Su Firefox e Safari l'estensione non è disponibile.
Attenzione: non andare diretto allo store. Dentro Clips, alla scelta del recorder, clicca "Chrome extension": è quel link che apre la pagina giusta del Chrome Web Store.
Si apre il Chrome Web Store: aggiungi l'estensione ufficiale "Agent-Native Clips" a Chrome.
Fai il pin dell'estensione così l'icona resta sempre a portata nella barra di Chrome.
Ora torni su Clips: clicca il logo dell'estensione e fai "Sign in to Clips". Clips conferma l'accesso — sei già loggato da quando ti sei registrato — e poi torni all'estensione.
La prima volta concedi i permessi di microfono e camera. È un consenso una tantum: Chrome ti chiederà comunque cosa condividere a ogni registrazione.
3. La registrazione (qui si gioca tutto)
Apri l'estensione e parti. Ma attenzione, è qui che fai la differenza. Un video è una sequenza di immagini, e l'agente accede proprio a quelle. Più limiti il contenuto allo stretto necessario, più riduci l'area d'errore dell'agente. Mostra solo le schermate che servono. Niente tour panoramici.
Registra avendo già in testa cosa vuoi che l'agente riproduca. Ogni schermata in più è un'occasione in più per fargli sbagliare bersaglio.
Dall'icona dell'estensione scegli cosa catturare — schermo + camera, solo schermo o solo camera — e controlli sorgente, microfono e camera prima di partire.
Nel mio caso parto subito da ciò che voglio replicare: un linktree trovato sulla loro pagina ufficiale. Poi passo sul sito di AI Pratika, per mostrare lo stile della piattaforma di riferimento. E mentre registro, descrivo il problema a voce, in italiano: l'abbiamo testato e funziona.
Apri il sito da replicare e premi "Start recording" dal popup dell'estensione.
Chrome ti chiede cosa condividere — una scheda, una finestra o l'intero schermo — poi premi Condividi.
Parte la registrazione: vedi l'indicatore REC, il timer e la bolla della camera. Registra i tuoi 45 secondi, poi fermati.
Ecco com'è andata la mia, con la spiegazione a voce di quello che voglio ottenere.
4. La generazione del link
Finita la registrazione, aspetti qualche minuto che il video venga processato: Clips sta generando trascrizione e fotogrammi, quelli che poi l'agente andrà a leggere.
A quel punto hai due possibilità di condivisione. La prima è il classico link per una persona. Ma quella che ci interessa è la seconda: il link da condividere con un agente.
Quel secondo link è il cuore di tutto. Contiene il contesto per l'agente: i metadati del video, il collegamento alla trascrizione e ai fotogrammi. È esattamente quello che mancava a Loom.
Da video a pagina con Claude Design
Claude Design è lo strumento di Anthropic Labs per creare design, prototipi e pagine collaborando con Claude. Con l'ultimo aggiornamento ha imparato a rispettare il tuo design system invece di sfornare il solito mockup generico.
Il gesto pratico, perché è qui che molti si bloccano: apri claude.ai/design, crei un nuovo progetto e nella chat incolli il prompt insieme al link "per agente" copiato da Clips. Tutto qui. Nessun file da caricare: Claude apre il link da solo, legge la trascrizione e guarda i fotogrammi.
Da qui ho provato due strade, e i risultati cambiano a vista d'occhio.
Strada A: senza design system
Parto pulito: do a Claude Design il link "per agente" del Clip e gli chiedo di replicare il linktree nello stile mostrato nel video. Nessun design system a monte.
Leggi e riproduci quello che viene detto nel transcript, qui trovi le immagini
(i frame) e il transcript https://clips.agent-native.com/api/agent-context.json?id=gu8pAvt2knDU.
Il risultato lo scarichi direttamente (o lo esporti, per esempio in PDF, o lo colleghi a una piattaforma come Vercel per metterlo online). È buono, sorprendente per lo sforzo. Ma, onestamente, senza un design system l'agente "interpreta" lo stile: coglie il senso, non i dettagli fini.
Strada B: con design system
Un design system è l'insieme di colori, font, spaziature e componenti del tuo brand: le regole con cui le cose devono apparire. Claude Design può importarlo da un file, un repository o gli asset che gli fornisci, così parti dal tuo brand invece che da zero.
Leggi e riproduci quello che viene detto nel transcript, qui trovi le immagini
(i frame) e il transcript https://clips.agent-native.com/api/agent-context.json?id=gu8pAvt2knDU. Il Design system di AI Pratika lo hai giàStesso video, stesso link, ma ora Claude Design ha componenti approvati su cui costruire, e prima di mostrarti il risultato lo confronta con il design system.
La differenza si vede senza bisogno di spiegarla. Il design system non è un vezzo da nerd: è la differenza tra "carino" e "pubblicabile".
Saltare il design system è la scorciatoia che si paga dopo. Senza, l'agente indovina lo stile e tu passi mezz'ora a sistemare a mano quello che un design system gli avrebbe dato già pronto.
I limiti, detti chiari
Non ti sto vendendo magia. L'AI è bravissima a eseguire. Tu devi restare bravo a decidere.
Non registrare schermate con dati sensibili, credenziali o informazioni riservate. Tutto ciò che finisce nel Clip finisce, trascritto e per fotogrammi, nel link che passi all'agente.
Il workflow, pronto da replicare
Ecco il metodo, in 6 mosse.
- 1
Registrati su Clips, collega lo storage (basta il free tier di Builder.io), poi installa l'estensione Chrome ufficiale: pin, sign in e permessi di microfono e camera.
- 2
Pianifica la registrazione: tieni a mente l'obiettivo, mostra solo le schermate necessarie.
- 3
Registra max 45-60 secondi: il riferimento da replicare + lo stile target, descrivendo il problema a voce.
- 4
Genera il link "per agente" (non quello per la persona).
- 5
Aprilo in Claude Design: nuovo progetto, incolla prompt + link nella chat. Meglio ancora con un design system già impostato.
- 6
Scarica o pubblica (export, oppure collega a una piattaforma come Vercel), poi verifica e rifinisci: l'occhio umano resta l'ultimo controllo.
E il prompt da incollare in Claude Design, pronto all'uso:
Ecco un video registrato con Clips: [INCOLLA QUI IL LINK PER AGENTE].
Nel video mostro un linktree di riferimento e lo stile della piattaforma
[DESCRIZIONE DELLO STILE DELLA TUA PIATTAFORMA O SITO]. Replica quel linktree
usando il design system che ti ho fornito. Mantieni colori, tipografia e
spaziature del design system. Non aggiungere sezioni che non vedi nel video.
Mostrami il risultato pronto da scaricare.Sostituisci le parti tra [parentesi] con i tuoi dati. Clips risolve un problema reale: dare agli agenti gli occhi e le orecchie che gli mancavano. Claude Design trasforma quei 45 secondi in una pagina vera. Il resto — il criterio, lo stile, il "questo sì e questo no" — resta lavoro tuo. Ed è giusto così.
