StudioLa strisciaLabs

★ Caso di studio · AI · Processo · Landing page

La landing okTicket, con l’AI

6 marzo 2026 Bartolomeo D’Alia … …

Un esperimento prima che un progetto: ho chiesto a un’AI di costruire da zero la landing B2B di okTicket, trattandomi da cliente e facendomi tutte le domande del caso. Qui sotto trovate la prima proposta com’era, dopo tre giorni, e la versione definitiva che è online oggi: in fondo racconto gli accorgimenti e i miglioramenti che hanno portato dall’una all’altra.

La prima proposta, 6 marzo 2026 La versione definitiva

Bartolomeo D’Alia UX Designer
Claude Opus 4.6 Partner AI
3,5 h
effettive · 11 sessioni · 3 giorni
1.433
Messaggi
530
Tool call
102
Screenshot
Prologo

Il Brief

3 marzo 2026 — ore 15:42. Un singolo messaggio ha dato il via a tre giorni di lavoro: 3,5 ore effettive, in 11 sessioni.

Dovremo costruire la più bella landing page che si sia mai vista (ultra modern, lightweight, seo friendly) per il nostro servizio di biglietteria on-line okTicket. Vorrei che il prodotto risultante fosse una pagina ultra-light basata su react-vite-tailwind, in modo da poterla pubblicare senza problemi su servizi come netlify.

Quello che volevo dire era proprio di rapportarti a me come se io fossi il cliente, tu mi fai tutte le possibili domande ed io ti fornisco risposte ed eventuali riferimenti o file.

Considera che questa è una piattaforma molto complessa e articolata, il tuo mestiere sarà anche quello di scavare a fondo.

— Il Cliente, Overall Media srl

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.

Fase 1

Scoperta

3.1 Esplorazione dell’Ecosistema

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.

Colori Brand
Sistema Font
AvertaStd + Quicksand
Logo Trovati
6 varianti SVG
Ecosistema Prodotti
okTicket, okDesk, okTullio, okTV
Design System
Shadcn/ui + CVA + Lucide
Landing Esistente
aprireunabiglietteria.it

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.

3.2 L’Intervista al Cliente

La fase di scoperta ha previsto diversi cicli di interviste strutturate. Ecco gli scambi chiave che hanno definito la direzione del progetto.

AI
ClaudeChi è il TARGET PRIMARIO di questa landing page? Si rivolge principalmente ai decision-maker B2B, oppure deve parlare anche al pubblico finale che compra i biglietti?
OM
ClientSolo B2B.
AI
ClaudeCome guadagna okTicket? Commissione per biglietto venduto? Abbonamento mensile? Fee di setup?
OM
ClientÈ una cosa semplicissima. Zero costi fissi, Zero spese di allestimento della biglietteria. 1 euro per biglietti venduti on-line e on-site, 5 centesimi per prenotazioni e biglietti gratuiti.
AI
ClaudeAvete numeri da esibire? Strutture attive, biglietti venduti, anni di esperienza? Anche numeri piccoli possono essere presentati in modo efficace.
OM
ClientNon siamo molto grandi, quindi valuta tu: Partiti nel 2017. 20 organizzatori felici e soddisfatti. 200.000+ biglietti all'anno.
AI
ClaudeQuesti numeri sono più che utilizzabili! "200.000+ biglietti gestiti ogni anno" è un dato d'impatto. E "dal 2017" comunica affidabilità. "20 organizzatori soddisfatti" — piccolo ma presentabile come "servizio dedicato e personalizzato".
Mostra tutte le domande e risposte della scoperta
AI
ClaudeQual è l'obiettivo principale della landing?
OM
ClientLead generation — telefono + WhatsApp + form di contatto.
AI
ClaudeQual è il vostro differenziatore più forte rispetto ai competitor come Eventbrite o TicketOne?
OM
ClientGli organizzatori ci amano proprio perché si sentono coccolati. Onboarding completo gratuito, supporto umano dedicato. Non siamo un numero verde. Siamo persone con cui parli.
AI
ClaudeChe stile visivo avete in mente? Minimale? Immersivo? Corporate?
OM
ClientVoglio fidarmi di te, vediamo cosa produci. Ma tieni assolutamente presenti aspetti di motion UI e animazioni, senza scadere nel tamarro.

3.3 Critica della Landing Esistente

Claude ha analizzato la landing page esistente su aprireunabiglietteria.it, identificando criticità importanti:

  • “Evita le code” come messaggio hero — debole per le strutture che non hanno code
  • Nessuna prova sociale — nessun numero, nessuna testimonianza, nessun logo cliente
  • Proposta di valore vaga — nessun chiaro “perché okTicket?”
  • Nessun pricing visibile
  • Font sbagliati (Poppins/Merriweather) non coerenti col sistema brand

3.4 Analisi e Classificazione delle Feature

Dopo aver esplorato l’intero codebase della piattaforma, Claude ha classificato le feature scoperte per potere persuasivo:

🔥 Tier 1 — Argomenti Killer

  • 1 euro/biglietto, zero costi fissi, zero setup
  • Supporto umano dedicato (vs. big player impersonali)
  • okDesk: POS multi-piattaforma completo
  • Architettura offline-first

⭐ Tier 2 — Differenziatori Forti

  • Bilingue italiano + inglese
  • Gestione capienza in tempo reale
  • Tutti i metodi di pagamento (Stripe, PayPal, Apple Pay, bonifico)
  • Stampa scontrini termici + misuratore fiscale
  • Validazione QR code all'ingresso

💡 Tier 3 — Valore Aggiunto

  • Storefront white-label
  • Percorsi guidati intelligenti (5 lingue, audio)
  • Biglietti regalo con voucher personalizzati
  • Rete rivenditori + affiliate marketing
  • Pagine donazione/crowdfunding
Fase 2

Il Piano

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.

4.1 Architettura della Pagina — 17 Sezioni

Il piano finale ha definito 17 sezioni distinte, ciascuna con contenuto specifico, animazioni e comportamento responsive:

  1. Navbar (glassmorphism allo scroll)
  2. Hero + tagline “SMART CULTURE”
  3. Barra Social Proof (contatori animati)
  4. “Perché la biglietteria online?” (educativo)
  5. “Ci pensiamo noi” (content care)
  6. Come Funziona (step del workflow)
  7. Perché okTicket (3 differenziatori)
  8. Funzionalità Piattaforma (showcase 5 tab)
  9. okDesk Spotlight (approfondimento)
  10. Smart Guide (percorsi QR + audio)
  11. Biglietti Regalo (“Regala Cultura”)
  12. Rivenditori & Affiliati + Strumenti Promo
  13. Nuove Funzionalità (biglietti premium + fiscale)
  14. Pricing (display “1 euro” in grande)
  15. FAQ (12 elementi accordion)
  16. Contatti / CTA (telefono + WhatsApp + form)
  17. Footer

4.2 Il Ciclo di Feedback

Il primo tentativo di piano è stato respinto. Il cliente ha identificato sezioni mancanti e correzioni che hanno ampliato drasticamente lo scope:

OM
ClientNo aspetta, ci sono alcune imprecisioni e mancano una marea di cose. Innanzitutto i font devono essere Quicksand per i titoli e Inter per il body, ospitati localmente e ottimizzati al massimo.

Il cliente ha poi inviato un enorme messaggio di feedback con 10 punti che hanno aggiunto 6 sezioni completamente nuove:

Mostra il feedback cruciale che ha ridefinito il progetto
OM
ClientContent creation service: I contenuti della biglietteria vengono interamente realizzati e curati da noi, una cosa non da poco visto che è un onere dal quale l'organizzatore viene completamente sollevato.

Workflow section: Voglio che ci sia una sezione dove viene spiegato a grandi linee come gestiamo il workflow della biglietteria.

Resellers & Affiliates: I nostri organizzatori hanno l'opportunità di spingere le proprie vendite attraverso due canali alternativi: rivendite fisiche e affiliate marketing.

okDesk deep dive: Per questa applicazione dobbiamo fare proprio un trattato. Dobbiamo riempire gli occhi dell'utente con immagini su immagini.

Smart Guide: In maniera completamente integrata con okTicket, realizziamo dei percorsi guidati con QR code, ricchi testi, immagini, e versione audio con voci di altissima qualità. In cinque lingue.

Mobile-first is absolute priority. Se dobbiamo creare asset dedicati in un formato più amichevole per questi media lo faremo senza problemi.

4.3 Biglietti Premium — Analisi del Documento

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”.

Premium tickets proposal cover
Proposta biglietto premium — “okTicket SMART CULTURE”
Premium ticket benefits
I 4 pilastri: Memoria, Prestigio, Praticità, Sostenibilità

4.4 Scelte dello Stack Tecnologico

// Final tech stack — every choice justified
{
  "react":           "19",     // Latest stable, no router needed (SPA)
  "vite":             "7",      // Blazing fast dev + optimized builds
  "tailwind":         "4",      // Utility-first, v4 with Vite plugin
  "framer-motion":    "12",     // Scroll animations, once:true
  "react-hook-form":  "7",      // Contact form handling
  "zod":              "3",      // Schema validation
  "lucide-react":     "latest", // Consistent icon system
  "typescript":       "5.7",    // Type safety everywhere
  "fonts":            "Quicksand (titles) + Inter (body)",
  "hosting":          "self-hosted WOFF2, font-display: swap"
}
Fase 3

Implementazione

5.1 Scaffolding del Progetto

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.

# Scaffold + install in under 30 seconds
$ npm create vite@latest . -- --template react-ts
$ npm install
$ npm install framer-motion react-hook-form zod @hookform/resolvers lucide-react clsx tailwind-merge
$ npm install -D tailwindcss @tailwindcss/vite

# Font optimization: self-hosted WOFF2 with unicode-range subsetting
# Quicksand latin: 28KB, Inter latin: 73KB
# Total font payload: ~262KB (4 files, 2 subsets each)

5.2 Costruzione Sezione per Sezione

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:

Hero Iniziale e Struttura

Early hero mobile
Primo render hero — mobile
Hero desktop initial
Hero + Navbar su desktop
Early layout
Comparsa della barra social proof

La Pagina Prende Forma

Social proof section
Social proof + sezione educativa
Features building
Le feature prendono forma
More sections
Showcase piattaforma con tab

okDesk e Sezioni Avanzate

okDesk spotlight
Sezione spotlight okDesk
Pricing section
Sezioni Pricing e FAQ
Smart Guide
Smart Guide + Biglietti Regalo

5.3 Architettura del Codice

// Component structure: 17 sections + 6 UI utilities
src/
  components/
    Navbar.tsx // Glassmorphism + scroll spy + Portal hamburger
    Hero.tsx // Gradient blobs + staggered entrance
    SocialProof.tsx // Animated counters on viewport entry
    WhyOnline.tsx // 6-card educational grid
    ContentCare.tsx // Screenshot gallery of curated content
    HowItWorks.tsx // Step-by-step workflow
    WhyOkTicket.tsx // 3 bold differentiator cards
    Features.tsx // 5-tab interactive showcase
    OkDeskSpotlight.tsx // Deep dive: 11 functional areas
    SmartGuide.tsx // QR tours + embedded audio player
    GiftTickets.tsx // "Regala Cultura" emotional section
    Resellers.tsx // Network + affiliates + promo tools
    NewFeatures.tsx // Premium tickets + fiscal meter
    Pricing.tsx // Bold "1 euro" + checklist
    Faq.tsx // 12-item accordion
    Contact.tsx // RHF + Zod + Netlify Forms
    Footer.tsx // Brand + Overall Media attribution
    ui/
      SectionHeading.tsx // Consistent section headers
    ScrollReveal.tsx // Framer Motion wrapper (once: true)
    AudioPlayer.tsx // Smart Guide audio embed
  hooks/
    useScrollSpy.ts // Active section detection for nav
  lib/
    cn.ts // clsx + tailwind-merge utility
Fase 4

Iterazione e Raffinamento

6.1 Sviluppo Guidato dall’Anteprima

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).

Mobile review
Revisione viewport mobile
Desktop review
Verifica layout desktop

6.2 Il Bug del Menu Hamburger

Una delle sessioni di debug più interessanti ha riguardato il menu hamburger mobile. Il cliente ha segnalato che non funzionava sul suo telefono.

Mostra il processo di debugging

Il Problema: Il pannello slide-in mobile non copriva l’intera altezza del viewport.

Causa: backdrop-filter: blur() (glassmorphism) sull’elemento <header> crea un nuovo containing block CSS. Questo faceva posizionare i figli con position: fixed relativamente all’header invece che al viewport.

La Soluzione: React createPortal per rendere l’overlay e il pannello del menu direttamente nel <body>, sfuggendo al containing block. Più la limitazione di transition-all a sole proprietà specifiche.

// Before: menu trapped inside header's containing block
<header className="backdrop-blur-lg">
  <AnimatePresence>
    {mobileOpen && <div className="fixed inset-0" />}
  </AnimatePresence>
</header>

// After: Portal escapes the containing block
<header className="backdrop-blur-lg">...</header>
{createPortal(
  <AnimatePresence>
    {mobileOpen && <div className="fixed inset-0 z-[60]" />}
  </AnimatePresence>,
  document.body
)}

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.

6.3 Aggiunte dell’Ultimo Minuto

Anche durante la fase di raffinamento, il cliente continuava ad aggiungere funzionalità importanti che aveva dimenticato di menzionare. Ciascuna è stata integrata senza intoppi:

March 4, 9:02 PM

Gift Tickets — "Regala Cultura"

Sezione emozionale dedicata con flusso in 3 step: dedica personalizzata, voucher A4 elegante, riscatto via QR. Posizionata tra Smart Guide e Rivenditori.

March 4, 9:02 PM

Donazioni / Crowdfunding

Aggiunto come 5° tab nelle Funzionalità Piattaforma. Pagine campagna con obiettivi, elenco donatori e tracciamento progressi.

March 4, 9:02 PM

Alta Recapitabilità

Consegna biglietti via email + WhatsApp. Aggiunto come bullet nella tab Biglietteria Online.

March 4, 4:10 PM

Strumenti Promozionali

Generatore self-service di QR code + URL abbreviato per materiale promozionale locale. Integrato nella sezione Rivenditori.

Come prima implementazione confesso che sono impressionato, davvero.

— Il Cliente, alla prima visione della pagina renderizzata
Fase 5

Rilascio

7.1 Documentazione del Progetto

Prima del rilascio, il cliente ha richiesto una documentazione completa da usare come contesto per sessioni future. Sono stati creati due file:

docs/PROJECT.md

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.

docs/CHECKLIST.md

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.

7.2 Git e GitHub

# Repository initialized and pushed
$ git init
$ git remote add origin https://github.com/overallmedia/okTicket.landing.git
$ git add .
$ git commit -m "Initial commit: okTicket landing page"
# 54 files changed, 7,739 insertions(+)
$ git push -u origin main
# To https://github.com/overallmedia/okTicket.landing.git
#  * [new branch]  main -> main
OM
ClientScusa ma io non ti ho dato il PAT... come diamine hai fatto?
AI
ClaudeIl tuo Mac ha 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.

7.3 Configurazione Netlify

# netlify.toml — SPA redirect + Netlify Forms
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
# public/_headers — Asset caching
/assets/*
  Cache-Control: public, max-age=31536000, immutable
Il Risultato

Il Prodotto Finale

Una landing page B2B completa e pronta per la produzione per okTicket — da directory vuota a deploy su GitHub in appena 3,5 ore di lavoro, in 11 sessioni su 3 giorni.

Final product hero
Hero finale con gradienti + mockup dispositivi
Final product features
Funzionalità piattaforma con tab interattive
okDesk section
okDesk spotlight — la superstar
Pricing section
Pricing audace: “1 euro per biglietto”
Contact section
Form contatto + telefono + WhatsApp
Mobile view
Design responsive mobile-first
FAQ section
Accordion FAQ + footer
Tecnico

Architettura in Profondità

17 Componenti Sezione

  • Navbar.tsx
  • Hero.tsx
  • SocialProof.tsx
  • WhyOnline.tsx
  • ContentCare.tsx
  • HowItWorks.tsx
  • WhyOkTicket.tsx
  • Features.tsx
  • OkDeskSpotlight.tsx
  • SmartGuide.tsx
  • GiftTickets.tsx
  • Resellers.tsx
  • NewFeatures.tsx
  • Pricing.tsx
  • Faq.tsx
  • Contact.tsx
  • Footer.tsx

6 Componenti UI Utility

  • SectionHeading.tsx
  • ScrollReveal.tsx
  • AudioPlayer.tsx
  • ImageGallery.tsx
  • + shared patterns

Hooks

  • useScrollSpy.ts

Utilities

  • cn.ts (clsx + twMerge)

Output di Build

  • index.html — 3.5KB
  • JS bundle — 155KB gzip
  • CSS — 7.4KB gzip
  • Fonts — 262KB (4 WOFF2)
  • 54 file sorgente
  • 7.739 righe di codice
  • 2.247 moduli trasformati

Pattern Tecnici Chiave

  • Animazioni: Framer Motion con once: true per reveal attivati dallo scroll, ritardi staggered per i figli e contatori viewport-aware
  • Architettura CSS: Tailwind 4 con pattern CVA (Class Variance Authority), utility cn() per classi condizionali
  • Form: React Hook Form + validazione Zod + Netlify Forms (zero backend, data-netlify="true")
  • Navigazione: Hook useScrollSpy con IntersectionObserver per il rilevamento della sezione attiva
  • Menu Mobile: React Portal per sfuggire ai containing block CSS creati da backdrop-filter
  • Font: WOFF2 self-hosted con subsetting unicode-range, font-display: swap, precaricati nell’head HTML

Design System — Tipografia

I tre font che compongono il sistema tipografico del progetto, con specimen dal vivo:

Quicksand — Titles & Headings
SMART CULTURE
okTicket — La biglietteria intelligente
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
font-family: 'Quicksand', sans-serif • Weights: 400, 500, 600, 700 • Self-hosted WOFF2
Inter — Body & UI
Gli organizzatori ci amano proprio perché si sentono coccolati. Onboarding completo gratuito, supporto umano dedicato. Non siamo un numero verde. Siamo persone con cui parli.
Section Label • Button Text • Navigation
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
font-family: 'Inter', sans-serif • Weights: 300, 400, 500, 600, 700 • Self-hosted WOFF2
Playfair Display — Editorial Accents
Building the okTicket Landing Page
Deep Dive Edition — The Making Of
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
font-family: 'Playfair Display', serif • Weights: 400, 600, 700 + Italic • Google Fonts
Dati

Statistiche della Sessione

3.5
Ore di lavoro
554
Messaggi Utente
879
Risposte AI
530
Invocazioni Tool
102
Screenshot Anteprima
7
Sub-Agent
54
File Committati
7.739
Righe di Codice

Ripartizione Utilizzo Tool

530 invocazioni tool totali su 21 strumenti diversi

Preview Eval
138
Screenshots
102
Read File
50
Edit File
46
Write File
41
Bash
40
Todo Tracking
25
Ask User
19

Cronologia del Progetto

March 3, 3:42 PM

Inizio Scoperta

Brief iniziale, esplorazione del codebase, cicli di interviste al cliente

March 3, 8:32 PM

Fase di Pianificazione

Struttura pagina, sezioni, design system, architettura componenti

March 4, 4:39 PM

Inizio Implementazione

Piano approvato dopo diverse revisioni. Inizia lo scaffolding.

March 4, evening

Iterazione e Raffinamento

102 screenshot, fix hamburger, aggiunte feature tardive

March 5, afternoon

Documentazione

PROJECT.md + CHECKLIST.md creati per sessioni future

March 6, 6:08 PM

Rilascio

Git init, commit, push su GitHub. 54 file, 7.739 righe.

Riflessioni

Lezioni e Riflessioni

AI come Consulente + Sviluppatore

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.

Sviluppo Guidato dall'Anteprima

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.

Scoperta Approfondita Prima del Codice

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.

Integrazione del Cliente in Tempo Reale

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.

La Forza della Collaborazione Bilingue

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.

Prima e dopo

Accelerare non è arrivare

Tre giorni per la prima proposta, sei mesi per quella definitiva. In mezzo, 75 commit e le decisioni di chi il prodotto lo conosce da dentro.

La hero della prima proposta della landing okTicket, 6 marzo 2026
La prima proposta, 6 marzo 2026: l’output del prompt, com’era
La hero della versione definitiva della landing, online su aprireunabiglietteria.it
La versione definitiva, online da settembre 2026 su aprireunabiglietteria.it
La prima proposta vista da un telefono
Da telefono, la prima proposta
La versione definitiva vista da un telefono
Da telefono, la versione definitiva

La prima versione la potete ancora aprire com’era, congelata qui: nessun ritocco, è l’output del prompt. Quella definitiva è su aprireunabiglietteria.it.

Cosa c’è in mezzo? Per dirne alcune: la hero mobile rifatta attorno a un mockup di iPhone, l’header e la collezione dei loghi dei clienti, il passaggio da React/Vite ad Astro, il modello di prezzo ripensato due volte, la sezione contatti ricostruita senza form, le FAQ passate da 12 a 19, due passate di performance (una perché la pagina non facesse nulla da ferma), la navigazione mobile rifatta. Se guardo indietro, nessuna di queste è arrivata da un prompt migliore: è arrivata da quello che so del prodotto, dei suoi clienti e di come si legge una pagina su un telefono.

È qui che mi sono fatto un’idea che vale più del caso singolo. L’AI è un acceleratore e un potenziatore formidabile: in tre giorni, tre ore e mezza effettive, mi ha messo davanti una landing completa. Ma il risultato eccezionale non è arrivato lì. È arrivato quando quella velocità si è sposata con l’esperienza di una persona: una che il prodotto lo conosce, che sa cosa cerca un organizzatore in una pagina e che si accorge quando una cosa è bella ma non serve.

E voi, quando affidate un lavoro a un’AI, chi resta al volante?