Per Gag Società Benefit
Ho rifatto la home di Flussirari. Non per rubartelo: per farti vedere come puoi farlo tu.
Il sito di Flussirari che firmate in fondo alla pagina è del 2025, ed è costruito per crescere dopo la consegna: WordPress, un tema col suo costruttore visuale, il catalogo dei prodotti, le due lingue. E cresce davvero: nel blog esce un articolo a settimana (l'1, l'8 e il 15 ottobre). È il merito più raro di un sito consegnato.
E dentro c'erano già le idee giuste: il motto in apertura, la prugna, la gamma disegnata come un sistema di segni. Sono partito da lì. Foto, video e fatti vengono dal sito di oggi, dai loro cataloghi e dai loro articoli; i testi nuovi riordinano quello che Flussirari dice già di sé.
Guarda la home rifatta- Progetto
- La home di flussirari.com, rifatta
- Per
- Gag Società Benefit
- Di
- Federico Vitiello
- Sera
- 20 ottobre 2026
- Metodo
- Linus, con agenti di intelligenza artificiale
Il prima e il dopo
La stessa schermata, dal telefono.
Oggi
Rifatta
| Misura | Oggi | Rifatta |
|---|---|---|
| Voto di Lighthouselo strumento di Google che misura la velocità, da telefono, su 100 | 60 | 95 |
| Quanto ci mette a comparire la prima schermatail suo elemento più grande (LCP), Lighthouse | 6,9 s | 2,4 s |
| Peso al primo caricamentosonda in 4G, video escluso per tutte e due | 4.006 KB | 314 KB |
| Richieste a servizi esterni, partite da solea tre servizi: i caratteri di Google, il banner dei cookie, il controllo antirobot | 10 | 0 |
Il prima misurato il 20 ottobre 2026, il dopo lo stesso giorno sull'anteprima pubblicata, dalla stessa macchina: Lighthouse (versione 12) nel profilo del telefono, due passaggi per pagina (qui il migliore di oggi e il peggiore della rifatta), e una sonda che apre la pagina come un telefono senza cache, in 4G. Il video dell'apertura (511 KB) parte solo dopo che la prima schermata si è vista. Su PageSpeed Insights (si apre in un'altra scheda) le rifai in un minuto: i numeri cambiano da una macchina all'altra e da un giro all'altro.
Le scelte
Che cosa ho cambiato, e perché.
Ogni scelta ha dietro un principio di Linus, il metodo con cui lavoro.
01Feel, don't tell
La luce prima delle parole
Chi compra luce vuole vederla. La pagina si apre sulla notte vera di un loro progetto, il villaggio di Al Jazira Al Hamra: il video stava dentro un articolo del blog, ed è il materiale più bello che hanno. Subito sotto, «Prova la luce»: si scelgono il fascio e il bianco di un loro faretto, lo Strale S, e la luce cambia sul muro, coi dati della sua scheda tecnica.
02Il materiale vero, valorizzato
Il loro sistema di segni
Nei cataloghi Flussirari ha un sistema forte: un colore e un pittogramma per famiglia, e il marchio rosso. Sul sito viveva solo nelle pagine delle famiglie; nella home rifatta è tutta la pagina. Colori e pittogrammi sono i loro file, il marchio è il tracciato vero della copertina del loro company profile, nitido su ogni schermo, e il carattere è Barlow, libero, che come il DIN delle loro brochure nasce dai cartelli stradali.
03La pagina al servizio di chi arriva
Il su misura, subito
Chi arriva è un architetto, un lighting designer, un distributore, spesso dal telefono e con un progetto in testa. Il comando del su misura è nella prima schermata, il modulo ha lo spazio per scrivere il progetto e allegare un disegno (in questa anteprima si vede ma non spedisce niente), e al telefono una barra lo tiene sotto il pollice. I cataloghi dicono quanto pesano prima del tocco: Atmosfera, 60 MB.
04Il motto, fatto vedere
A mano in Italia, acceso nel mondo
Il motto, «Realizzato a mano in Italia. Progettato per il mondo.», resta, e la pagina lo fa vedere: una rotta di punti luce da Novi Ligure ai progetti negli Emirati e in Arabia Saudita, 4.690 km in linea d'aria fino a Ras Al Khaimah, e la fabbrica di 4.500 metri quadri col suo laboratorio.
05Farsi trovare
Google e i messaggi
Oggi Google ha solo il nome, «Flussirari», senza descrizione, e un link incollato in un messaggio esce senza immagine. Nella home rifatta ci sono il titolo con le parole del mestiere (illuminazione architetturale, su misura, fatta in Italia), la descrizione, l'immagine che compare quando incolli il link (la loro notte) e i dati strutturati dell'azienda, che dicono a Google chi è, dove sta e come chiamarla. Questo sito di prova resta fuori da Google apposta: non è il loro sito.
06Misurare, non stimare
La velocità
Niente tema, niente costruttore, niente servizi esterni: le foto nei formati moderni e alla misura di ogni schermo, i caratteri serviti dal sito stesso, il video che parte dopo che la pagina si è vista. E nessun banner dei cookie, perché non c'è niente che li usi. I numeri qui sopra vengono da due strumenti, con la data: nessuno è scritto a occhio.
07Per tutti
Si usa anche così
Contrasti a norma, bersagli da almeno 44 pixel per il pollice, tutto raggiungibile con la tastiera, e chi ha attivato sul telefono la riduzione del movimento non riceve animazioni. La prova della luce funziona anche senza JavaScript.
Il tempo e gli strumenti
Quanto tempo, e con che cosa.
Due ore e 8 minuti
di agenti di intelligenza artificiale, dalle 21:18 alle 23:26 del 20 ottobre. Le ore sono le loro; il mio lavoro sta nel metodo che seguono.
L'ha costruita Claude Code, un agente di intelligenza artificiale che scrive codice, guidato da Linus, il mio metodo: prima rileva e misura, poi scrive il progetto, poi mostra le prove, e solo dopo veste la pagina. La regia, un altro agente che coordina i cantieri per me, guarda gli scatti prima che la pagina si vesta.
Next.js e Tailwind, pubblicata su Vercel: nessun tema, nessun plugin, nessun servizio esterno. Il blog e le schede oggi si aggiornano da WordPress; nella home rifatta si aggiornerebbero dalla pagina stessa, con un gestore dei contenuti: chi scrive gli articoli li scriverebbe direttamente lì. In questa anteprima non c'è: si può aggiungere se il sito va online. Il materiale è tutto loro, compreso il video dell'apertura, rallentato e chiuso in un giro continuo: nessuna immagine generata, nessuna persona inventata, nessun numero inventato.
La parte difficile non è più scrivere il codice: è decidere che cosa deve sentire chi arriva, che cosa togliere, e che cosa è loro e di nessun altro.
21:18
Comincia dal sito di oggi: ne salva testi, foto, video e marchio, e lo misura dal telefono.
21:49
Ha scritto l'analisi, il progetto della pagina sezione per sezione e le domande da fare al cliente.
22:29
Mostra le prime prove, fatte sul codice vero con le foto vere.
22:30
La regia le guarda e dà il via, con due note: meno punti luce al telefono, ogni fatto riletto sulla fonte.
23:26
La pagina è pronta. Un secondo agente, che non l'ha costruita, la collauda e rilegge ogni fatto.
Il resto del sito
Che cosa puoi portare a Flussirari.
Ho rifatto solo la home. Il resto del sito può crescere allo stesso modo, e il materiale c'è già.
01
Una prova della luce per ogni faretto
Fascio, bianchi e dati presi dalle schede tecniche che hanno già, in italiano e in inglese, al posto delle tabelle da scaricare.
02
Il su misura come un percorso
Il modulo che riceve il disegno e lo porta nella loro posta, con le domande che servono a un preventivo.
03
I progetti come casi studio
La mappa, gli apparecchi, i video notturni che hanno già girato, montati per la pagina, per i social e per le fiere.
04
Il blog legato al catalogo
Ogni articolo, che già esce ogni giovedì, porta alla famiglia di cui parla, e Google capisce di che cosa sono esperti.
05
Le richieste contate, senza cookie
Quante richieste arrivano, da dove e da quale pagina, misurato in casa: niente banner, niente servizi esterni.
Il pomeriggio per le agenzie
Giovedì 29 ottobre, dalle 14 alle 17, in un'aula della 24ORE Business School a Milano, io e Marco Santonocito facciamo vedere come si lavora così a un gruppo piccolo di agenzie.
Marco costruisce prodotti digitali con l'intelligenza artificiale. È un pomeriggio a pagamento e a numero chiuso; lo organizza Alleniamo Imprese, la scuola ci ospita. Il programma e come si prende il posto sono nella pagina del pomeriggio.
Federico Vitiello