Siti web con l’agente AI Claude Code e Google Stitch

Ulteriori istruzioni per lavorare con Ailoot sono nella documentazione.

Perché i siti creati con Claude Code sembrano “AI slop”?#

Nel caso pratico descritto, il lavoro sulla homepage di un'app per chiamate è iniziato con un progetto vuoto e una richiesta a Claude Code di creare una landing page. Il risultato era il classico: slate-950 per lo sfondo, indigo-500 per l'accento, Inter in grassetto nel titolo e tre card identiche con ombre sotto. Lo stesso layout della prima versione di v0, della prima versione di Lovable, della prima generazione di ChatGPT. Ho riscritto il prompt cinque volte, aggiunto “premium”, “non come tutti gli altri”, “moderno”: la pagina continuava a sembrare un tema WordPress del 2015.

Il gradiente viola non è una coincidenza.

La logica è semplice: senza vincoli, il modello prende la media statistica di ciò che ha visto. E ha visto un milione di landing page identiche create con Bootstrap e Tailwind. Per ottenere un risultato che non sia ordinario, bisogna dare all'agente indicazioni specifiche: quali colori, quali font, quali spaziature, quali componenti considerare canonici. Per un modello, la parola “bello” significa “la mediana del 2020”. Gli aggettivi non lo sposteranno; servono parametri esatti.

Ho esaminato questa stessa lacuna in una guida ai sistemi di design già pronti con Refero: lì prendi lo stile di qualcun altro (Apple, Linear, Stripe) e lo dai all'agente. Google Stitch affronta il problema dall'altro lato: invece di prendere in prestito lo stile di qualcun altro, ne generi uno tuo, a partire dalla tua descrizione.

Che cos'è Google Stitch e in che modo è utile?#

Stitch è un esperimento di Google Labs, presentato a Google I/O nel maggio 2025. Nel campo del prompt scrivi l'aspetto che vuoi per l'app (oppure carichi uno screenshot, uno schizzo su una lavagna o la pagina di un concorrente) e Stitch genera schermate dell'interfaccia su una tela infinita. Sotto il cofano usa Gemini 2.5 Pro e Flash; Gemini 3 è stato aggiunto nel dicembre 2025 per ottenere layout più rifiniti.

Ecco cosa ci interessa:

• Vibe Design: descrivi a parole l'atmosfera (“minimalista e premium, come Stripe”) e ottieni diverse direzioni visive tra cui scegliere.
• Riferimenti: carica un'immagine da Dribbble o Pinterest; Stitch ne conserva il layout e applica i tuoi requisiti.
• Esportazione in tre formati: verso Figma (con livelli modificabili), come HTML/CSS pulito e tramite MCP, direttamente nell'agente.

La differenza rispetto agli stili già pronti come Refero è importante. Refero è una raccolta di sistemi di design già estratti da siti web reali: scegli un brand esistente. Stitch genera da zero un sistema per il tuo prodotto. Non hai un design di riferimento e vuoi un look tuo? Stitch. Vuoi applicare rapidamente lo stile di un prodotto noto? Refero. Coprono fasi diverse e si completano bene.

Claude stesso ha anche una modalità di design integrata; ne ho parlato in una guida a Claude Design. Stitch è diverso perché fornisce un sistema già pronto in un file esterno che l'agente legge ogni volta che crea qualcosa.

Requisiti di disponibilità di Google Stitch#

Stitch non è disponibile in tutti i Paesi: un rappresentante di Google ha scritto sul forum ufficiale che il servizio è disponibile per gli utenti dai 18 anni in su in 212 Paesi e che l'elenco si sta ampliando. Nelle regioni soggette a restrizioni, quando visiti il sito compare un unico messaggio: “Spiacenti, Stitch non è disponibile”.

Serve un account Google: puoi accedere solo con quello.

Quando l’autorizzazione MCP di Stitch blocca il flusso Claude Code#

Online ci sono un sacco di istruzioni scadenti per collegare MCP e metà semplicemente non funziona. Per esempio, molte guide (anche quelle più diffuse in inglese) consigliano di installare il pacchetto @google/stitch-mcp con il comando npx -y @google/stitch-mcp@latest. Quel pacchetto non esiste: npm restituisce 404. Non copiare questo comando: perderai tempo. Per lo stesso motivo, scegli integrazioni la cui installazione e verifica su un'attività reale siano state confermate.

Il tentativo remoto qui descritto ha prodotto Incompatible auth server in Claude Code. L’errore osservato non è una ricetta funzionante né prova che ogni configurazione attuale fallisca. Non proseguire con un generico «collega MCP»: usa l’esportazione HTML/CSS manuale finché non è verificata una configurazione esatta compatibile.

L’articolo non dimostra un proxy MCP locale funzionante: i precedenti frammenti di configurazione erano incompleti. Non creare una chiave o considerare risolta la connessione soltanto per un comando di elenco. Per completare il lavoro usa l’export HTML/CSS locale descritto sotto; un’integrazione MCP resta irrisolta finché non esiste una configurazione compatibile verificata.

Il flusso di lavoro Stitch e DESIGN.md è l'ingegneria del contesto nella sua forma più pura: inserisci in anticipo nel contesto di Claude token esatti, e lui crea attenendosi scrupolosamente a essi, senza “indovinare cosa intendessi”. La metodologia completa riunisce tutti e tre i pilastri: il clone IA, il Second Brain e l'ingegneria del contesto. Questa combinazione trasforma Claude da “assistente che tira a indovinare” a strumento che produce risultati prevedibili.

Che cos'è DESIGN.md e perché è meglio di uno screenshot?#

Ecco un dettaglio fondamentale che la maggior parte delle istruzioni sbaglia: in Stitch non c'è un pulsante “Esporta DESIGN.md”. È l'agente a comporre il file. Secondo il codelab ufficiale di Google, il prompt è più o meno questo: “passa attraverso Stitch MCP al progetto, estrai la palette e la tipografia e componi un DESIGN.md a partire da esse”. Quel codelab presume un collegamento MCP funzionante. Nel percorso manuale, Claude Code legge invece l’HTML/CSS esportato e scrive il file strutturato nella radice, segnalando i token mancanti senza inventarli da un’immagine.

DESIGN.md contiene indicazioni specifiche invece di aggettivi:

# DESIGN.md
## Colori
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Tipografia
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spaziatura (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Componenti
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Per fare in modo che Claude Code lo usi, fai riferimento al file in CLAUDE.md (per esempio, con la riga “Usa il design di tutti i componenti di DESIGN.md”) e l'agente caricherà gli stessi token in ogni sessione. Un pulsante creato lunedì e una card creata venerdì avranno lo stesso stile perché esiste un'unica fonte di verità.

Qui lavorano insieme due riferimenti locali. DESIGN.md conserva colori, tipografia, spaziature e componenti; HTML/CSS e risorse esportati da Stitch forniscono il layout specifico. MCP è facoltativo e non richiesto da questo percorso.

Come si crea un sito web: il percorso completo dal testo al design?#

Ecco l'intero processo in ordine:

1. Apri Stitch. Controlla la disponibilità nel paese e accedi a stitch.withgoogle.com con il tuo account Google.
2. Descrivi il prodotto. Indica schermate e percorso utente e conferma o modifica l’elenco proposto.
3. Aggiungi un riferimento. Carica lo screenshot previsto e specifica colori, font e layout da conservare.
4. Genera e rifinisci. Scegli una schermata e perfezionala prima di ampliare il design.
5. Esporta la schermata come HTML/CSS. Salva file e risorse richieste in una cartella di riferimento del progetto. Apri l’HTML localmente e verifica che sia la schermata scelta: uno screenshot non contiene valori CSS esatti.
6. Componi DESIGN.md dall’export locale. Fai leggere a Claude Code HTML/CSS, registrare valori effettivi di colori, font, spaziature, layout e componenti ed elencare i dati mancanti da decidere. Non servono chiave Stitch o autenticazione MCP.
7. Crea e verifica una pagina. Usa questi prompt sostituendo la cartella con il percorso reale:

Leggi l’export HTML/CSS Stitch in refs/stitch-export/. Crea DESIGN.md nella radice usando i valori presenti nei file. Indica i valori mancanti senza inventarli.

Crea una pagina da DESIGN.md e dall’export locale Stitch. Mantieni componenti modulari. Confronta il rendering con l’export su desktop e mobile e verifica separatamente navigazione e stati interattivi.

Da qui in poi, se ne occupa Claude Code: instradamento tra schermate, adattabilità ai breakpoint in DESIGN.md, animazioni e interattività. Stitch fornisce schermate statiche e un prototipo cliccabile, ma non crea logica funzionante né pubblica il sito su un servizio di hosting: questo compito spetta all'agente.

Come eliminare l'“aspetto da IA”: cosa bisogna cambiare esattamente?#

Ecco i punti specifici in cui un sito smette di tradirsi:

• Colore. Il viola indigo-500 è il primo indizio. Imposta i colori primario e d'accento come valori esadecimali esatti direttamente in DESIGN.md. Ogni agente interpreterà “blu del brand” a modo suo.
• Font. Inter è il font “IA” più sicuro e quindi più riconoscibile. Scegli una combinazione espressiva: per esempio, un sans serif per il testo del corpo e un font caratteristico per i titoli. Impostala nel design di Stitch e registrala in DESIGN.md.
• Un riferimento al posto di un aggettivo. Il modello interpreta “rendilo moderno” come “la mediana del 2020”. Prende alla lettera “usa il layout di questa pagina” se gli fornisci uno screenshot reale. Carica un'immagine di riferimento in Stitch: non puoi comunicare il gusto a parole.
• Spaziatura e respiro. Un layout da template si riconosce dai blocchi angusti e identici. Imposta in DESIGN.md una scala di spaziatura generosa: l'agente disporrà gli elementi con maggiore libertà.

La specificità prevale sugli aggettivi soggettivi. Stitch è essenzialmente una macchina che traduce il tuo “lo voglio così” in token precisi, così all'agente non resta niente da indovinare.

Google Stitch o alternative: quale scegliere?#

Ho confrontato gli strumenti secondo le dimensioni che contano davvero quando si programma seguendo l'ispirazione con un budget limitato:

Il flusso di lavoro che uso: Stitch per esplorare il design → Claude Code per la creazione e la logica. Per chi programma seguendo l'ispirazione e ha un budget limitato, Stitch vince perché è gratuito e disegna da zero un look unico per il tuo prodotto. Se vuoi conoscere l'intera gamma di strumenti disponibili sul mercato, ne ho parlato nell'articolo pilastro con cosa programmare nel 2026.

Dove si inceppa Google Stitch: quali sono i suoi limiti?#

Ecco un elenco sincero per evitare delusioni già alla terza schermata:

• Solo interfaccia. Niente backend, database o pubblicazione su un servizio di hosting. Per questo ti serve Claude Code (o Lovable, se vuoi tutto in un unico posto).
• Modifica limitata nello strumento. Non puoi spostare un singolo elemento con il mouse: puoi solo cambiarlo tramite un prompt e rigenerarlo. Non è Figma.
• Non determinismo. Lo stesso prompt produce risultati diversi. È utile per esplorare idee, ma scomodo quando servono risultati ripetibili.
• Quota. Raggiungerai il limite delle generazioni gratuite (attualmente giornaliero); non puoi acquistarne altre, quindi devi aspettare che la quota si azzeri. Il numero esatto varia: controlla l'interfaccia.
• Stato sperimentale. Google Labs non garantisce il supporto a lungo termine. Il servizio potrebbe cambiare o chiudere.
• Restrizioni geografiche e problema di autorizzazione MCP in Claude Code, menzionati nelle sezioni sulla disponibilità e sulla configurazione.

Quando Stitch non è adatto: se hai una guida del brand rigida per molti progetti, se il design è già in Figma o se ti serve un'app con backend già pubblicata.

Qual è il prossimo passo?#

Crea il flusso di lavoro più piccolo possibile con una sola schermata: descrivi il prodotto in Stitch, genera la homepage, esporta HTML/CSS e chiedi a Claude Code di comporre DESIGN.md e costruire la pagina da quei file locali. Quando vedrai il gradiente viola scomparire da solo, il resto sarà più facile.

Progettare con Stitch è una tecnica di ingegneria del contesto. Il sistema completo combina un clone IA, il Second Brain e l'ingegneria del contesto, così Claude può basarsi su regole e contesto preparati.

Il clone IA, il Second Brain e l'ingegneria del contesto sono importanti per il prodotto. Progettare con Stitch è il primo elemento di questa combinazione.

Per continuare a lavorare con i modelli, puoi andare su Ailoot.