Come trasformare un artefatto di Claude in un sito web

Introduzione

Molte persone usano Claude per creare siti web. Quando glielo chiedi, Claude restituisce il sito come un artefatto: un singolo file che puoi visualizzare in anteprima direttamente nella chat. Ma una volta ottenuto quell'artefatto, il passo successivo non è ovvio. Devi comunque ospitarlo da qualche parte, collegare un dominio, farlo funzionare su mobile e capire come continuare a modificarlo in seguito.

Claude ha un pulsante "Pubblica" per gli artefatti, ma il risultato vive su un URL claude.site avvolto nell'interfaccia di Anthropic. Va bene per condividere una demo, ma non per un vero sito web da usare per un'attività.

In questa guida ti mostrerò come trasformare un artefatto di Claude in un vero sito web pubblicato usando un nuovo strumento AI chiamato Repaint. Ti permette di partire dal tuo artefatto, pubblicare il sito e apportare modifiche chattando con l'AI.

Perché pubblicare un artefatto di Claude è difficile

Claude può generare codice, ma non è un vero e proprio website builder. Ti indirizza ad altre piattaforme quando chiedi come pubblicare sul tuo dominio. Di solito consiglia strumenti per sviluppatori come GitHub, Netlify e Vercel, oppure suggerisce di ricostruire il sito in un website builder tradizionale. Nessuna delle due opzioni è ideale.

Gli strumenti per sviluppatori sono utili perché possono eseguire direttamente il codice generato da Claude. Lo svantaggio è che ogni modifica richiede di modificare specifici file di codice. Per chi non è un programmatore, questo significa dover continuamente inserire ed estrarre file dal codice distribuito solo per apportare semplici modifiche con l'AI.

La maggior parte delle persone evita la complessità del codice usando un website builder come WordPress, Wix o Webflow. Queste piattaforme rendono più semplice pubblicare le modifiche. Il problema è che non possono eseguire gli artefatti di Claude, quindi devi ricostruire tutto manualmente. E poi, da quel momento in poi, devi modificare tutto a mano.

Ecco perché dovresti usare un website builder AI come Repaint. Ti offre la flessibilità di eseguire codice personalizzato e la comodità di modificare e pubblicare in un unico posto.

Cos'è Repaint?

Repaint è una piattaforma AI per creare siti web. È costruita attorno allo stesso flusso di lavoro basato sulla chat che rende Claude così utile. Puoi richiedere modifiche in italiano corrente, rivedere il risultato e continuare a iterare fino a quando il sito non è come desideri.

Ma Repaint è una piattaforma per siti web completa, non solo un posto dove generare codice. Questo significa che gestisce le parti del far funzionare un vero sito web che la pubblicazione di artefatti di Claude non gestisce:

• Pubblica il tuo sito come un sito web normale, senza l'interfaccia di Anthropic intorno.
• Ti permette di collegare un dominio personalizzato, in modo che il sito possa vivere al tuo vero URL.
• Mantiene il sito modificabile con l'AI, così puoi apportare modifiche in seguito.
• Aiuta a gestire i dettagli SEO come titoli delle pagine, descrizioni e struttura del sito.
• Può crescere oltre un singolo artefatto fino a diventare un sito multi-pagina.

Questa è la differenza tra condividere un artefatto e avere un vero posto per gestire il tuo sito nel tempo.

Passaggio 1: Importa il codice da Claude

Quando Claude crea un sito web, mette tutto in un singolo file che puoi visualizzare in anteprima nella chat. Per impostazione predefinita l'artefatto è in HTML, ma puoi richiederlo in React/TSX. In entrambi i casi, c'è un pulsante di copia in alto nel pannello dell'artefatto.

Per iniziare, apri il tuo artefatto di Claude e copia il codice. Poi vai all'importatore di codice di Repaint e incollalo. Questo avvia il processo di costruzione del sito. Repaint userà il tuo codice per creare un sito web completo che puoi pubblicare e continuare a modificare.

Se non hai ancora creato un artefatto in Claude, ti consiglio di richiederlo in React. È più vicino al formato che usa Repaint, quindi c'è meno probabilità che piccoli dettagli di design vengano persi nella traduzione. Anche l'HTML funziona, ma eventuali problemi possono essere risolti in seguito chattando con Repaint.

Passaggio 2: Pianifica cosa deve costruire Repaint

Dopo aver incollato il codice, Repaint ti farà alcune domande prima di costruire il sito. Questo ti dà la possibilità di decidere se vuoi usare esattamente la versione di Claude, usarla come ispirazione generica, o trasformarla in un sito più grande con più pagine.

Pianifica i contenuti

Gli artefatti di Claude sono sempre un singolo file, quindi di solito finiscono per essere siti di una sola pagina dove i link scorrono alle sezioni invece di aprire nuove pagine. Ma la maggior parte delle aziende ha bisogno di più di una pagina. Quindi se il tuo artefatto è una one-pager, dovresti considerare di farlo costruire a Repaint come più pagine.

Puoi anche usare questo momento per aggiungere più contenuti. Gli artefatti di Claude di solito non includono grandi insiemi di pagine come articoli del blog. Quando importi l'artefatto in Repaint, puoi aumentare la portata per includere tutto ciò che vuoi.

Le eventuali nuove pagine corrisponderanno allo stile che hai già.

Pianifica lo stile

Per impostazione predefinita, Repaint copierà lo stile dal tuo originale. Questo significa che preserverà lo stesso look: colori, layout, tipografia e spaziatura.

Ma non devi per forza mantenere lo stile. Se non sei soddisfatto, puoi chiedere a Repaint di riprogettare il tuo sito. Repaint può:

• Ricreare l'originale il più fedelmente possibile
• Riprendere lo stile di un altro sito web che ti piace
• Creare uno stile personalizzato per i tuoi contenuti
• Scegliere uno stile dalla libreria di stili di Repaint
• Scegliere per te

Non stressarti troppo. Se non ti piace ciò che produce, puoi chiedergli di creare nuove versioni in seguito.

Rivedi il piano

Prima di generare qualsiasi cosa, Repaint scrive esattamente cosa costruirà: quali pagine, quali contenuti e quale stile. Leggilo e apporta le ultime modifiche. È molto più veloce correggere il piano che rigenerare l'intero sito.

Una volta che confermi, Repaint costruirà il tuo nuovo sito!

Passaggio 3: Genera il sito

Una volta confermato il piano, Repaint inizia a costruire il tuo sito. Vedrai messaggi di avanzamento man mano che lavora su ogni pagina. Una semplice homepage potrebbe richiedere uno o due minuti. Un sito più grande con più pagine può richiedere più tempo.

Repaint non si limita a ospitare il codice che hai incollato. Usa l'artefatto di Claude come materiale di partenza, poi costruisce il sito descritto nel tuo piano. Se hai chiesto una ricreazione esatta, cercherà di rispecchiare fedelmente l'originale. Se hai chiesto più pagine o uno stile diverso, userà invece l'artefatto come punto di partenza.

A volte alcuni dettagli possono andare persi nella traduzione durante la generazione. Succede più spesso se il tuo artefatto è in HTML, poiché React è più vicino a ciò che usa Repaint. Se vengono persi dei dettagli importanti, puoi correggerli nel passaggio successivo.

Passaggio 4: Modifica il sito con l'AI

Una volta che Repaint genera la prima versione, la vedrai sul lato destro dello schermo. Ora puoi apportare modifiche nello stesso modo in cui faresti in Claude. Scrivi cosa vuoi cambiare, Repaint aggiorna il sito e poi tu rivedi il risultato.

Ad esempio, puoi chiedere a Repaint di:

• Aggiungere una nuova pagina
• Cambiare i colori o i font
• Aggiungere un modulo di contatto
• Generare immagini
• Riscrivere il testo

Puoi continuare ad apportare modifiche finché il sito non è pronto per essere pubblicato.

Passaggio 5: Pubblica il sito

Quando il sito è pronto, clicca sul pulsante Pubblica. Repaint metterà il sito online e ti fornirà un URL live che puoi condividere con chiunque. Sarà simile a questo: https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

Questo è il momento in cui il tuo lavoro diventa un vero sito web su internet. Puoi aprirlo sul telefono, inviarlo a qualcuno o testarlo in un vero browser. Inoltre non sarà avvolto in alcuna interfaccia di Anthropic come accadrebbe con un artefatto pubblicato.

Inoltre non hai bisogno di esportare codice o distribuire file da qualche altra parte. D'ora in poi, Repaint è il luogo in cui modifichi e pubblichi il sito. Se vuoi apportare modifiche in seguito, puoi chiedere a Repaint di aggiornare il sito, e poi pubblicare la nuova versione con lo stesso pulsante.

Passaggio 6: Collega il dominio

Quando sei pronto a usare il tuo URL, vai su Impostazioni sito > Domini e clicca su Collega un dominio personalizzato. Questa funzione richiede un piano a pagamento. Puoi vedere i dettagli sui prezzi qui.

Il tuo dominio è gestito su una piattaforma esterna sia a Claude che a Repaint. È registrato presso un provider di domini come GoDaddy, Namecheap o Cloudflare. Non devi spostarlo da nessuna parte. Devi solo aggiornare le impostazioni presso il tuo provider di domini in modo che il dominio punti al tuo sito Repaint.

Se non l'hai mai fatto prima, non preoccuparti. Chiedi a Repaint di guidarti. Ti dirà esattamente cosa fare, passo dopo passo.

La modifica può richiedere alcune ore prima di entrare in vigore. Una volta che Repaint mostra il tuo dominio come verificato, il tuo sito è online sul tuo dominio.

Conclusione

Claude rende facile creare una prima versione di un sito web all'interno di un artefatto, ma portarlo online come un vero sito web e mantenerlo è ancora difficile. Repaint ti offre un modo per trasformare quell'artefatto in un vero sito web che puoi pubblicare, collegare a un dominio e continuare a modificare con l'AI. Repaint rende più facile che mai trasformare un artefatto di Claude in un sito pubblicato.

Domande Frequenti

Perché non usare semplicemente la pubblicazione di artefatti integrata in Claude?

Puoi farlo, ma il risultato vive in una sandbox ospitata da Claude avvolta nell'interfaccia di Anthropic, e non puoi metterlo sul tuo dominio. Va bene per condividere una demo, ma non è ciò che la maggior parte delle aziende vuole per un vero sito web. Repaint ti offre un normale sito web con il tuo dominio, il tuo branding e nessuna interfaccia di Anthropic intorno.

Quanto tempo ci vuole per trasformare un artefatto di Claude in un sito web con Repaint?

Se il tuo artefatto è già pronto, dovrebbero bastare pochi minuti. Condividere il codice, pianificare il sito e generarlo richiede di solito 2-5 minuti. Dopodiché, il tempo fino alla pubblicazione dipende da quante modifiche apporti.

Quanto costa pubblicare con Repaint?

È gratis importare il tuo codice in Repaint, generare un sito, apportare modifiche e pubblicare. Le principali limitazioni del piano gratuito sono l'utilizzo limitato, l'assenza di un dominio personalizzato e un badge Repaint sul sito. I piani a pagamento partono da 20$/mese con fatturazione annuale, o 25$/mese con fatturazione mensile. Includono un utilizzo esteso, supporto per domini personalizzati e rimuovono il badge Repaint.

Perché non usare semplicemente GitHub Pages, Netlify o Vercel?

Puoi farlo, soprattutto se sei a tuo agio nel gestire il codice. Questi strumenti sono bravi a mettere file online. Ma ogni modifica significativa ti rimanda al codice, il che significa che sei bloccato a copiare file tra Claude, il tuo editor e il tuo strumento di hosting.

Repaint è diverso perché è una piattaforma per siti web completa, non solo un luogo dove servire file. Questo significa che puoi continuare a modificare con l'AI, pubblicare modifiche dallo stesso posto, gestire le pagine, aggiornare le impostazioni SEO, ottimizzare le immagini, collegare moduli e usare il tuo dominio personalizzato. È pensato per la gestione a lungo termine del sito, non solo per il primo deployment.

Devo saper programmare per risolvere i problemi?

No. Repaint è pensato per chi non programma. Dopo aver importato il codice da Claude, non devi mai più gestire codice. Se qualcosa non va, puoi sistemarlo chattando con l'AI. Saper programmare può aiutare se vuoi essere molto specifico, ma non è necessario.

Il sito avrà esattamente lo stesso aspetto dell'artefatto di Claude?

Se chiedi a Repaint di ricreare l'originale, dovrebbe avere quasi esattamente lo stesso aspetto. A volte alcuni dettagli vanno persi perché Repaint traduce il codice nel proprio formato di sito web. I problemi di traduzione sono più comuni se l'artefatto era in HTML. Se succede, dovresti essere in grado di sistemare tutto in pochi prompt.

Cosa succede se l'AI fa un errore?

Man mano che apporti aggiornamenti, Repaint salva ogni versione del tuo sito. Puoi chiedere a Repaint di tornare indietro e ripristinerà una versione precedente. Oppure, se vuoi tornare a un punto specifico nel tempo, puoi ripristinare manualmente qualsiasi versione precedente. Quindi puoi apportare modifiche liberamente senza alcun rischio di rovinare il tuo sito.

I moduli e i pulsanti funzioneranno dopo l'importazione?

Sì. I moduli di contatto probabilmente non funzionavano nel tuo artefatto originale di Claude. Ma quando sposti il sito su Repaint, può trasformare il modulo in un vero modulo di contatto che invia notifiche email quando ricevi delle compilazioni. I pulsanti dovrebbero funzionare se rimandano a pagine o sezioni reali. Se un pulsante non punta da nessuna parte, puoi chiedere a Repaint di collegarlo.

Repaint può gestire immagini, icone e altri asset dal mio artefatto di Claude?

Gli artefatti di Claude di solito non memorizzano i file immagine al loro interno. Di solito si collegano a immagini ospitate da qualche altra parte. Quando importi il tuo codice, Repaint può recuperare e salvare copie di quelle immagini in modo che rimangano disponibili in modo permanente per il tuo nuovo sito. Repaint può anche generare immagini se hai ancora bisogno di aggiungerne.

Posso aggiungere impostazioni SEO, analytics e metadati?

Sì. Puoi aggiungere codice personalizzato, analytics e metadati semplicemente chiedendolo a Repaint. Può configurare il SEO tecnico per te, e può aggiungere script ed embed da altre piattaforme. Per aggiungere Google Analytics, basta condividere il tuo ID GA.

Repaint sostituisce l'hosting o ho ancora bisogno di un host separato?

Repaint è una piattaforma di hosting. Esegue il tuo sito web. Non hai bisogno di una piattaforma di hosting separata come GitHub Pages, Netlify, Vercel o un altro website builder.