Laboratorio di Hybrid Interaction Design, Università Iuav di Venezia
VIBE CODING
L’AI al servizio dei designer
Gabriele Filaferro12 novembre 2026, ore 9:30
Come passeremo la mattinata
Lo strumento che ci servirà dopo
Lo lasciamo fare mentre costruiamo il resto
Crea una web app per una lezione universitaria. Gli studenti aprono il link dal telefono, scrivono un’idea di app da costruire insieme e poi votano le idee degli altri. Mostra in tempo reale la classifica delle proposte più votate, con un design semplice e leggibile anche sul proiettore.
Sono Gabriele e costruisco app che aiutano le persone
Cosa faccio al lavoro
Aiutiamo le aziende a migliorare il tragitto casa-lavoro dei dipendenti
Alcuni dei nostri clienti
Non ero sicuro di poter usare i loghi veri. Nel dubbio, Word 97.
Chi non sono
Non sono un esperto di AI
→Sono un utilizzatore seriale
Non sono un designer
→I designer siete voie potete sfruttare l’AI molto meglio di me
Tre premesse prima di iniziare
1 Tutto quello che vi dirò potrebbe cambiare tra 4 ore
Questa presentazione scade tra
4:00:00
Il mondo dell’AI cambia molto velocemente: quello che vale stamattina può essere superato nel pomeriggio
2 Non parleremo di tutto
Escluderemo
3 L’AI non è gratis
lo paga la mia azienda
il vostro accesso
Purtroppo il vostro utilizzo potrebbe essere limitato
Vediamo cosa conoscete già
Vediamo cosa conoscete già
ChatGPT
Claude
Gemini
Nano BananaVediamo cosa conoscete già
Figma MakeMythos
Veo
LovableVediamo cosa conoscete già
Mistral
Cursor
MCP
JevCosa si può fare con l’AI?
Farsi spiegare la busta paga
Il fisco italiano è complesso, l’AI lo rende semplice
Capire come stringere una vite in uno spazio stretto
Mandi la foto a Claude, e taaac, si trova online il prodotto ideale per avvitarla
Un’app per mettere ordine tra gli attrezzi
Riconosce gli strumenti da una foto e propone come dividerli nelle borse
Anche questa presentazione
file
tentativi buttati
Un solo file HTML fatto con Claude: slide, animazioni e demo dal vivo
Laboratorio di Hybrid Interaction Design, Università Iuav di Venezia
VIBE CODING
L’AI al servizio dei designer
Gabriele Filaferro12 novembre 2026, ore 9:30
Un sito per non dimenticare i concerti che vedete
Adoro i concerti e sono nerd, voglio vedere le mie statistiche
concerti.gabrifila.me
Pocket, un’app per capire dove finiscono i soldi che si spendono
Bilance non faceva per me, così ho costruito la mia app
Così utile poi che la usa solo la mia partner
TEDxGenova: un’app per vivere l’evento al meglio
Programma, workshop, meme e momenti live durante lo show
partecipanti collegati che giocano nello stesso momento
Sagra del Pesto, digitalizzare un evento per efficientarlo
Per un’associazione scout
incassati con 1.500 clienti serviti
Al lavoro, un prodotto B2B per medio grandi aziende
clienti
sviluppatore
Un team piccolo non crea inefficienze
La tesi
L’AI è potentissima, ma da sola non è in grado di sviluppare app che resistono a un utilizzo reale.
L’obiettivo di oggi
Conoscere i componenti delle app per poter guidare l’AI in modo conscio e resiliente.
Come funzionano gli LLM e i loro derivati
Cosa vuol dire LLM
Miliardi di parametri, addestrato su una quantità enorme di testo
Lavora sul linguaggio*
Una funzione: dato un input, si genera un output
Il modello legge token, non parole
Domani a Venezia piove, e quando a Venezia piove porto l’ombrello
Pezzi di parola trasformati in numeri: il modello lavora solo con questi, il testo lo vediamo noi
Entrano token, escono token
Input
Output: le probabilità del prossimo token
Il cielo di Venezia oggi è
Output grigio
Il token scelto si aggiunge all’input e si ricomincia: un token alla volta
Proviamo a contare
Quante volte compare la lettera 'u' nella parola 'supercalifragilistichespiralidoso'?
Rispondi SOLO con il numero. Nessuna lettera, nessuna spiegazione, nessun elenco.
Claude Haiku 5.5
Per questo sbaglia anche i conti
3.847 × 2.914 =
Modello11.209.758
Risultato vero11.210.158
Non calcola: prevede il risultato più plausibile
Nel codice il prossimo token è quasi sempre ovvio
Testo
Domani a Venezia andrò
Codice
<h1>Titolo</h1>
Meno strade possibili, meno modi di sbagliare
Come funziona una chat
A ogni risposta il modello rilegge tutta la conversazione
Come funzionano gli LLM e i loro derivati
Cosa sa e cosa vede
Come a un esame: quello che hai studiato, e il foglio con la traccia
La finestra di contesto
È quello che può vedere il modello, e non è infinito
Il problema: lost in the middle
Context rot: non inquinare il contesto
Contesto pulito
Scrivi l’oggetto della newsletter di dicembre
“Dicembre è qui: tre eventi da non perdere”
Contesto inquinato
Scrivi l’oggetto della newsletter di dicembre
“🎉 Our new logo is here! Discover the 2024 prices”
Come funzionano gli LLM e i loro derivati
Il modello può “pensare”
Un quaderno e una matita costano 1,10 €. Il quaderno costa 1 € più della matita. Quanto costa la matita?
Senza reasoning
Con reasoning
matita = x
quaderno = x + 1 €
x + x + 1 € = 1,10 €
2x = 0,10 € → x = 0,05 €
Dove sta il ragionamento?
Ogni appunto entra nel contesto e guida il token successivo: il modello si dà da solo un contesto migliore
Il pensiero è usa e getta: dopo la risposta gli appunti escono dal contesto, resta solo la risposta
Meglio non pensare troppo
Tempo
Token
Attenzione: pensare troppo può aumentare le allucinazioni, come una persona che rimugina e si incarta
Riproviamo, con il pensiero
Quante volte compare la lettera 'u' nella parola 'supercalifragilistichespiralidoso'?
Rispondi SOLO con il numero. Nessuna lettera, nessuna spiegazione, nessun elenco.
Claude Haiku 5.5 · ragionamento attivo
Come funzionano gli LLM e i loro derivati
Si paga per token usati
In ingresso
tutto quello che mandate
In uscita
quello che genera: di solito costa diverse volte di più
Più la chat è lunga, più costa ogni messaggio
Come funzionano gli LLM e i loro derivati
Per ora il genio è in gabbia
Senza strumenti
Con uno strumento
ORA() dà l’ora attuale
MCP: usare i tool di altri servizi
per l’AI
Chi offre il servizio sceglie quali tool esporre, voi scegliete a cosa collegarvi
Come funzionano gli LLM e i loro derivati
Agente: modello, strumenti e un loop
State già usando un agente
La chat che usate non è un LLM puro: è un agente
Il vostro glossario
LLM, contesto, reasoning, costi, tool, agenti
Qualche consiglio pratico
Il modello non legge solo il vostro prompt
Richieste dell’utente che vanno contro il provider prompt sono ignorate
Il modello giusto dipende da cosa vi serve
GPT luna
GPT Sol
Ogni modello ha i suoi punti forti, e cambiano a ogni versione: provatelo sul vostro compito
stessa domanda: “mi dai un’idea per il nome del progetto?”
Ogni modello ha un suo modo di parlare. Può sembrare una sciocchezza, ma se non vi piace vi darà fastidio ogni giorno
Non abbiate paura a iniziare nuove chat
Più la chat si allunga, più il modello si perde
Compaction: quando il contesto è pieno, la chat riassume i messaggi vecchi. Manzini nel riassunto non c’è più
Il modello è una macchina: entra qualcosa, esce qualcosa
Quello che esce dipende da quello che mettete dentro
Entra qualcosa che non avete scelto: la risposta si inquina, e non è più riproducibile
Un modello ruffiano è problematico
Vi conferma quello che pensate già, anche quando sbagliate
È sempre disponibile e non vi contraddice mai: più comodo delle persone
Ci si affeziona: quando GPT-4o è stato ritirato, in molti hanno salutato il loro “AI partner”
Nessuno dice sempre sì, l’AI non dovrebbe farlo
Italiano o inglese? Oggi conta poco
italiano
Riassumi questo articolo in cinque punti
inglese
Summarize this article in five bullet points
Scrivete nella lingua in cui pensate meglio
Il miglior autore di prompt è il modello stesso
Devo preparare una presentazione sul mio progetto di tesi. Scrivi il prompt migliore per chiedere a un altro modello di aiutarmi.
Se lo scrivete voi: chiari, schematici, con dei paletti
Chiedetegli di farvi domande
Crea la locandina per la festa di fine corso di Hybrid IxD. È il 12 dicembre in aula magna, ingresso libero, il pubblico sono studenti di design. Niente foto stock, al massimo due colori, il titolo deve leggersi da lontano. Dammi tre proposte diverse in HTML.
Prima di iniziare, se hai dubbi fammi domande.
Fatevi rispondere in HTML
Se non usa uno strumento, chiedeteglielo
Gli agenti decidono da soli quando usare uno strumento, e a volte non lo fanno. Basta dirglielo
Buttate e rigenerate senza remore
Il modello non si stanca. I vostri token sì.
In breve
Pausa
Ci rivediamo tra quindici minuti
Pensate a un’app che vorreste costruire e scrivetela nello strumento di stamattina
Parte 2
Proviamo
Costruiamo un’app insieme, componente dopo componente
Prima di partire: il setup
È la parte tecnica: dovete fidarvi
L’agente lo legge prima di ogni nostro prompt
Così i prompt dei giri possono restare semplici
Dodici componenti in quattro giri
Un’app web, per il telefono
Si apre da un link
Niente installazione, solo browser
Un solo formato da progettare: il telefono
Cosa deve poter fare, al minimo?
Cosa chiediamo all’agente
Vogliamo costruire {l’idea votata}.La useremo da mobile nel browser.Feature minime:– {feature 1}– {feature 2}– {feature 3}1. Ricava il modello dati: quali “cose” esistono, le loro proprietà e come si collegano. Non c’è ancora il login: chi crea qualcosa scrive solo il proprio nome.2. Crea tre mockup della UI molto diversi (A, B, C), con dati finti. Solo HTML, niente backend.Sono davanti a una stanza piena di designer, fammi fare bella figura!
Mentre l’agente lavora
Concetti, proprietà e relazioni
proprietà
proprietà
Che concetti compongono l’app?
genere
luogo
Gabriele sentirà Gazzelle il 3 aprile
Che aspetto avrà l’app?
Si prova in pochi minuti
Se ne fanno tre, molto diverse
Si butta senza remore
HTML con dati finti
Dodici componenti in quattro giri
Cosa chiediamo all’agente
Usiamo la versione {A, B o C} dei mockup.Correzioni al modello dati: {le correzioni}.Costruisci l’app, client e server, seguendo il modello dati:– il database con i concetti del modello– l’API per leggere e scrivere i dati– la UI della versione scelta, collegata all’APIAggiungi qualche dato di esempio e avviala in locale.
Mentre l’agente lavora
Un’app funziona come un ristorante
Il ristorante, nella nostra app
Ogni concetto diventa una tabella
Ogni riga è un elemento con il suo id. Un collegamento è l’id di una riga di un’altra tabella.
L’API è il menù dell’app
Quando premete un bottone
Dodici componenti in quattro giri
Cosa chiediamo all’agente
Mettiamo l’app online: salva il codice su GitHub, poi pubblica il database, l’API e l’app nei progetti già collegati.Non copiare online i dati di esempio.Alla fine dammi l’URL pubblico.
Mentre l’agente lavora
Locale è la vostra dispensa, online è un negozio per strada
localhost:5173Esiste solo sul vostro computer
Lo spegnete, l’app si spegne
ixd-live.vercel.appUn computer sempre acceso
Raggiungibile da tutti
Dal vostro computer a un indirizzo per tutti
Dodici componenti in quattro giri
Cosa chiediamo all’agente
Aggiungi il login con email e password e collega ciò che si pubblica all’account di chi lo crea.Aggiungi la possibilità di cancellare.Regole: {chi può fare cosa}Controlla le regole sul server; nella UI mostra le azioni solo a chi può farle.Cancella quello che è stato pubblicato prima del login. Poi rifai il deploy.
Mentre l’agente lavora
Prima chi sei, poi cosa puoi fare
Al cancello mostrate il documento
nell’app: il login
Il braccialetto dice dove entrate
nell’app: i permessi sulle procedure
La UI nasconde, il server decide
“Modifica” c’è solo su quello che avete pubblicato voi
modifica(concerto di Elodie)L’app è completa
Ci sarebbe molto altro di cui parlare
Vorrei però lasciarvi con due suggerimenti
Siate curiosi
“L’AI non è curiosa, voi sì”
“Se non siete curiosi, lasciate perdere”
Siate critici
“L’AI può fare tutto per noi: leggere le nostre email, scrivere report, disegnare grafici. Ma cosa succede se inizia a pensare per noi?”
Se l’AI pensa per noi, cosa siamo?
Grazie per l’attenzione
Avete domande?
Gabriele FilaferroHybrid IxD · Università Iuav di Venezia
Resta solo in questo browser. La chiamata vera parte solo con il file aperto fuori da claude.ai: lì il ragionamento si spegne davvero (thinking disabled) e quello acceso si vede. Su claude.ai le demo sono sempre simulate.
Ultima demo: nessuna