Fagli vedere lo schermo

Cos'è e perché conta

Claude Code scrive il codice, ma da solo non vede quello che vedi tu. Se non ha un modo per guardare la pagina, il bottone storto o il form che non invia per lui non esistono. E alla fine li scopri tu, dopo che ti ha scritto «fatto».

Questa guida risolve il problema nei due sensi. Tu fai vedere lo schermo a Claude, con uno screenshot. E Claude guarda lo schermo da solo, con un browser che può usare: apre la pagina, clicca, compila, guarda il risultato.

Conta perché un difetto visivo spiegato a parole è lento e impreciso. «Il bottone è un po' più in basso» può voler dire dieci cose diverse, un'immagine no. E quando è Claude a rifare il percorso, gli errori più banali li trova e li sistema prima che arrivino a te.

La regola generale, niente «fatto» senza prova, l'ho già spiegata in un'altra guida. Qui mi concentro sulla parte visiva: come Claude vede la pagina e come ti fa vedere che funziona.

1. La frase da dare a Claude

Questa è la frase che uso. La incollo dopo aver chiesto una modifica, oppure la metto una volta per tutte nel CLAUDE.md. Copiala così:

Dopo ogni modifica apri la pagina nel browser e rifai tu il percorso come un utente vero: clicca, compila, invia. Fai uno screenshot prima e uno dopo. Poi dimmi cosa hai visto, passo per passo. Non scrivere "fatto" finché non l'hai visto funzionare: allegami gli screenshot come prova. Se qualcosa non torna, sistemalo e ricontrolla.

Ogni pezzo ha un motivo:

• «Rifai tu il percorso come un utente vero»: non basta aprire la pagina. Deve fare quello che farebbe una persona, nello stesso ordine.
• «Uno screenshot prima e uno dopo»: il confronto mostra cosa è cambiato davvero, non solo che la pagina si carica.
• «Dimmi cosa hai visto, passo per passo»: se un passaggio manca dal racconto, probabilmente non l'ha fatto.
• «Se qualcosa non torna, sistemalo e ricontrolla»: così il giro di correzione lo fa lui, non tu.

La frase funziona solo se Claude ha un browser da usare. Senza, non può aprire niente: nella sezione 3 vedi come darglielo. E se non riesce ad aprire la pagina, deve dirtelo, non scrivere «fatto» lo stesso.

Mettila nel CLAUDE.md

Il CLAUDE.md è il file di istruzioni del progetto. Sta nella cartella principale, come CLAUDE.md oppure .claude/CLAUDE.md, e Claude Code lo legge all'inizio di ogni sessione. Se ci metti la frase, non devi ripeterla ogni volta. Puoi farla aggiungere a Claude stesso:

Aggiungi al CLAUDE.md questa regola per ogni modifica all'interfaccia: [incolla qui la frase]

Poi apri una sessione nuova: il file viene caricato all'avvio. Per controllare che l'abbia preso, scrivi /context e guarda sotto Memory files.

2. Fagli vedere tu lo schermo

A volte il problema lo vedi tu prima di lui. Invece di descriverlo, mandagli l'immagine. In Claude Code hai quattro modi:

1. Nel terminale: copia l'immagine e incollala con Ctrl+V. Sul Mac è Ctrl anche nel Terminale, non Cmd (in iTerm2 va bene anche Cmd+V). Su Windows è Alt+V. Nel messaggio compare [Image #1].
2. Oppure trascina il file dell'immagine dentro la finestra di Claude Code.
3. Oppure scrivi il percorso del file nel messaggio, come nel prompt qui sotto.
4. Nell'app desktop: tasto + accanto al campo del messaggio per allegare il file, oppure trascina l'immagine nel campo.

guarda questo screenshot: /percorso/immagine.png

Poi basta una riga. [Image #1] dice a Claude di quale immagine parli, utile quando ne incolli più di una nella stessa conversazione.

[Image #1] questo bottone è storto, sistemalo

Per fare lo screenshot di una parte dello schermo: sul Mac Cmd+Ctrl+Shift+4 lo copia direttamente negli appunti, su Windows Win+Shift+S. Così è già pronto da incollare.

3. Dai a Claude un browser

Perché Claude rifaccia il percorso da solo deve poter aprire la pagina. Le strade sono due, a seconda di dove lo usi.

L'app desktop: il browser integrato

Nell'app desktop di Claude, nella scheda Code, c'è un pannello Browser. Lo apri dal tasto Browser nella barra in alto della sessione, oppure con Cmd+Shift+B sul Mac (Ctrl+Shift+B su Windows). Claude avvia il tuo sito in locale, lo apre lì, clicca, compila i form, fa gli screenshot e corregge quello che trova. E tu lo guardi mentre lo fa.

C'è anche un'opzione, Auto-verify changes, che è attiva di default: dopo aver modificato i file Claude controlla da solo con screenshot ed errori prima di chiudere la risposta. La frase della sezione 1 serve lo stesso: chiede il percorso completo dell'utente e il racconto di cosa ha visto.

Il terminale: Claude in Chrome

Se usi Claude Code nel terminale, la strada è Claude in Chrome: un'estensione per Chrome o Edge, che funziona anche con altri browser basati su Chromium. Installi l'estensione dal Chrome Web Store, poi avvii Claude Code così:

claude --chrome

Dentro la sessione, /chrome ti mostra se il collegamento funziona e ti permette di scegliere Enabled by default, così le prossime sessioni partono già collegate. Io lo accendo solo quando mi serve, perché con il browser sempre attivo gli strumenti occupano spazio nel contesto. Serve un piano Claude a pagamento (Pro, Max, Team o Enterprise), con l'accesso fatto da /login: con la sola chiave API non si attiva.

Qui Claude usa il tuo browser vero, in una finestra che vedi, anche sulle pagine dove sei già loggato. Se trova una pagina di login o un captcha si ferma e chiede a te. Può anche leggere gli errori nella console, utile quando la pagina sembra a posto ma sotto qualcosa non va.

Gli screenshot come prova

Se vuoi aprire tu gli screenshot che Claude fa nel browser, chiedigli di salvarli su file: ti dice il percorso e li guardi quando vuoi.

Salva gli screenshot di prima e dopo in una cartella del progetto e dimmi i percorsi.

Se fai app per iPhone

Il browser vale per siti e web app. Per un'app iOS, l'app desktop sul Mac ha un pannello iOS Simulator, in beta: Claude compila l'app, la lancia nel simulatore, tocca le schermate e le legge per verificare le sue modifiche. Serve Xcode installato, e funziona solo con dispositivi simulati, non con un iPhone vero.

Gli errori più comuni

• Descrivere a parole un difetto visivo. Incolla lo screenshot e aggiungi una riga: è più veloce e non lascia dubbi.
• Dare la frase a Claude senza dargli un browser. Apri il pannello Browser nell'app desktop o avvia Claude Code con claude --chrome, altrimenti non ha niente da guardare.
• Accettare «ho controllato» senza immagini. Chiedi gli screenshot di prima e dopo: se non ci sono, il controllo non c'è stato.
• Fermarsi alla prima schermata. Controlla che il racconto di Claude arrivi fino alla fine del percorso, fino all'invio.

Checklist

• La frase è nel CLAUDE.md del progetto
• Dopo averla aggiunta ho aperto una sessione nuova
• Claude ha un browser: pannello Browser o claude --chrome
• So incollare uno screenshot (Ctrl+V, Alt+V su Windows)
• Ogni «fatto» arriva con uno screenshot prima e uno dopo
• Il racconto di Claude copre tutto il percorso

Domande frequenti