I siti fatti con l’AI sono tutti uguali: 4 riferimenti di design da dare a Claude Code, Codex e Cursor

I siti fatti con l’AI si somigliano tutti perché l’AI riceve una richiesta generica. Se scrivi "fammi un sito bello", Claude Code, Codex o Cursor ti restituiscono la media di tutti i siti che hanno visto. La soluzione è dare all’AI un riferimento preciso: uno stile, un design system, un componente esistente. Uso quattro siti per farlo.

• Scrolltide: template con animazioni legate allo scroll, per la hero.
• designmd.ai: centinaia di design system in un unico file DESIGN.md.
• Refero Styles: oltre 2.000 stili ricavati da siti veri.
• Kage: singoli componenti di prodotti reali, da trasformare in prompt.

Perché i siti fatti con l’AI sono tutti uguali?

Un modello AI senza vincoli di design sceglie le opzioni più probabili: stessi colori, stessi font, stessa struttura a blocchi. Il risultato è corretto, ma anonimo. Un riferimento concreto sposta la scelta dal modello a te. Invece di descrivere a parole cosa vuoi ottenere, mostri all’AI un esempio da cui partire.

Scrolltide: come si crea una hero animata con l’AI?

Scrolltide è una libreria di template di siti con animazioni legate allo scroll: testi che si compongono, sfondi che si muovono, sezioni che entrano mentre scorri la pagina. Ogni template è un prompt già scritto per Claude, Cursor o Codex. Lo copi, lo incolli e ottieni una web app funzionante.

Scrolltide è a pagamento, ma ha una sezione di template gratuiti da cui partire. Il mio consiglio è usarlo per la hero della home, perché è la prima schermata che il cliente vede.

designmd.ai: cos’è un file DESIGN.md e come si usa?

designmd.ai raccoglie centinaia di design system in formato DESIGN.md. Un file DESIGN.md contiene in un unico posto colori, font, spaziature e regole per i componenti.

Il flusso è semplice:

1. scarichi il file DESIGN.md;
2. lo metti nella cartella principale del progetto;
3. scrivi all’AI: "Usa il file DESIGN.md per il design".

Da quel momento ogni pagina che l’AI sviluppa resta coerente con tutte le altre. Se usi Claude Code o Codex c’è anche l’MCP di designmd.ai: crei una chiave API gratuita e chiedi direttamente all’agente di cercare e scaricare il design system che ti serve.

Per chi fa siti ai clienti, designmd.ai ha design system già pronti per settori precisi: dentisti, ristoranti, barbieri e palestre.

Refero Styles: come si copia lo stile di un sito famoso?

Refero Styles raccoglie oltre 2.000 stili ricavati da siti veri, come Apple, Linear, Vercel o Mercury. Apri lo stile che ti piace e trovi palette, tipografia e il file DESIGN.md pronto da copiare.

Se vuoi che il tuo SaaS abbia l’aspetto di Linear, parti da Refero Styles invece di descrivere all’AI a parole cosa vuoi ottenere. Un file DESIGN.md costruito su un sito reale è molto più preciso di qualsiasi descrizione.

Kage: come si sviluppa un singolo componente da un esempio reale?

Kage ragiona per singolo componente: hero, pricing, footer, FAQ, presi da prodotti reali e consultabili per stile e colore. Trovi una pricing table che ti piace, la trasformi in prompt e la fai sviluppare a Claude Code.

Kage ha anche un MCP gratuito, senza account né chiavi. In Claude Code lo colleghi con un solo comando:

claude mcp add --transport http kage https://kage.design/mcp

Poi puoi chiedere a Claude Code: "Fammi una landing come Linear, ma per uno studio dentistico".

Come si usano i quattro siti insieme?

I quattro siti coprono livelli diversi dello stesso sito, quindi si combinano:

1. Stile: prendi il DESIGN.md da Refero Styles o da designmd.ai e mettilo nel progetto.
2. Sezioni: sviluppa le singole sezioni partendo dai componenti di Kage.
3. Movimento: aggiungi l’animazione nella hero con un template di Scrolltide.

Così l’AI lavora dentro vincoli chiari e il sito smette di somigliare a tutti gli altri.

Salva questi quattro riferimenti: la prossima volta che chiedi un sito all’AI, avrai qualcosa di preciso da mostrarle.