Puoi passare da un design Figma a un sito web live e distribuito in un singolo pomeriggio utilizzando Claude — non è richiesta alcuna esperienza di codifica. Il flusso di lavoro è semplice: progetta in Figma, esporta o descrivi il design a Claude, genera il codice, distribuisci su Vercel o Netlify. L'intero processo costa $0 se utilizzi i livelli gratuiti.

Le persone pubblicano clip "$5,000 website in 2 hours" su X, ma la maggior parte di loro salta i passaggi effettivi. Questa guida colma quel vuoto. Ogni prompt è incluso, ogni punto decisionale è spiegato e i compromessi sono onesti.

Fatti Veloci
Stack
Figma → Claude → Vercel o Netlify
Tempo
1,5–3 ore per un sito di 4–6 pagine
Costo
Livelli gratuiti, o ~$20/mese con Claude Pro
Competenza
Zero codifica — il senso del design aiuta
Migliore per
Landing page, portfolio, siti di piccole aziende, MVP
Ultimo verificato
Aprile 2026

Perché Funziona Ora (E Non Un Anno Fa)

Un anno fa, trasformare un design in codice con l'IA significava incollare uno screenshot e ottenere un'approssimazione approssimativa che richiedeva ore di pulizia. Oggi, la finestra di contesto da 1M token di Claude significa che puoi alimentarla con un intero sistema di design — colori, tipografia, spaziatura, dettagli dei componenti — e ottenere codice di qualità produttiva che corrisponde da vicino al tuo design al primo passaggio.

L'insight chiave: la qualità di quello che ottieni dipende quasi interamente da quanto bene descrivi il design. Descrizioni vaghe producono siti web vaghi. Descrizioni specifiche e strutturate producono siti web specifici e raffinati.

Quello di Cui Hai Bisogno

Tre strumenti, tutti con livelli gratuiti:

Figma — per il tuo design. Il livello gratuito funziona bene. Se non hai un design, prendi un modello gratuito da Figma Community e personalizzalo.

Claude — per la generazione del codice. Il livello gratuito ti dà Sonnet, che gestisce bene questo lavoro. Pro ($20/mese) ti dà Opus 4.7 per siti più complessi.

Vercel o Netlify — per la distribuzione. Entrambi hanno livelli gratuiti. Connetti il tuo repository GitHub, fai il push del codice, il sito va online.

Passaggio 1: Prepara Il Tuo Design Figma

Prima di coinvolgere Claude, organizza il tuo file Figma. Questo passaggio determina la qualità di tutto ciò che segue.

Il tuo design dovrebbe avere pagine chiaramente definite (Home, About, Contact, ecc.), spaziatura e allineamento coerenti, una tavolozza di colori visibile (nota i valori esadecimali esatti), caratteri identificati e breakpoint reattivi per desktop e mobile se possibile.

Non preoccuparti della perfezione dei pixel. Claude gestisce bene i dettagli di implementazione. Quello che importa è che il tuo design comunichi chiaramente la struttura, la gerarchia e lo stile visivo.

Suggerimento pro: Dai nomi significativi ai tuoi livelli Figma. "Hero Section", "Feature Cards", "Pricing Table" sono molto più utili di "Frame 247" quando scrivi i prompt.

Passaggio 2: Esporta Le Tue Informazioni Di Design

Claude non può leggere direttamente un file Figma, quindi devi tradurre il tuo design in informazioni con cui Claude può lavorare. Hai tre approcci, dal più facile al più preciso:

Approccio A: Screenshot + descrizione. Fai screenshot a pagina intera di ogni pagina nel tuo design. Caricali in Claude insieme a una descrizione scritta del layout, dei colori e delle interazioni. Questo è l'approccio più veloce e funziona sorprendentemente bene.

Approccio B: Esportazione Figma Dev Mode. Se hai il piano a pagamento di Figma, usa Dev Mode per esportare valori CSS, token di spaziatura e specifiche dei componenti. Alimenta questi a Claude insieme agli screenshot per un output più preciso.

Approccio C: Specifica di design scritta. Scrivi una descrizione dettagliata di ogni sezione — intestazione, hero, funzionalità, testimonianze, footer — includendo colori, caratteri, dimensioni e layout. Questo richiede più tempo ma ti dà il massimo controllo sull'output. Se stai costruendo senza un design Figma, questo è il tuo percorso.

Passaggio 3: Scrivi Il Tuo Prompt Iniziale

Questo è dove la maggior parte delle persone sbaglia. Scrivono "costruiscimi un sito web che assomigli a questo screenshot" e ottengono output generico. Ecco la struttura del prompt che produce costantemente risultati di qualità:

Costruisci un sito web di [numero] pagine con le seguenti specifiche: SISTEMA DI DESIGN: - Colore primario: [hex] - Colore secondario: [hex] - Sfondo: [hex] - Testo: [hex] - Carattere: [nome carattere] per titoli, [nome carattere] per corpo - Raggio bordo: [valore] - Scala spaziatura: [valori] PAGINA 1 — HOME: - Sezione hero: [descrizione esatta — testo del titolo, sottotesto, testo del pulsante CTA, trattamento dello sfondo] - Sezione funzionalità: [numero] schede, ognuna con [icona/immagine, titolo, descrizione] - Testimonianze: [descrizione del layout] - Sezione CTA: [descrizione] - Footer: [link e layout] PAGINA 2 — ABOUT: [stesso livello di dettaglio] TECNICO: - Usa Next.js con Tailwind CSS - Reattivo su mobile - Scorrimento fluido tra le sezioni - Tutte le immagini come div segnaposto con colori di sfondo (aggiungerò immagini reali in seguito)

Più specifico sei su ciò che l'utente vede, migliore è l'output. Non descrivere il codice — descrivi l'esperienza. Se hai bisogno di aiuto per affinare questo prompt prima di inviarlo, il nostro ottimizzatore di prompt gratuito può aiutarti a strutturarlo per risultati migliori.

Passaggio 4: Rivedi E Itera

Il primo output di Claude di solito cattura il 60–80% del tuo design. Il 20–40% rimanente proviene dall'iterazione. Questo è il passaggio in cui la maggior parte dei tutorial "vibe coding" finiscono, ma è dove accade la vera qualità.

Rivedi l'output controllando tre cose: il layout corrisponde al tuo design? I colori e la tipografia si sentono giusti? Ha un buon aspetto su mobile?

Poi itera con feedback specifici. Non dire "rendilo migliore". Dì:

  • "La sezione hero ha bisogno di più padding verticale — aggiungi 120px in alto e in basso"
  • "Le schede delle funzionalità dovrebbero essere in una griglia a 3 colonne su desktop, colonna singola su mobile"
  • "Il pulsante CTA dovrebbe avere un effetto hover — scurisci lo sfondo del 10% e ingrandisci leggermente"
  • "I link del footer dovrebbero essere disposti in 4 colonne: Product, Company, Resources, Legal"

Ogni round di feedback dovrebbe affrontare 3–5 problemi specifici. Tre round di solito ti portano al 95% del tuo design.

Stai ottenendo valore da questo? Pubblichiamo un deep-dive alla settimana sui flussi di lavoro dell'IA, gli strumenti e le guide pratiche. Unisciti ai lettori che lo ricevono per primi →

Passaggio 5: Aggiungi Contenuto Reale E Immagini

Sostituisci il testo segnaposto con la tua copia effettiva. Sostituisci i div delle immagini segnaposto con immagini reali. Se hai bisogno di aiuto per scrivere il contenuto del sito web, Claude è eccellente in questo — alimentalo con la tua descrizione del brand e chiedigli una copia della homepage che corrisponda al tuo tono.

Per le immagini, usa stock gratuito da Unsplash o Pexels, o genera immagini personalizzate con uno strumento di immagini AI. Metti i file di immagine nella cartella /public del tuo progetto e aggiorna gli attributi src.

Passaggio 6: Distribuisci Con Un Clic

Se hai utilizzato Next.js (consigliato), distribuire su Vercel richiede 60 secondi:

  1. Fai il push del tuo codice su un repository GitHub
  2. Vai a vercel.com e accedi con GitHub
  3. Fai clic su "Import Project" e seleziona il tuo repository
  4. Vercel rileva automaticamente Next.js e configura tutto
  5. Fai clic su "Deploy"

Il tuo sito è online con un URL .vercel.app. Connetti un dominio personalizzato nelle impostazioni di Vercel se ne hai uno.

Netlify funziona quasi in modo identico — importa da GitHub, rileva automaticamente il framework, distribuisci. Entrambe le piattaforme gestiscono SSL, CDN e distribuzione continua automaticamente. Ogni volta che fai il push su GitHub, il tuo sito si aggiorna.

Non sei sicuro di quale piattaforma di distribuzione utilizzare? Abbiamo scritto un confronto completo: Dove Distribuisci Dopo Vibe Coding?

Errori Comuni Che Confondono Le Persone

1. Dare a Claude uno screenshot senza contesto scritto. Gli screenshot aiutano, ma Claude ha bisogno di descrizioni scritte di colori, caratteri, spaziatura e layout per produrre codice accurato. Lo screenshot è un riferimento — il testo è l'istruzione.

2. Cercare di costruire tutto in un prompt. Un sito web di 6 pagine con animazioni, moduli e un CMS è troppo per un passaggio. Costruisci pagina per pagina, sezione per sezione. Inizia con la homepage, rendila giusta, quindi passa alla pagina successiva.

3. Saltare la reattività mobile. Se non menzioni il mobile nel tuo prompt, Claude costruirà un layout solo per desktop. Includi sempre "mobile responsive" nei tuoi requisiti tecnici e testa l'output a una larghezza di 375px.

4. Non testare le interazioni. Fai clic su ogni pulsante, riempi ogni modulo, scorri ogni pagina. Il codice generato dall'IA spesso sembra giusto ma ha link rotti, moduli non funzionali o stati hover mancanti. Testa prima di distribuire.

5. Perfezionismo prima della distribuzione. Distribuisci al 90% e itera. La tua prima distribuzione non deve essere perfetta — deve essere online. Puoi inviare aggiornamenti in secondi.

Stai costruendo per i clienti? Leggi la nostra guida su 5 errori di sicurezza che ogni vibe coder commette prima di consegnare.

Il Risultato Finale

Il flusso di lavoro Figma-to-Claude-to-deploy è il modo più veloce per trasformare un design in un sito web funzionante senza scrivere codice da solo. La qualità dipende dalla specificità dei tuoi prompt, non dalle competenze di codifica. Tre round di iterazione di solito ti portano dalla prima bozza al pronto per la produzione.

Inizia con un progetto semplice — un portfolio o una landing page — e lavora attraverso l'intero ciclo una volta. La seconda volta richiederà metà del tempo perché saprai esattamente come strutturare i tuoi prompt.

Non sei sicuro di quale strumento AI sia migliore per il tuo flusso di lavoro? Fai il nostro Quiz Model Picker di 60 secondi per scoprirlo, o vedi il completo confronto State of AI Models.

Questo è quello che facciamo ogni settimana. Un deep-dive su strumenti AI, flussi di lavoro e opinioni oneste — niente hype, niente riempitivo. Unisciti a noi →

Divulgazione: Alcuni link in questo articolo sono link di affiliazione. Consigliamo solo strumenti che abbiamo testato personalmente e utilizziamo regolarmente. Vedi la nostra policy completa di divulgazione.