Claude di Anthropic ha una funzionalità che la maggior parte degli altri chatbot AI non ha: artifacts. Codice, HTML, componenti React, diagrammi Mermaid e SVG autonomi che vengono renderizzati in linea nella chat come unità a sé stanti.
Se usati bene, gli artifacts trasformano Claude in uno strumento di prototipazione rapida. Se usati male, non sono altro che blocchi di codice glorificati. Ecco la guida completa.
Cosa è realmente un artifact
La documentazione di Anthropic chiama gli artifacts “contenuti sostanziali e autonomi che gli utenti probabilmente modificheranno, su cui itereranno o che porteranno fuori dalla conversazione”. In pratica coprono sei tipi:
- Codice — Python, TypeScript, Rust, Go, ecc. Renderizzato con evidenziazione della sintassi.
- Documenti Markdown — prosa lunga, report, bozze.
- Pagine HTML — landing page in un unico file, dashboard, prototipi.
- Componenti React — componenti renderizzati dal vivo con piena reattività.
- Diagrammi Mermaid — flowchart, diagrammi ER, diagrammi di sequenza. Renderizzati in SVG in linea.
- Immagini SVG — grafica vettoriale generata da prompt.
Claude decide quando fare di qualcosa un artifact in base alla lunghezza e all’autonomia. Puoi influenzare la decisione dicendo “rendi questo un artifact” o “come componente autonomo”.
Perché gli artifacts sono importanti per l’esportazione
L’artifact ha un suo ciclo di vita:
- Viene renderizzato separatamente dalla prosa della conversazione.
- Puoi modificarlo in linea (chiedi a Claude di “iterare sull’artifact”).
- Ha un identificatore stabile tra le modifiche.
Questo rende l’esportazione complicata. Se il tuo strumento di esportazione si limita a scaricare la conversazione come Markdown, l’artifact arriva come (a) blocchi di codice in linea perdendo la forma renderizzata, o (b) completamente assente.
I buoni strumenti di esportazione trattano gli artifacts come cittadini di prima classe.
Come ChatExport AI gestisce gli artifacts
Tre modalità, selezionabili per ogni esportazione:
Modalità 1: In linea (predefinita per PDF, Word)
Il contenuto dell’artifact viene inserito in linea nella trascrizione della conversazione, nella posizione in cui è apparso. Il codice mantiene l’evidenziazione della sintassi. I diagrammi Mermaid vengono renderizzati come SVG incorporati. Le pagine HTML vengono renderizzate come screenshot della pagina visualizzata.
Ideale per: consegnare l’esportazione a qualcuno che vuole solo leggere la conversazione.
Modalità 2: File separati (predefinita per ZIP, Markdown)
L’artifact viene salvato come file autonomo:
- Codice →
chat/<nome-artifact>.py(o .ts, .rs, ecc.) - HTML →
chat/<nome-artifact>.html - React →
chat/<nome-artifact>.jsx - Mermaid →
chat/<nome-artifact>.mmdpiùchat/<nome-artifact>.svg - SVG →
chat/<nome-artifact>.svg
La trascrizione fa riferimento a ciascun artifact tramite un collegamento relativo.
Ideale per: consegnare l’artifact a uno sviluppatore che vuole eseguire/modificare il codice.
Modalità 3: Entrambi
La modalità ZIP include entrambi: la trascrizione in linea per la lettura, gli artifacts come file separati per l’esecuzione.
Ideale per: archiviazione. Tra sei mesi apprezzerai avere entrambe le viste.
Problemi comuni con gli artifacts
Revisioni multiple
Se iteri su un artifact (“ingrandisci il pulsante”), Claude aggiorna l’artifact sul posto. Le revisioni precedenti scompaiono dalla vista della conversazione ma sono recuperabili tramite il pannello della cronologia dell’artifact.
ChatExport AI cattura la versione corrente di ogni artifact al momento dell’esportazione. Se vuoi tutte le revisioni, chiedi a Claude “mostrami v1, v2, v3 dell’artifact” prima di esportare; la cronologia delle revisioni verrà poi esportata come blocchi di codice separati.
Artifact incompleti
Se Claude è a metà del flusso quando premi Esporta, l’artifact parziale viene incluso così com’è. Aspetta che l’indicatore di streaming sia terminato prima di esportare.
Dipendenze degli artifact React
Gli artifact React possono importare da una piccola whitelist (React, Tailwind tramite classnames, icone lucide-react). L’esportazione cattura il sorgente JSX; il consumatore deve configurare le stesse dipendenze se vuole eseguirlo localmente.
Le esportazioni di ChatExport AI includono un README.md all’interno dello ZIP per gli artifact React, che elenca le dipendenze richieste, più un frammento di codice che mostra come impostare un progetto Vite + React che esegue l’artifact.
Diagrammi Mermaid offline
L’esportazione SVG di un diagramma Mermaid è completamente autonoma — si apre in qualsiasi browser, senza bisogno di internet. L’esportazione del sorgente .mmd ti permette di modificare e ri-renderizzare in seguito.
Flusso di lavoro: dal prototipo Claude al codice distribuito
Il flusso che ha funzionato meglio per me:
- Chiedi a Claude di costruire il prototipo come artifact React. Itera in linea 2-3 volte.
- Esporta la conversazione come ZIP. La trascrizione spiega le decisioni di design; i file artifact sono eseguibili.
- Trascina l’artifact in un vero progetto Vite. Aggiungi le dipendenze elencate. Il componente funziona così com’è nel progetto.
- Sostituisci i commenti in stile prompt con JSDoc reali. Aggiungi test. Distribuisci.
Tempo totale dal prompt all’esecuzione locale: circa 5 minuti. L’esportazione è ciò che rende tutto veloce — è il ponte tra “Claude ha costruito questo” e “questo è nel mio repository”.
Provalo
Apri Claude. Chiedigli “costruiscimi una pagina HTML autonoma che sia un diagramma Mermaid di un flusso di registrazione utente”. Quando l’artifact viene renderizzato, esporta la conversazione come ZIP tramite ChatExport AI. Lo ZIP contiene la trascrizione più un .html autonomo più il sorgente .mmd più lo .svg renderizzato.
Questo è l’intero flusso di lavoro degli artifact di Claude.
Correlati
- Guida all’esportazione di Claude.
- Da Claude a Markdown — flusso solo Markdown, artifacts come file separati.
- Per sviluppatori — flussi di esportazione AI fedeli al codice.