Ho creato un sito web con Claude in un pomeriggio e l'ho venduto per 10.000 $. Ecco il sistema esatto.

Ho registrato l'intero processo, poi l'ho suddiviso passo dopo passo in modo che tu possa replicarlo. Il sito qui sotto sembra fatto da un freelance che si è fatto pagare a cinque cifre. Nessuno dei visitatori può capire che l'ha scritto un'AI. Costo totale per metterlo online: circa 60 $.

GIF

Prima: la verifica onesta

Non voglio venderti una favola. Quindi, prima del "come", ecco cosa è reale e cosa no.

Cosa è reale:

• Claude Code scrive il codice completo per un sito da zero, basandosi sulla tua descrizione. Niente template, quindi il tuo sito non assomiglia a tutti gli altri cloni Wix/Squarespace. Questa è la ragione principale per cui il risultato può raggiungere uno standard premium.
• Le due skill che uso sono reali e gratuite. Una è frontend-design, creata da Anthropic — funziona in background e vieta i font e i layout più abusati dall'AI. L'altra è UI/UX Pro Max, una skill creata dalla community che include decine di stili UI, palette di colori e abbinamenti di font richiamabili su richiesta.
• Il workflow di immagini/video è reale. ElevenLabs ora aggrega i principali modelli visivi (GPT Image, Google Veo 3.1) più l'upscaling Topaz in una scheda — l'ho verificato, si sono espansi nel settore immagini e video a fine 2025. Quindi generi un'immagine fissa, la animi e la upscali senza uscire dalla pagina.
• Claude Code è incluso nel piano Claude Pro a 20 $/mese (17 $ se fatturato annualmente). Non ti serve un piano Max per questo. Confermato e aggiornato a giugno 2026.
• L'hosting su un provider economico con dominio gratuito il primo anno costa circa 40–45 $/anno.

Cosa NON è magico: I "10.000 $" sono il valore del risultato, non la tua busta paga garantita. Un sito del genere è ciò che le agenzie fanno pagare tra 5.000 e 15.000 $ per realizzarlo. Che tu guadagni effettivamente quella cifra dipende dalla tua capacità di venderlo — più avanti parliamo dei soldi. I prompt qui sono punti di partenza, non un distributore automatico.

Ogni strumento menzionato è reale. Ogni prezzo è aggiornato a giugno 2026.

Cosa distingue un sito da 10.000 $ da uno da 200 $

Prima di costruire qualsiasi cosa, ti serve un obiettivo. Ho chiesto a Claude cosa rende un sito dall'aspetto costoso, e si riduce a 8 elementi in 3 gruppi:

Gusto

1. Punto di vista — una direzione di design reale, non una mood board
2. Tipografia — font intenzionali (e non quelli abusati)
3. Colore — moderazione, massimo 4–5 valori esadecimali, niente arcobaleno

Sostanza 4. Gerarchia — la dimensione dice all'occhio cosa leggere 1°, 2°, 3° 5. Immagini — personalizzate o credibilmente generate dall'AI, mai robaccia stock 6. Testi — misurati, sensoriali, scritti come da un umano, non una macchina di aggettivi

Qualità percepita 7. Movimento — effetti cursore e micro-interazioni che danno vita al sito 8. Mobile — progettato per telefoni, non un desktop rimpicciolito

Conserva questa lista. Alla fine valuterai il tuo sito su tutti questi 8 punti. Quel passaggio di autovalutazione è la singola mossa che separa un risultato curato da uno generico.

A chi è rivolto

Funziona se:

• Vuoi vendere siti web a attività commerciali locali (ristoranti, palestre, cliniche, agenzie immobiliari, ecc.) e non sai programmare
• Sei già un freelance e vuoi moltiplicare per 10 la tua produzione e i tuoi prezzi
• Vuoi un sito premium per la tua attività o il tuo marchio personale
• Puoi dedicare un pomeriggio mirato e sei disposto a iterare invece di aspettarti una perfezione con un clic

Non fa per te se vuoi un giocattolo "premi il bottone, ottieni un'attività". La qualità del tuo brief e la tua disponibilità a insistere quando qualcosa sembra piatto sono il lavoro.

Cosa ti serve (e quanto costa)

Costo totale realistico per un sito finito: ~60 $ (un mese di Claude Pro + hosting + dominio per l'anno).

La costruzione completa, passo dopo passo

Passo 1 — Configura Claude Code

Iscriviti a Claude Pro su claude.com. Scarica l'app desktop (icona di download, in basso a sinistra → sezione Claude Code → app desktop → esegui l'installer). Accedi.

Passa dalla modalità chat alla modalità codice (scheda in alto a sinistra, o Cmd/Ctrl + 3).

Crea una nuova cartella vuota ovunque sul computer — questa è la tua area di lavoro. Clicca il pulsante di selezione cartella vicino alla casella di chat e aprilo all'interno dell'app. Claude Code funziona meglio quando ha una cartella dedicata in cui lavorare.

L'interfaccia si aggiorna spesso, quindi se un pulsante non è esattamente dove lo descrivo, niente panico — il concetto è lo stesso, trova semplicemente l'equivalente.

Passo 2 — Potenzia Claude con due skill

Di base, Claude è un generalista. Il suo design predefinito è accettabile — tende a usare gli stessi font e layout che hai visto su ogni sito creato con l'AI. Le skill risolvono questo problema.

Installa la skill #1 — frontend-design (funziona in background): Incolla il link della skill frontend-design in Claude Code con:

1Installa questa skill a livello globale.

Consenti le modifiche quando richiesto.

Installa la skill #2 — UI/UX Pro Max (la richiami su richiesta): Incolla il link di UI/UX Pro Max in Claude Code con questa formulazione esatta — la frase è importante perché si installa in modo pulito tramite il terminale:

1Installa questo plugin usando npm, a livello globale.

Consenti le modifiche.

Passo 3 — Attiva la modalità automatica

In basso a sinistra, sotto la chat, imposta il selettore di modalità su modalità automatica. Questo permette a Claude di lavorare senza fermarsi a chiedere permesso a ogni passo. Con la modalità automatica attiva ed entrambe le skill installate, sei pronto per costruire.

Passo 4 — Raccogli riferimenti (la tua scorciatoia per il gusto)

Descrivere il gusto visivo a parole è difficile, specialmente se sei nuovo al design. I riferimenti risolvono il problema: screenshot di siti che ti piacciono da dare a Claude in modo che corrisponda allo stile. È molto più facile mostrare il gusto che descriverlo.

Dove li trovo:

• Dribbble — dove i designer pubblicano i loro lavori
• Awwwards — siti premiati, livello molto alto
• Pinterest — cerca esattamente ciò che vuoi, es. "design moderno sito ristorante"

Trova 3–5 siti che ti piaccioni e salva gli screenshot. Non li stai copiando — stai mostrando a Claude la direzione.

Passo 5 — L'unico prompt che costruisce il sito

Questa è l'intera azione in una singola mossa. Chiami la skill di design, dai il brief, alleghi i tuoi screenshot di riferimento e concludi con la formula magica.

Per la mia costruzione ho realizzato un sito per un ristorante di Seattle. Ecco la struttura del prompt — adatta il brief al tuo progetto:

1/ui-ux-pro-max
2
3Crea un sito web ad una pagina per [ATTIVITÀ — es. una steakhouse di lusso a Seattle].
4
5Direzione: [l'atmosfera con parole tue — es. lusso scuro e atmosferico, ma radicato nel
6Pacifico Nordoccidentale, NON una steakhouse generica di Manhattan].
7
8Sezioni (in ordine): [es. hero, filosofia/storia, menu, la sala, prenota].
9Niente galleria, niente sistema di prenotazione — solo una pagina che scorre dall'alto al basso.
10
11Allego 3–5 screenshot di riferimento per lo stile visivo.
12Abbina la *sensazione*, non copiarli.
13
14Stack tecnico: HTML/CSS/JS statico in un unico file (niente React — mantieni la semplicità).
15
16Prima di scrivere qualsiasi codice, fammi domande di chiarimento.

Quell'ultima riga — "fammi domande di chiarimento" — è ciò che fa fermare Claude e riflettere prima di costruire. Mi è tornato con circa 7 domande: il nome, la direzione stilistica, quali sezioni, chi scrive i testi, lo stack tecnico, il livello di animazione e altro ancora.

La parte più importante: Claude mi ha offerto tre direzioni stilistiche tra cui scegliere, come un menu. Ho scelto lusso scuro/atmosferico con un radicamento nel Pacifico Nordoccidentale, cinque sezioni, niente galleria, niente prenotazione — una pagina a scorrimento.

Questo è il singolo momento più importante dell'intera costruzione. Le tue risposte qui diventano l'intero sito. Più specifico sei ora, meno dovrai combattere con Claude dopo. Prenditi il tuo tempo.

Poi invia. Claude impiega circa 3 minuti a leggere e pianificare prima di scrivere una riga di codice, poi circa 4–5 minuti a costruire. Vai avanti fino alla rivelazione.

Domande seguite da Claude

Rivelazione prima versione

Passo 6 — Valutati con la checklist di 8 punti

Prima di continuare a rifinire, controlla il sito rispetto allo standard che ti sei prefissato. Incolla la checklist di 8 punti (dall'inizio di questo articolo) in Claude e chiedi:

1Ecco la mia checklist di 8 punti per un sito web da 10.000 $. Esamina il sito attuale e
2dimmi onestamente dove si posiziona su ciascun punto: forte, medio o carente. Sii spietato.

Sulla mia costruzione, Claude ha risposto: punto di vista — forte, colore — forte, gerarchia — forte, tipografia — medio, e immagini/movimento/mobile/roba invisibile — tutto medio. Otterrai una suddivisione simile, ed è normale. Il punto è sapere esattamente cosa resta da fare.

Passo 7 — È qui che passa da professionale a costoso

Questo capitolo fa tutta la differenza. Non sistemare le cose una alla volta — sprechi token e il risultato sembra rattoppato. Guida con l'intento, non i dettagli, e chiedi un batch.

Ecco il prompt esatto che uso:

1Abbiamo bisogno di più micro-interazioni artigianali. Le sezioni inferiori sembrano un po' generiche.
2Non serve renderle più affollate — solo più costose. Proponi un batch di perfezionamenti
3e applicali tutti insieme.

Nota che non sto dicendo a Claude cosa aggiungere — gli sto dicendo come voglio che sembri. Claude è più bravo a trasformare l'intento in dettagli di quanto la maggior parte delle persone lo sia a scrivere specifiche. Mi ha risposto con un batch: grana cinematografica su tutto il sito, linee sottili in ottone animate tra le sezioni, un effetto brace incandescente, rivelazioni delle parole chiave parola per parola. Cinque modifiche, un prompt, consegnate insieme.

Poi guida tu stesso la revisione per ogni sezione. Scorri, trova le sezioni che sembrano ancora piatte — ce ne sono sempre un paio — e dai a Claude un movimento o interazione cursore per sezione:

1La sezione [storia] sembra statica. Aggiungi qui un micro-movimento elegante o un'interazione cursore.
2Mantienilo sottile e raffinato — vivo, non rumoroso.

Se il primo tentativo è troppo evidente, insisti: "Rendilo più sottile, aggiungi un leggero ritardo in modo che segua il cursore." Sulla mia costruzione, questo ha trasformato un alone di candela statico in uno che segue il cursore con un leggero ritardo. Due prompt, due sezioni — quel livello è la differenza tra un sito che sembra costoso e uno che sembra costoso mentre lo navighi.

Passo 8 — Immagini: portale o generale

GIF

Le immagini sono l'unico pilastro che Claude non può risolvere completamente da solo. Opzione migliore: fotografia personalizzata. Mettila nella cartella del progetto e dì a Claude cosa è e dove va.

Niente budget per la fotografia? La generazione tramite AI è ora abbastanza buona che nessuno se ne accorge. Il trucco che rende tutto veloce: non scrivere tu il prompt per l'immagine — Claude conosce già il tuo progetto, quindi chiedigli di scrivere il prompt per te:

1Scrivimi un prompt per la generazione di immagini per l'hero di questo sito. Deve corrispondere
2esattamente all'atmosfera, alla palette di colori e alla direzione che abbiamo costruito finora. Restituisci solo il prompt.

Incollalo nel tuo generatore di immagini e ottieni qualcosa in linea con il brand al primo tentativo. In ElevenLabs puoi generare un'immagine fissa (GPT Image), trascinare esattamente quel fotogramma in Google Veo 3.1 per animarlo e upscalarlo con Topaz — tutto in una scheda. Metti il risultato finale nella cartella del progetto.

Passo 9 — Integra componenti professionali da 21st.dev

GIF

Quando vuoi un elemento visivo d'impatto (un effetto di scorrimento, un hero accattivante), 21st.dev è una libreria gratuita di componenti creati da sviluppatori veri. Trova quello che ti piace, premi Copia Prompt, incollalo in Claude Code, allega il tuo asset e dì a Claude di costruire l'hero con quello.

Ecco la parte importante: Claude protegge la tua architettura. Il componente di scorrimento che ho scelto era costruito per React; il mio progetto era un semplice sito statico, quindi Claude ha rifiutato di inserire la versione React perché avrebbe cambiato il funzionamento dell'intero progetto — e ha ricostruito l'effetto in puro HTML invece. (Se il tuo progetto necessita davvero di React — una dashboard, un checkout, un login — Claude direbbe di sì. Non rompe le cose solo perché glielo chiedi.)

Quando l'effetto non funziona al primo tentativo — a me è successo — descrivi semplicemente cosa non va:

1Il video appare ma non scorre come dovrebbe fare il componente. Approfondisci —
2apri la pagina nel browser, ispeziona cosa sta realmente succedendo e correggi la causa reale.

Claude ha aperto la pagina stesso, l'ha ispezionata dal vivo e ha trovato il vero bug tre livelli più in profondità. La lezione: continua a insistere. Spiega cosa si è rotto e cosa ti aspettavi — Claude riesce quasi sempre a risolverlo se lo lasci guardare più a fondo.

Passo 10 — Testi, font e mobile (le vittorie rapide)

GIF

Testi: I testi generati dall'AI per default spiegano troppo. I testi premium sono misurati e sensoriali — "Costata dry-aged. 340g. 60 giorni. Cotta a legna." suona come scritto da uno chef. La skill frontend-design spinge Claude in questa direzione, motivo per cui si guadagna il suo posto in ogni progetto.

Font: c'è un font — Inter — talmente abusato che grida immediatamente "Fatto con l'AI". Se lo vedi nel tuo output:

1Sostituisci Inter ovunque con un font meno abusato — Geist funziona bene. Mantieni il font dei titoli.

Mobile: "responsive" non è "progettato per telefoni". I telefoni vedranno il tuo sito molto più dei desktop. Richiedi una revisione dedicata:

1Fai una revisione mobile dedicata. Decidi cosa dovrebbe essere nascosto su schermi piccoli, cosa dovrebbe
2essere più compatto e cosa dovrebbe ridimensionarsi. Questa è la versione che la maggior parte delle persone vedrà realmente.

Sulla mia costruzione, la navigazione si è compressa, il marchio ha ricevuto una spaziatura più stretta e i pulsanti hanno ottenuto una variante più piccola. Fatto questo, tutti gli 8 punti della checklist sono completati.

Passo 11 — Mettilo online (la parte su cui tutti sbagliano)

In questo momento il tuo sito esiste solo sul tuo computer — quell'URL localhost funziona solo sulla tua macchina. Per condividerlo ti servono hosting + un dominio reale.

Scegli un provider di hosting con un dominio gratuito il primo anno. Per un semplice sito statico (niente login, niente checkout, niente database) il livello "premium/condiviso" più economico è sufficiente. Imposta la durata a 12 mesi — è il minimo che ti dà diritto al dominio gratuito. Cerca il tuo dominio, prendilo. Il mio totale è stato di circa 43 $ per l'anno: hosting + dominio + email.

Se Claude ti ha costruito qualcosa con un vero backend (ha detto

sì

a React, ha configurato Node.js, un database, ecc.), scegli il

business

livello invece — supporta Node.js. Il momento in cui Claude ha accettato o rifiutato React al Passo 9 ti dice di quale piano hai bisogno.

L'errore che carica una pagina bianca: quando carichi, comprimi i file all'interno della cartella del progetto — non la cartella stessa. Apri la cartella del progetto, seleziona tutto ciò che c'è dentro (Cmd/Ctrl + A), poi comprimi. Vuoi un unico zip con index.htmlal livello principale. Se comprimi l'intera cartella, l'host la decomprime una directory troppo in profondità e il tuo dominio mostra una pagina bianca.

Nella procedura di onboarding dell'host, scegli Migrate Existing Site → Upload Backup Files, seleziona il tuo dominio, trascina lo zip, invia. Clicca sul tuo dominio — ed eccolo lì, il tuo sito da 10.000 $ live su un URL personalizzato.

Quanto puoi effettivamente guadagnare con questo

Il sito in sé è un asset dal valore di 10.000 $. Ecco come si trasforma in denaro:

• Vendere siti a attività commerciali locali è la strada più veloce. Ristoranti, dentisti, palestre, agenti immobiliari e appaltatori pagano regolarmente 1.000–5.000 $ per un sito premium a una pagina. Costruiscine uno in un pomeriggio, fattura di conseguenza. Due clienti al mese a 2.000 $ = 4.000 $/mese part-time.
• Freelance esperti / piccole agenzie fanno pagare 5.000–15.000 $ esattamente per questo tipo di sito personalizzato, animato e progettato per mobile — e ora lo consegnano in ore invece che settimane. Il margine è tutto.
• Servizio produttizzato: vendi un pacchetto fisso "sito premium a una pagina in 5 giorni a 1.500 $". Prevedibile, ripetibile, e puoi gestirne diversi contemporaneamente.
• Il tuo marchio personale: se lo usi per te stesso, il "guadagno" sono gli affari e la credibilità che un sito dall'aspetto a cinque cifre ti porta.

Rampa realistica per qualcuno che inizia oggi: primo cliente pagante entro poche settimane, 1.000–5.000 $/mese part-time entro un paio di mesi se fai effettivamente attività di outreach. La costruzione non è più il collo di bottiglia — lo sono le vendite.

Cosa cambia per te dopo questo

GIF

Prima, un sito web premium personalizzato significava o imparare a programmare per mesi o pagare uno sviluppatore migliaia di euro. Dopo questo, la barriera tecnica è sparita. Puoi produrre un sito dall'aspetto genuinamente costoso, completamente personalizzato, animato e progettato per mobile in un pomeriggio — e venderlo, o usarlo per far sembrare seria la tua attività.

La competenza che ottieni veramente non è "programmare". È dirigere — sapere cosa sembra costoso, definirlo con precisione e insistere finché non è giusto. Questa competenza si accumula su ogni sito che costruirai dopo questo.

Il tuo prossimo passo (fallo oggi)

1. Iscriviti a Claude Pro e installa l'app desktop.
2. Installa entrambe le skill (Passo 2) e attiva la modalità automatica.
3. Salva 3–5 screenshot di riferimento da Dribbble o Awwwards.
4. Esegui il prompt di costruzione del Passo 5 — includendo "fammi domande di chiarimento" — e rispondi con attenzione.

Non saltare la raccolta dei riferimenti o le domande di chiarimento. È da lì che viene l'80% della qualità. Realizza un sito dall'inizio alla fine prima di preoccuparti di vendere — devi prima vederlo funzionare.

Una cosa onesta

Questa non è una pillola magica. È uno strumento reale che fa un lavoro reale — ma il risultato dipende da te. I prompt qui sopra sono punti di partenza, non script. La differenza tra un sito che sembra un template e uno che vale 10.000 $ è il gusto che porti, i riferimenti che scegli e quante volte insisti su una sezione piatta invece di accettare "abbastanza buono".

Claude gestisce l'esecuzione. La tua direzione e il tuo impegno decidono il risultato. Cosa farne dipende interamente da te.

*

*Per favore, aggiungi ai segnalibri, retwitta e segui @thegreatest_sv per più alpha, strumenti AI e ricerche di qualità.DISCLAIMER (Guadagni e Informazioni) I guadagni o le statistiche mostrati in questo articolo sono esempi tratti dalla mia ricerca e dalla mia esperienza personale e non costituiscono una garanzia di ciò che guadagnerai. I risultati variano in base a nicchia, qualità dei contenuti, RPM/CPM, coinvolgimento del pubblico, coerenza, impegno e altri fattori. Questo non è un consiglio finanziario, fiscale, legale o professionale — consulta gli esperti appropriati prima di prendere decisioni commerciali.Risorse e link

Strumenti e risorse Claude Code: https://claude.com/

**Skill Frontend Design (di Anthropic):

**https://github.com/anthropics/skills/tree/main/skills/frontend-design

**Skill UI/UX Pro Max:

**https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

21st.dev: https://21st.dev

Checklist del sito da 10.000 $ (download PDF gratuito): https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view

Siti di riferimento per il design

Dribbble: https://dribbble.com

Awwwards: https://www.awwwards.com

Pinterest:https://pinterest.com