Come un UX designer e un partner AI hanno costruito una landing page B2B da zero, attraverso una scoperta approfondita, design iterativo e sviluppo dal vivo.
Edizione Approfondita — Il Making Of
3 marzo 2026 — ore 15:42. Un singolo messaggio ha dato il via a una maratona creativa di 74 ore.
La richiesta era chiara: agire non solo come sviluppatore, ma come consulente di design e marketing. Fare ogni possibile domanda. Scavare a fondo. Poi costruire la landing page più bella mai vista per il loro servizio di biglietteria online.
Prima ancora di formulare una singola domanda, Claude ha lanciato un agente di esplorazione per analizzare l'intero codebase di okTicket. Il risultato: una mappa completa di un ecosistema multi-prodotto molto più ricco di quanto la landing page esistente lasciasse intendere.
L'esplorazione ha rivelato una piattaforma PHP legacy in fase di riscrittura in Node.js/Next.js, una sofisticata app POS Flutter (okDesk), app mobile, e persino un prototipo di digital signage. Tutta questa ricchezza era completamente invisibile sulla landing page esistente.
La fase di scoperta ha previsto diversi cicli di interviste strutturate. Ecco gli scambi chiave che hanno definito la direzione del progetto.
Claude ha analizzato la landing page esistente su aprireunabiglietteria.it, identificando criticità importanti:
Dopo aver esplorato l'intero codebase della piattaforma, Claude ha classificato le feature scoperte per potere persuasivo:
Dopo aver raccolto tutti i requisiti, Claude ha sintetizzato il tutto in un piano di implementazione completo. Ma la prima versione è stata bocciata — ed è lì che la vera collaborazione ha avuto inizio.
Il piano finale ha definito 17 sezioni distinte, ciascuna con contenuto specifico, animazioni e comportamento responsive:
Il primo tentativo di piano è stato respinto. Il cliente ha identificato sezioni mancanti e correzioni che hanno ampliato drasticamente lo scope:
Il cliente ha poi inviato un enorme messaggio di feedback con 10 punti che hanno aggiunto 6 sezioni completamente nuove:
Il cliente condivise una proposta PDF di 8 pagine per i biglietti premium. Claude la analizzò ed estrasse la narrativa marketing chiave: trasformare il biglietto da "scontrino da buttare" a "souvenir da conservare".
Il 4 marzo alle 16:39, il piano è stato approvato e l'implementazione è iniziata immediatamente. Il progetto è stato inizializzato, le dipendenze installate, i font scaricati da Google Fonts e gli asset del brand copiati dal codebase esistente.
Usando lo strumento di anteprima di Claude, ogni sezione è stata costruita e immediatamente verificata su viewport mobile (375x812) e desktop (1280x800). Ecco l'evoluzione visiva:
Questo progetto ha inaugurato un flusso di lavoro unico: 102 screenshot sono stati catturati durante lo sviluppo, con Claude che ispezionava ogni render, valutava le proprietà DOM via JavaScript e apportava correzioni in tempo reale. Ogni sezione è stata verificata sia a 375px (mobile) che a 1280px (desktop).
Una delle sessioni di debug più interessanti ha riguardato il menu hamburger mobile. Il cliente ha segnalato che non funzionava sul suo telefono.
Il Problema: Il pannello slide-in mobile non copriva l'intera altezza del viewport.
Causa: backdrop-filter: blur() (glassmorphism) sull'elemento position: fixed relativamente all'header invece che al viewport.
La Soluzione: React createPortal per rendere l'overlay e il pannello del menu direttamente nel , sfuggendo al containing block. Più la limitazione di transition-all a sole proprietà specifiche.
Dopo la correzione, Claude ha eseguito 6 test di verifica: chiusura con X, navigazione tramite link, click sullo sfondo, stato a inizio pagina, stato con scroll e build di produzione.
Anche durante la fase di raffinamento, il cliente continuava ad aggiungere funzionalità importanti che aveva dimenticato di menzionare. Ciascuna è stata integrata senza intoppi:
Sezione emozionale dedicata con flusso in 3 step: dedica personalizzata, voucher A4 elegante, riscatto via QR. Posizionata tra Smart Guide e Rivenditori.
Aggiunto come 5° tab nelle Funzionalità Piattaforma. Pagine campagna con obiettivi, elenco donatori e tracciamento progressi.
Consegna biglietti via email + WhatsApp. Aggiunto come bullet nella tab Biglietteria Online.
Generatore self-service di QR code + URL abbreviato per materiale promozionale locale. Integrato nella sezione Rivenditori.
Prima del rilascio, il cliente ha richiesto una documentazione completa da usare come contesto per sessioni future. Sono stati creati due file:
202 righe. Documento di riferimento stabile: stack con numeri di versione reali, sistema brand, mappa di tutte le 17 sezioni con ID e link di navigazione, 6 componenti UI, pattern tecnici, struttura directory, checklist SEO e comandi dev.
234 righe. Documento vivo: stato di ogni sezione (formato checkbox), tabella di 25 asset mancanti con percorsi target e priorità, checklist trasversali per accessibilità, SEO, performance, animazioni, responsive e pre-lancio.
credential.helper=osxkeychain configurato da Xcode. In passato hai già autenticato con GitHub da terminale, e il macOS Keychain ha salvato le credenziali. Il PAT che hai creato ora non è stato usato — è stato usato quello già memorizzato.
Una landing page B2B completa e pronta per la produzione per okTicket — da directory vuota a deploy su GitHub in 74,5 ore.
once: true per reveal attivati dallo scroll, ritardi staggered per i figli e contatori viewport-awarecn() per classi condizionalidata-netlify="true")useScrollSpy con IntersectionObserver per il rilevamento della sezione attivabackdrop-filterfont-display: swap, precaricati nell'head HTMLI tre font che compongono il sistema tipografico del progetto, con specimen dal vivo:
530 invocazioni tool totali su 21 strumenti diversi
Brief iniziale, esplorazione del codebase, cicli di interviste al cliente
Struttura pagina, sezioni, design system, architettura componenti
Piano approvato dopo diverse revisioni. Inizia lo scaffolding.
102 screenshot, fix hamburger, aggiunte feature tardive
PROJECT.md + CHECKLIST.md creati per sessioni future
Git init, commit, push su GitHub. 54 file, 7.739 righe.
L'aspetto più potente non è stata la generazione di codice — ma il processo di scoperta strutturato. Intervistando metodicamente il cliente, analizzando il codebase e classificando le feature per potere persuasivo, l'AI ha offerto valore di consulenza strategica prima di scrivere una singola riga di codice. La richiesta del cliente di essere trattato come un ingaggio di consulenza, non come un ticket, ha fatto tutta la differenza.
102 screenshot durante lo sviluppo hanno creato un ciclo di feedback serrato che intercettava i problemi immediatamente. Il bug del menu hamburger, per esempio, è stato scoperto, diagnosticato, corretto e verificato in 6 scenari di test — il tutto nella stessa sessione. Questo approccio del costruire e vedere subito ha prodotto una qualità che altrimenti avrebbe richiesto molteplici cicli di deploy-review.
La fase di scoperta ha rivelato un ecosistema molto più ricco di quanto la landing page esistente comunicasse. Feature come Smart Guide, biglietti premium, voucher regalo, rete rivenditori e il POS okDesk sono state scoperte esplorando il codebase — cose che il cliente non aveva nemmeno pensato di menzionare inizialmente. Il primo piano è stato giustamente bocciato perché troppo superficiale. Il feedback in 10 punti che è seguito ha aggiunto 6 intere sezioni.
Il modello di feedback iterativo — dove il cliente poteva aggiungere nuovi requisiti anche durante l'implementazione ("ah, mi ero dimenticato dei Biglietti Regalo") — rispecchia come funzionano i veri progetti creativi. La capacità dell'AI di assorbire nuovo contesto, scrivere un mini-piano, ottenere l'approvazione e implementare in pochi minuti ha mantenuto lo slancio del progetto senza paralisi da scope-creep.
L'intera conversazione è avvenuta in italiano mentre il codice è stato scritto in inglese. L'AI ha fatto da ponte tra le due lingue senza soluzione di continuità, catturando concetti di marketing sfumati in italiano e traducendoli in codice React/TypeScript pulito e idiomatico. Espressioni come "Regala Cultura" e "biglietto-souvenir" sono fluite naturalmente dalla conversazione ai nomi dei componenti.