C'è un momento, in certi progetti, in cui ti chiedi se stai davvero lavorando o stai solo orchestrando. Con Bubble Arcade quel momento è arrivato abbastanza presto, e invece di resistere ho deciso di abbracciarlo. Quello che è venuto fuori è un portale con undici giochi arcade funzionanti, zero dipendenze esterne, sprite pixel art generati proceduralmente e un sistema di leaderboard in localStorage. Tutto costruito (al 99%) dall'intelligenza artificiale.
Non era l'obiettivo di partenza. O meglio, non lo era in modo così esplicito. Volevo esplorare fino a che punto potevo spingere due strumenti AI specifici (Stitch per il design, Claude Code per il codice) su un progetto vero, con una complessità reale, senza framework, senza npm, senza niente che non fosse HTML, CSS e JavaScript puro.
Stitch per il design: dare un'identità visiva senza aprire Figma
Il primo problema di qualsiasi progetto personale è il design. Non nel senso di trovare un'estetica, ma nel senso di mantenerla coerente nel tempo senza impazzire. Ho passato anni a costruire cose che funzionavano benissimo ma che sembravano assemblate in fretta, con palette prese a caso e spaziature decise a sensazione. Non perché non mi importasse, ma perché il design vero richiede tempo, e il tempo lo preferivo spendere sul codice.
Stitch ha cambiato questo equilibrio. Gli ho descritto il progetto (un portale di giochi arcade con un'estetica retrò ma pulita, card per ogni gioco, pagine di gioco con una nav minimale) e ne è uscito un sistema di design completo: variabili CSS per colori e spaziature, componenti per bottoni e badge, temi per le thumbnail dei giochi, animazioni di reveal. Un design system vero, non un mucchio di stili sparsi.
La cosa che mi ha sorpreso di più è che non sembrava generico. Aveva una personalità. Il viola scuro come sfondo principale, gli accent in arancio e turchese, i badge stilizzati per indicare la difficoltà dei giochi: decisioni che avrei impiegato ore a prendere da solo, e che Stitch ha proposto in modo coerente dall'inizio alla fine.
Claude Code per il sorgente: dal motore di gioco ai singoli titoli
Con il design system pronto, ho passato il tutto a Claude Code e gli ho chiesto di costruire il portale. Non in una volta sola: non funziona così, e non dovrebbe. Ho lavorato in conversazioni successive, un pezzo alla volta: prima il motore di gioco condiviso, poi il sistema di punteggi, poi i giochi uno ad uno.
Il motore (BubbleEngine) è un singleton IIFE che gestisce il game loop, l'input da tastiera e touch, l'audio procedurale e le utility di collisione. Ogni gioco lo usa allo stesso modo: tre metodi, reset(), update(dt), render(ctx), e tutto funziona. Claude Code ha progettato questa astrazione e l'ha mantenuta coerente attraverso undici implementazioni diverse: Snake, Tetris, Breakout, Space Invaders, Flappy Bird e altri sei titoli originali.
Gli sprite sono pixel art procedurale. Nessuna immagine esterna: ogni personaggio, ogni oggetto di gioco è definito come una matrice di pixel con una palette, precompilato su OffscreenCanvas e disegnato tramite un sistema di blit. Claude Code ha scritto le definizioni degli sprite per ogni gioco mantenendo lo stesso approccio. Il risultato visivo è coerente senza essere uniforme: ogni gioco ha i suoi colori, le sue forme, la sua personalità.
Il mio 1%: la direzione
Dire che ho fatto l'1% suona come una battuta, e in parte lo è. Ma c'è qualcosa di vero. Il lavoro che ho fatto io non era scrivere codice o disegnare interfacce: era decidere cosa costruire, in che ordine, con quali vincoli. Scegliere che il portale doveva funzionare su file:// senza nessun server. Che i giochi dovevano essere aperti a chiunque voglia biforcarne uno. Che l'audio doveva essere sintetico e non campionato. Che le leaderboard dovevano stare in localStorage e non richiedere un account.
Queste sono decisioni che un'AI non prende da sola, perché non sa cosa vuoi tu. Sa come implementare quello che descrivi, sa proporre varianti, sa avvertirti quando stai per sbagliare qualcosa, ma il punto di partenza e la direzione restano tuoi. Quello che cambia è che la distanza tra un'idea e qualcosa di funzionante si è accorciata in modo radicale. Bubble Arcade è nato in qualche fine settimana. Undici giochi. Zero dipendenze. Tutto online.
Cosa ho imparato
La prima cosa è che la qualità del risultato dipende dalla qualità dei vincoli che imponi. Un prompt vago produce codice vago. Quando ho descritto l'architettura con precisione: come doveva funzionare l'engine, quali API dovevano essere pubbliche, come i giochi dovevano interfacciarsi con il sistema di punteggi, il codice che ne è uscito era pulito, coerente, manutenibile. Quando sono stato ambiguo, ho dovuto tornare indietro.
La seconda è che i due strumenti si completano meglio di quanto mi aspettassi. Stitch lavora sull'identità visiva, Claude Code lavora sulla logica e sulla struttura. Non si pestano i piedi perché operano su layer diversi. Il design system di Stitch è diventato il design-system.css che Claude Code ha poi rispettato in ogni pagina senza mai reintrodurre stili duplicati.
La terza, e forse la più importante, è che questo tipo di sviluppo non elimina la necessità di capire quello che stai costruendo. L'ho verificato ogni volta che qualcosa non funzionava: senza la capacità di leggere il codice, identificare dove stava il problema e descriverlo con precisione, il ciclo si inceppava. L'AI non indovina i bug che non riesci a descrivere. Ma se sai cosa cercare, li trova in fretta.
Bubble Arcade è un esperimento riuscito, nel senso che il portale funziona, i giochi sono giocabili e il codice è qualcosa di cui non mi vergogno. Ma soprattutto è una prova concreta che il confine tra "ho un'idea" e "ho qualcosa di funzionante" si è spostato in modo permanente. Quello che facevo in mesi ora si fa in settimane. Quello che facevo in settimane ora si fa in giorni. Non per tutti i progetti, e non senza pensare. Ma abbastanza spesso da cambiare il modo in cui guardo a quello che vale la pena provare a costruire.
Se vuoi provare i giochi di persona, li trovi su bubble-arcade.it.