Cosa sono gli artefatti di Claude? Un'introduzione pratica
8 min di lettura
Oggi, quando Claude ti dà un componente React, un grafico o un piccolo strumento come blocco di codice, probabilmente lo copi nel tuo editor solo per vedere se funziona. Quel passaggio in più è ciò che gli artefatti eliminano.
Consiglio
Un artefatto non è un blocco di codice più elaborato. È una versione in esecuzione di ciò che Claude ha appena descritto, resa nel proprio pannello, che puoi guardare, cliccare e iterare senza lasciare la conversazione.
Cos'è davvero un artefatto
Quando Claude genera qualcosa di sostanzioso e autonomo, una pagina web, un diagramma, una piccola app React, una visualizzazione di dati, può aprire quel contenuto in un pannello separato accanto alla chat invece di lasciarlo in linea come testo. Quel pannello esegue il codice in un ambiente isolato: il tuo browser lo esegue, ma non può raggiungere il tuo file system, le tue altre schede né nulla al di fuori dell'isolamento senza una tua azione esplicita.
Questo conta per come dovresti pensare agli artefatti. Non sono un'anteprima di ciò che pubblicheresti. Sono un modo rapido per verificare un'idea prima di decidere se valga la pena pubblicarla, e non serve un background da sviluppatore per trarne valore: descrivere il risultato che vuoi basta per molti usi comuni.
Cosa puoi costruire con gli artefatti
Qualsiasi cosa abbastanza autonoma da girare o essere resa da sola. Le categorie comuni, con un prompt che attiverebbe ciascuna:
| Tipo | Adatto a | Esempio di prompt |
|---|---|---|
| Strumento interattivo | Calcolatrici, convertitori, stime guidate da moduli | “Crea un calcolatore di mutuo con cursori per tasso, durata e anticipo.” |
| Pagina web | Landing page, pagine singole, modelli di e-mail | “Fai un sito di una pagina per una panetteria locale con orari, menu e link alla mappa.” |
| Visualizzazione di dati | Grafici da dati che incolli | “Rappresenta questi ricavi trimestrali come barre raggruppate con una linea di tendenza.” |
| Diagramma | Diagrammi di flusso, organigrammi, architettura semplice | “Disegna un diagramma di flusso del nostro processo di resi, dalla richiesta al rimborso.” |
| Documento | Rapporti formattati, brief strutturati | “Trasforma questi appunti in un brief di progetto di una pagina formattato con titoli.” |
| Gioco o demo semplice | Supporti didattici, spiegazioni interattive | “Fai un piccolo test di velocità di digitazione che mostri le parole al minuto.” |
Quando un artefatto batte una normale risposta in chat
Non tutto ciò che Claude costruisce ha bisogno di un pannello proprio. Un artefatto è la scelta giusta quando:
Prevedi di guardare e cliccare il risultato, non solo leggerlo, il mockup di una dashboard, un gioco funzionante, un grafico dei tuoi dati
Stai iterando sullo stesso risultato visivo o interattivo nell'arco di più turni e vuoi che Claude aggiorni una cosa sul posto invece di un nuovo blocco di codice ogni volta
Qualcun altro deve vederlo funzionare, non solo sentirsi dire cosa farebbe
Se invece ti serve solo leggere e capire del codice, o l'output è una risposta una tantum che non rivedrai, una risposta normale è più semplice. Non c'è un pannello in più da gestire per qualcosa che non guarderai due volte.
| Vuoi | Usa |
|---|---|
| Vedere qualcosa girare e cliccarlo | Artefatto |
| Leggere, capire o copiare del codice una volta | Risposta normale |
| Modificare file reali in un progetto vero | Claude Code |
| Iterare su un risultato visivo in molti turni | Artefatto |
Un esempio rapido
Chiedere un piccolo strumento interattivo basta ad attivarne uno. Ecco un prompt di partenza realistico:
Costruisci uno strumento interattivo semplice come artefatto: un modulo con tre campi numerici (ore lavorate, tariffa oraria, percentuale di imposta) che calcoli e mostri la paga netta dal vivo mentre scrivo. Usa React puro, nessuna libreria esterna, e mantieni lo stile minimale.
”Claude lo rende come un componente funzionante in cui puoi davvero scrivere, non come una descrizione di esso. Se la prima versione è vicina ma non giusta, per esempio, il calcolo dell'imposta è sbagliato o vuoi un simbolo di valuta, dillo in linguaggio semplice. Claude aggiorna lo stesso artefatto invece di iniziarne uno nuovo, il che tiene la cronologia delle iterazioni in un unico posto invece che sparsa su più blocchi di codice.
Chiamare l'API di Claude dall'interno di un artefatto
Una capacità più recente da conoscere anche se non la stai ancora costruendo: gli artefatti possono ora chiamare direttamente l'API di Claude stessa, senza che tu fornisca una chiave API né paghi a chiamata. Questo trasforma un artefatto da demo statica in qualcosa che può sostenere una propria conversazione, concatenare più richieste o guidare un piccolo flusso agentico, interamente dentro l'isolamento.
È un caso d'uso sensibilmente diverso da “mostrami un grafico” e merita una propria guida più approfondita. Per ora, la lezione pratica è: se stai prototipando qualcosa che deve ragionare in più passaggi, non solo rendere un risultato fisso, chiedilo esplicitamente. Claude non ricorrerà alla chiamata all'API a meno che il compito non ne abbia davvero bisogno.
Dentro Claude Tutorial
Gli artefatti sono una competenza di Claude tra molte
L'app passa in rassegna tecniche riutilizzabili come questa, schemi che valgono sia per prototipare uno strumento sia per ottenere una risposta migliore in una chat normale.
Il compromesso sulla privacy di cui nessuno parla
Gli artefatti possono essere condivisi pubblicamente con un link, e artefatti condivisi sono stati trovati indicizzati dai motori di ricerca. Se costruisci qualcosa con dati reali, anche dati che consideri a basso rischio, un link condiviso è più vicino a pubblicare una pagina web che a inviare un file privato.
Attenzione
Prima di condividere un artefatto pubblicamente, rileggilo come se uno sconosciuto senza alcun contesto lo trovasse con una ricerca su Google, perché è una possibilità reale, non ipotetica.
L'impostazione sicura: tieni gli artefatti privati a meno che tu non abbia controllato specificamente cosa contengono. Se devi passarne uno a un collega, è un tipo di condivisione diverso e più ristretto di un link pubblico, e vale la pena trattare quella distinzione deliberatamente invece di ripiegare su “facciamone solo un link”.
Errori comuni
- Formulare una piccola correzione come una costruzione del tutto nuova. Chiedere tutto di nuovo da zero perde ciò che già funzionava. Di' cosa deve cambiare in modo specifico, “tieni tutto, correggi solo il calcolo dell'imposta”, invece di ripetere l'intera richiesta originale.
- Aspettarsi che un modulo venga inviato dentro l'isolamento. È voluto, non un bug: l'isolamento blocca la navigazione reale e gli invii di moduli esterni. Gestisci l'invio in JavaScript, aggiornando lo stato o mostrando direttamente un risultato.
- Dare per scontato che un artefatto che non si carica sia rotto. Di solito significa una libreria mancante o un errore di esecuzione. Di' a Claude cosa vedi (“pannello vuoto” o il testo dell'errore) e correggerà il codice sul posto.
- Condividerne uno costruito con dati reali senza rileggerlo. Trattato sopra e da ripetere: un link pubblico è più vicino a pubblicare una pagina che a inviare un file.
Domande frequenti
Cosa sono gli artefatti di Claude?
Un pannello dedicato accanto alla chat che esegue o rende qualcosa che Claude ha costruito, una piccola app, un grafico, un diagramma, un documento, così puoi guardarlo e iterarci sopra senza copiare codice nel tuo editor.
Cosa si può costruire con gli artefatti di Claude?
Strumenti interattivi, singole pagine web, visualizzazioni di dati, diagrammi, documenti formattati e giochi o demo semplici. Qualsiasi cosa abbastanza autonoma da girare da sola in un ambiente browser isolato.
Gli artefatti di Claude sono privati per impostazione predefinita?
Sì. Un artefatto è visibile solo a te finché non crei un link di condivisione. Artefatti condivisi sono stati trovati indicizzati dai motori di ricerca, quindi tratta un link pubblico come una pubblicazione.
Altre persone possono modificare il mio artefatto di Claude?
Chi ha un link di condivisione può visualizzarlo e, in un contesto condiviso, lavorare da una copia. L'originale resta tuo. Per una vera collaborazione, passa la conversazione invece del solo link.
Quali linguaggi di programmazione supportano gli artefatti?
Principalmente tecnologie web: HTML, CSS e JavaScript, incluso React. Copre la maggior parte degli strumenti interattivi e delle visualizzazioni. Non è un runtime generale per linguaggi di backend.
Gli artefatti di Claude scadono?
Persistono con la conversazione in cui sono stati creati. Se vuoi che uno duri indipendentemente da quella chat, salva il codice o tienilo in un posto che controlli.
Continua a leggere
- Ottenere contenuti su cui iterare invece di una semplice risposta in chat per riconoscere quando un output appartiene a uno spazio modificabile a sé.
- Fare una modifica su più file con Claude Code per quando hai superato un ambiente isolato e devi modificare file reali in un progetto.
- Trasformare la prima risposta di Claude in quella che ti serve per la stessa mentalità di iterazione che questa guida usa per rifinire un artefatto, applicata a qualsiasi output di Claude.
- Scegliere tra una nuova chat, un progetto o riprendere da dove avevi lasciato dato che dove costruisci un artefatto influisce su quanto sia facile ritrovarlo e riutilizzarlo dopo.