Se fai affidamento agli strumenti, puoi ottenere rapidamente qualcosa che sembra "ok". Tuttavia, il risultato finisce spesso per avere un aspetto generico che hai già visto da qualche parte. Questa è l'essenza del "look AI", ed è qui che si fa la differenza più grande.
Basandomi sulla mia esperienza di creazione di tre siti diversi con personalità distinte partendo dalla stessa base, utilizzando una linea di produzione costruita su Claude Code (il progetto makeLP), riassumerò brevemente un metodo riproducibile.
Una Fabbrica, Non un Trucco Magico Una Tantum
Anche se produci qualcosa di buono una volta, non diventa un patrimonio se non è riproducibile. Per questo lo gestiamo in quattro fasi.
Produzione → Qualità → Verifica → Miglioramento.
Ci sono quattro tipi di componenti di supporto:
- Skills: Template metodologici (motion-lp-builder per la creazione, frontend-design per i principi anti-AI, bulk-categorize per la classificazione di massa)
- Sub-agenti: Ruoli specializzati (lp-visual-verifier per disegnare e criticare, design-reference-analyst per trasformare i riferimenti in specifiche, bulk-classifier per la categorizzazione)
- Libreria di Riferimento: Uno scaffale di 4.074 voci SANKOU classificate per "tipo di sito × settore"
- Regole in Evoluzione: CLAUDE.md (flusso/disciplina standard) + Memoria (rendere le critiche permanenti)
Preparazione e Prerequisiti
La base è fissata su Vite + React + GSAP (ScrollTrigger) + Lenis. La chiave è "collegare direttamente il progresso dello scroll alla produzione." La quantità di scrolling diventa l'input per l'espressione (frame scrubbing di video di sfondo, pinning, parallasse, rivelazioni all'ingresso).
Ci sono due tipi di asset, scelti in base al soggetto:
- Generazione AI (Higgsfield): Quando sono necessarie immagini realistiche come resort
- Disegno con codice (SVG/Canvas/CSS): Sembra più "giusto" per B2B e tecnologia. Nessun credito richiesto
In caso di dubbio, decidi in base a "dovrebbe essere una foto o un diagramma?"
STEP 1: Produzione
L'ordine è cruciale. Non iniziare a scrivere subito; prima, solidifica un brand brief (a chi stai promettendo cosa, colore, tipografia, intensità del movimento) in una pagina. Anche con la stessa base, è il brief, non il codice, a differenziare il risultato.
Se scegli la generazione AI, segui la disciplina dei crediti:
- Controlla il saldo
- Ottieni un preventivo preliminare con get_cost
- Crea prima un'immagine hero
- Genera le altre usando quella come riferimento per uniformare la texture
- Attendi il completamento e scarica.
Per l'implementazione, collega la produzione direttamente allo scrolling (frame scrub/pin/parallasse/rivelazione). E rendilo sempre robusto: fallback statico con prefers-reduced-motion, assicurati che npm run dev funzioni anche con asset mancanti, e considera il risparmio energetico per touch e canvas.
STEP 2: Qualità - Allontanarsi dal Design di Massa
Decostruisci ed elimina il "look AI" in sei punti:
- Uso eccessivo di gradienti (specialmente testo e gradienti viola) → Restringi a un colore singolo + un accento
- Mettere semplicemente in fila parti standard in un ordine standard → Crea con un concept unico per la struttura stessa (es. l'intera pagina come una canvas di workflow)
- Numeri "gonfiati" e arrotondati → Sii specifico (es. "600 fatture/mese → 0" prima/dopo)
- Icone emoji → Non usarle. Disegna SVG se necessario
- Barre colorate solo sul bordo sinistro dei blocchi → Non usarle. Usa il colore su superfici, margini e tipografia
- Tutto simmetrico, uniforme, arrotondato e con ombre morbide → Introduci asimmetria e variazioni nella forza dei margini
Il principio è: schema cromatico è un colore singolo + un accento, la tipografia è spinta con un carattere distintivo, forza nei margini e movimento finalizzato alla "messa a fuoco."
STEP 3: Verifica - Build che Passa ≠ Buono
Anche se il codice passa, pin, scrub e rivelazioni potrebbero essere rotti sullo schermo reale. Pertanto, lp-visual-verifier avvia un server di sviluppo, opera con un Chrome/Edge esistente tramite puppeteer-core, esegue il rendering e cattura ogni sezione, e poi "la critica a occhio."
Tre punti chiave:
- Il verificatore non corregge il codice (per isolare la causa)
- Catturare con prefers-reduced-motion permette la visualizzazione statica delle aree fissate e delle sezioni inferiori in attesa di rivelazioni
- Cattura sempre anche a larghezze mobile
Anche un solo ciclo di critica → correzione aumenta significativamente la qualità. Non accontentarti di un build riuscito.
STEP 4: Miglioramento + Libreria di Riferimento
Il design-reference-analyst legge i siti di riferimento e li traduce in "pattern comuni" e "specifiche di miglioramento (dove e come)" piuttosto che semplici impressioni. La libreria sankou-reference ha 4.074 elementi classificati su due assi, permettendoti di estrarre istantaneamente "solo esempi di turismo × LP speciale" (il contenuto è chiaro dalle note in ogni riga).
La classificazione di massa stessa è anch'essa modellizzata (bulk-categorize: suddivisione → parallelizzazione sub-agente → aggregazione → correzione).
Regole che Crescono
Questa è la scoperta più grande. Non lasciare che le critiche del cliente finiscano con una correzione una tantum; promuovile a regole permanenti.
Esempio:
"Le icone emoji sembrano AI" "Le barre colorate a sinistra sembrano AI" → Trasformale in regole vietate nella memoria e in CLAUDE.md → Evitale automaticamente in ogni sito da quel momento in poi.
In altre parole, più lo usi, più il "look AI" scompare. Avere skills e sub-agenti permette anche una facile espansione orizzontale.
Creare Tre Siti Distinti
- AZURE BAY (Summer pool LP / B2C): Turchese + Oro. Generato con Higgsfield. Frame scrubbing del video della piscina allo scroll.
- FLOWGEAR (Supporto implementazione n8n / B2B): Singolo colore corallo + piatto, nessuna generazione di immagini. L'intera pagina è una canvas di workflow n8n. Prima/dopo specifico invece di numeri gonfiati.
- STATIK (Laboratorio sperimentale per uno studio fittizio): Quasi nero + mono + un colore acido. Griglia cinetica di testo in Canvas + cursore personalizzato. Un'esperienza immersiva, non solo una LP.
I punti in comune sono "colore singolo + un accento," "parlare con specificità," e "svolta attraverso un singolo concept." Scegliere i mezzi in base al soggetto è il primo passo per allontanarsi dalla media.
Configurazione Minima per Costruire da Soli
- Template della base legata allo scroll (non scrivere da zero ogni volta)
- Metti i principi anti-produzione di massa in un unico foglio di regole (niente gradienti/emoji/barre a sinistra...)
- Cattura e guarda sempre lo schermo reale dopo aver creato
- Promuovi le critiche a regole ogni volta
Insidie comuni e contromisure: Spreco di crediti (hero prima + preventivo preliminare), omissioni di verifica (catturare schermi reali), accessibilità del movimento (reduced-motion), e rottura su mobile (catturare sempre a larghezze diverse).
Riepilogo
L'AI è una "mano veloce," non un "occhio."
Nel momento in cui incorpori l'occhio (verifica) e le regole (apprendimento) nel sistema, i siti fatti con l'AI si liberano dal look AI.
