Fai il vibe coding del tuo portfolio da fotografo

01In cosa è diverso da un selettore di template

Le gallerie di template ti mostrano un design finito e ti chiedono se ti piace o no. Questo strumento va un livello più in profondità: ciascuna delle sei direzioni qui sotto si basa su un vero portfolio funzionante di un fotografo, effettivamente analizzato (screenshot, layout dal vivo, colori calcolati, caratteri calcolati), non su una palette inventata da qualcuno perché stia bene in un campione. La direzione Editoriale, per esempio, usa EB Garamond perché è letteralmente il carattere in cui è composto il sito di una vera fotografa di moda, individuato ispezionando direttamente la pagina.

Due schemi comparivano quasi ovunque nei siti reali da cui nasce questo strumento, e sono incorporati in ogni direzione qui: la navigazione nascosta dietro una sola icona hamburger, senza elenco di link visibile nemmeno su desktop, e una grande immagine alla volta invece di una griglia. Il colore dell'interfaccia resta vicino allo zero ovunque: il colore lo mettono le foto, non l'interfaccia.

02Cosa ottieni alla fine

Un unico prompt strutturato che copre la direzione generale, i colori esadecimali esatti, i nomi dei caratteri e il loro abbinamento, l'elenco delle pagine, il comportamento della navigazione, il layout della galleria e l'inquadratura delle immagini, le funzioni da includere, un consiglio di hosting con i veri compromessi di costo e una serie fissa di requisiti di qualità della realizzazione (testo alternativo accessibile, breakpoint responsive, nessun segreto scritto nel codice, immagini caricate in lazy loading). Incollalo nell'app di coding AI che preferisci e ha tutto ciò che serve per iniziare.

03Dal prompt a un sito online: la guida completa

Il prompt è il brief di design, non il traguardo. Ecco ogni passaggio tra la copia del prompt e un vero URL che puoi mettere su un biglietto da visita, gratis o quasi.

Copia il prompt e apri un'app di coding AI

Vanno bene Claude, Cursor, Claude Code, Windsurf o l'agente AI di Replit, qualsiasi strumento che possa scrivere e salvare file per te, non solo chattare. Se non ne hai mai usato uno, un'opzione nel browser come claude.ai o Replit non richiede installazione: incolla il prompt come primo messaggio.

Lascia che costruisca, poi guarda con attenzione cosa ha fatto

Chiedi di costruire il sito in HTML/CSS/JS statico (o quello che la sezione sull'hosting del prompt indicava) e di mostrarti un'anteprima. Controlla le sei cose richieste dal prompt (colori, caratteri, comportamento della galleria, navigazione, inquadratura, pagine) prima di andare avanti. Correggere ora un colore d'accento sbagliato costa molto meno che dopo aver inserito le foto.

Sostituisci con le tue foto, la tua bio e i tuoi contatti

Sostituisci ogni immagine segnaposto e ogni riga di testo di riempimento. Chiedi alla tua app AI di scrivere un vero attributo alt specifico per ogni foto man mano, non «image1.jpg» ma una descrizione vera, perché è sia un requisito di accessibilità sia un piccolo aiuto SEO. È anche il momento di ricontrollare che il modulo di contatto punti davvero a un indirizzo email che controlli.

Pubblicalo su un host gratuito

Se hai scelto il livello «Statico e gratuito», chiedi alla tua app AI di guidarti nel collegare la cartella del progetto o il repository GitHub a uno degli host nella pagina Hosting del menu qui sopra. Tutti e quattro fanno build e deploy in automatico a ogni modifica che pubblichi; nessun caricamento manuale una volta collegato.

Collega un dominio personalizzato (facoltativo, ma ne vale la pena)

Un sottodominio gratuito (come tuonome.netlify.app) va benissimo per cominciare. Quando sei pronto per tuonome.com, serve l'acquisto del dominio più una modifica DNS, spiegata nel dettaglio più sotto.

04Quale host gratuito dovresti usare?

Uno qualsiasi di questi pubblica un sito statico senza costi, con HTTPS gratuito e un piano gratuito che copre abbondantemente il traffico di un portfolio personale. I limiti dei piani gratuiti cambiano abbastanza spesso, quindi considera i numeri nella pagina Hosting come un ordine di grandezza e non come cifre esatte e aggiornate, e controlla la pagina dei prezzi di ciascun provider prima di impegnarti.

Chiedi alla tua app di coding AI di eseguire con te i passaggi di deploy: «collega questo progetto a Netlify» è una richiesta del tutto normale, e di solito ti guida nella creazione dell'account e nel primo deploy in un paio di minuti.

05Collegare un dominio personalizzato

Un dominio costa una piccola quota annua (tipicamente da 10 a 20 dollari all'anno a seconda dell'estensione), separata dall'hosting, che resta gratuito. I tre passaggi:

1. Acquista il dominio. Namecheap, Cloudflare Registrar o il successore di Google Domains (Squarespace Domains).
2. Aggiungi un record DNS. Un CNAME (o un record A) che punta il tuo dominio al tuo host, aggiunto nel pannello del registrar. Sono due righe nella tabella del registrar: un CNAME per www che punta all'indirizzo fornito dal tuo host, come your-portfolio.netlify.app, e un record A per il dominio senza prefisso che punta all'IP dell'host.
3. Aggiungilo nel tuo host. Incolla lo stesso dominio nelle impostazioni «dominio personalizzato» del tuo host; l'HTTPS si configura da solo.

Ogni host nella pagina Hosting ha una scheda «Custom domain» o «Domains» che ti indica il record esatto da aggiungere: copialo, aggiungilo nel tuo registrar e aspetta. Le modifiche DNS di solito richiedono da pochi minuti a qualche ora per avere effetto, a volte fino a 24 o 48 ore. La tua app di coding AI può guidarti nel pannello del tuo registrar se ti blocchi; fai uno screenshot della pagina delle impostazioni e chiedile cosa cliccare. Lucchetto visibile, nessun avviso «Non sicuro»: quello è il traguardo.

06Checklist prima del lancio

Cinque minuti con questa lista intercettano la maggior parte di ciò che fa sembrare un portfolio non finito. I controlli sono nella pagina Prima del lancio del menu qui sopra; spuntali man mano.

07Domande frequenti