Esempi di vibe coding: 10 tipi di app reali, prompt e cosa è andato storto

Gli esempi di vibe coding più comuni sono piccole web app utili: tracker, pagine di prenotazione, strumenti interni, portali clienti, landing page, quiz, dashboard e semplici strumenti AI. Qui sotto ne trovi dieci. Per ognuno vedrai chi lo costruisce, il primo prompt, cosa va storto di solito e il prompt successivo che lo risolve.

Sono esempi compositi dei progetti che le persone portano più spesso agli AI app builder, non casi di studio di una sola persona. I prompt si possono copiare. I problemi sono quelli che tornano di continuo, ed è per questo che sono la parte più utile. Se il vibe coding per te è nuovo, comincia da cos'è il vibe coding.

1. Un tracker del budget personale

Chi lo costruisce: persone che hanno provato i fogli di calcolo e hanno rinunciato.

Primo prompt:

Crea un tracker del budget mensile. Aggiungo spese con importo, categoria (cibo, affitto, trasporti, svago, altro), data e una nota. Mostra il totale di questo mese per categoria come grafico a barre e un elenco delle spese recenti. Posso impostare un budget per categoria e vedere quanto resta.

Cosa è andato storto: il grafico contava ogni spesa mai inserita, non solo quelle del mese, quindi dal secondo mese ogni categoria sembrava sforata. Inoltre gli importi scritti con la virgola ("1,200") venivano salvati come 1.

Prompt di correzione:

Il grafico e i totali devono includere solo le spese del mese selezionato. Aggiungi un selettore del mese in alto, con il mese corrente come predefinito. Accetta anche importi scritti con virgole o spazi e salvali come numeri.

Lezione: "questo mese" è una regola. Le regole vanno dette a voce alta.

2. Una pagina di prenotazione per un piccolo salone

Chi lo costruisce: titolari di piccole attività stanchi di prenotare per telefono e per messaggio.

Primo prompt:

Crea una pagina di prenotazione per il mio salone. I clienti scelgono un servizio, una data e un orario libero, poi inseriscono nome e telefono. Ho una pagina admin privata, dietro un login, che mostra le prenotazioni per giorno.

Cosa è andato storto: due clienti hanno prenotato lo stesso slot delle 10:00 a un minuto di distanza, perché la pagina controllava la disponibilità solo al primo caricamento. Inoltre una prenotazione di 90 minuti per la tinta non bloccava gli slot successivi.

Prompt di correzione:

Quando un cliente invia una prenotazione, verifica sul server che ogni slot coperto sia ancora libero e rifiutala con "Quell'orario è appena stato prenotato" in caso contrario. Un servizio blocca tutta la sua durata, quindi una prenotazione di 90 minuti alle 10:00 blocca le 10:00, le 10:30 e le 11:00.

Lezione: tutto ciò che due persone possono fare nello stesso momento richiede un controllo lato server. Vedi come creare un'app di prenotazione per la versione completa.

3. Il menu di un ristorante con codice QR

Chi lo costruisce: titolari di bar e ristoranti che ristampano i menu troppo spesso.

Primo prompt:

Crea un sito menu per smartphone per il mio bar. Sezioni per colazione, pranzo, bevande e dolci, ogni voce con nome, prezzo, breve descrizione e tag alimentari (vegano, senza glutine). Mi serve una pagina admin per modificare le voci e segnarle come esaurite. Mostra un codice QR da stampare che rimandi al menu.

Cosa è andato storto: niente si è rotto, ma il menu era lento sul Wi-Fi del bar perché per ogni voce venivano caricate foto a dimensione piena dello smartphone.

Prompt di correzione:

Le foto del menu sono troppo pesanti. Ridimensiona le immagini caricate a una larghezza massima di 800px, comprimile e caricale in modo differito mentre il visitatore scorre.

Lezione: prova con una connessione lenta, non solo in ufficio.

4. Un tracker di attrezzature o scorte per un team

Chi lo costruisce: chi si occupa di operations e vuole sostituire un foglio di calcolo condiviso.

Primo prompt:

Crea uno strumento di inventario per il nostro team di magazzino. Gli articoli hanno nome, SKU, quantità, posizione e un livello minimo. Il personale accede e può aggiungere scorte, rimuovere scorte indicando un motivo e vedere un elenco degli articoli sotto il minimo evidenziati in rosso. Tieni uno storico di ogni modifica e di chi l'ha fatta.

Cosa è andato storto: lo storico mostrava "utente 3" invece dei nomi, e rimuovere più scorte di quelle disponibili rendeva la quantità negativa.

Prompt di correzione:

Mostra il nome della persona nello storico, non il suo ID. Non permettere una rimozione che porterebbe la quantità sotto zero; mostra invece "Ce ne sono solo 4 in magazzino".

Lezione: descrivi cosa deve essere impossibile, non solo cosa deve essere possibile. La nostra guida su come creare un'app di inventario copre il resto.

5. Un portale clienti per un freelance o uno studio

Chi lo costruisce: designer, commercialisti, consulenti e agenzie.

Primo prompt:

Crea un portale clienti. Invito i clienti via email. Ogni cliente accede e vede solo i propri progetti, file e fatture, e può lasciare commenti. Io accedo come admin e vedo tutto.

Cosa è andato storto: questo è il problema più importante dell'elenco. Le pagine mostravano a ogni cliente solo i suoi progetti, ma il server restituiva qualsiasi progetto se si cambiava il numero nella barra degli indirizzi. Cliccando in giro come un singolo cliente non lo si scopriva mai.

Prompt di correzione:

Controlla ogni route del server che restituisce progetti, file, commenti o fatture. Ognuna deve confermare che il cliente connesso sia il proprietario del record e restituire "non trovato" in caso contrario. Poi provalo: accedi come cliente A e prova ad aprire il progetto del cliente B dal suo ID.

Lezione: nascondere qualcosa sullo schermo non significa proteggerlo. Approfondimento in il vibe coding è sicuro?.

6. Una pagina di lancio con lista d'attesa

Chi lo costruisce: fondatori che testano un'idea prima di realizzarla.

Primo prompt:

Crea una landing page per un'app che aiuta gli insegnanti privati a pianificare le lezioni e incassare i pagamenti. Titolo principale, sottotitolo, iscrizione con email, tre vantaggi, una sezione come funziona e una FAQ. Salva le iscrizioni in un database con la data e fammele scaricare in CSV da una pagina privata.

Cosa è andato storto: nel giro di pochi giorni la lista si è riempita di iscrizioni spazzatura di bot, e la pagina non aveva titolo né descrizione, quindi i link condivisi mostravano un'anteprima vuota.

Prompt di correzione:

Aggiungi una protezione base contro i bot al modulo di iscrizione (un campo honeypot nascosto e un limite di 5 iscrizioni per IP all'ora). Aggiungi un titolo di pagina, una meta description e un'immagine per la condivisione social.

Lezione: un modulo pubblico viene trovato. Vedi come creare una pagina per la lista d'attesa.

7. Un'app di quiz per un insegnante

Chi lo costruisce: insegnanti e formatori che vogliono qualcosa di più leggero di un LMS.

Primo prompt:

Crea un'app di quiz per la mia classe. Creo quiz con domande a risposta multipla e una sola risposta corretta ciascuna. Gli studenti entrano con un codice e il loro nome di battesimo, rispondono alle domande e vedono il punteggio alla fine. Io vedo una tabella dei risultati per ogni quiz.

Cosa è andato storto: le risposte corrette venivano inviate al browser insieme alle domande, quindi uno studente curioso poteva leggerle nel sorgente della pagina. Gli studenti potevano anche reinviare finché non arrivavano al 100%.

Prompt di correzione:

Non inviare le risposte corrette al browser. Controlla le risposte sul server dopo l'invio. Consenti un solo invio per nome di studente per quiz e mostra all'insegnante se qualcuno ci riprova.

Lezione: il browser appartiene all'utente. Tutto ciò che c'è dentro può essere letto.

8. Un piccolo strumento AI

Chi lo costruisce: marketer, scrittori e fondatori che vogliono un assistente AI mirato.

Primo prompt:

Crea uno strumento che trasforma la descrizione di un prodotto in cinque post social con toni diversi (amichevole, esperto, giocoso, breve, lungo). Usa un'API di AI. Incollo la descrizione, scelgo una piattaforma e ricevo i post con i pulsanti per copiarli.

Cosa è andato storto: la prima versione chiamava il servizio AI direttamente dal browser con la chiave API dentro la pagina, dove chiunque poteva copiarla e far salire il conto.

Prompt di correzione:

Sposta la chiamata AI sul server. Conserva la chiave API come segreto, mai nel codice del frontend. Limita ogni visitatore a 20 generazioni al giorno.

Lezione: le chiavi vanno nei segreti sul server. Vedi come proteggere le chiavi API e come aggiungere funzioni AI alla tua app.

9. Un sito aziendale in arabo e inglese

Chi lo costruisce: aziende del Golfo e del più ampio mondo arabo che servono due lingue.

Primo prompt:

Crea un sito per la mia azienda di interior design in arabo e inglese, con un selettore di lingua. Pagine: home, servizi, portfolio, chi siamo e contatti. L'arabo deve essere completamente da destra a sinistra.

Cosa è andato storto: il testo arabo era allineato a destra ma il layout non era speculare: le frecce puntavano ancora dalla parte sbagliata e il menu stava dal lato sbagliato. In alcuni punti i numeri di telefono comparivano anche al contrario.

Prompt di correzione:

In arabo, rispecchia l'intero layout: imposta la direzione della pagina da destra a sinistra, metti il menu a destra, inverti le icone direzionali e mantieni numeri di telefono ed email da sinistra a destra dentro il testo arabo.

Lezione: da destra a sinistra è un layout, non un allineamento. Mythex gestisce l'arabo e gli altri layout da destra a sinistra, e puoi scrivere i prompt direttamente in arabo.

10. Un tracker che diventa un'app per smartphone

Chi lo costruisce: allenatori, palestre e gruppi di comunità i cui utenti vivono sul telefono.

Primo prompt:

Crea un diario degli allenamenti per i miei clienti di personal training. Ogni cliente accede, vede la scheda che ho assegnato per la settimana, spunta gli esercizi e registra i pesi. Io vedo i progressi di ogni cliente in un grafico.

Cosa è andato storto: la web app funzionava, ma sul telefono i pulsanti erano troppo piccoli da toccare durante l'allenamento e il grafico era illeggibile.

Prompt di correzione:

Progettala per l'uso con una mano sul telefono: aree di tocco grandi in basso sullo schermo, un esercizio per schermata con grandi pulsanti Avanti e Fatto e un semplice grafico dei progressi settimanali.

Lezione: se le persone la useranno sul telefono, progetta prima per il telefono. Su Mythex Pro, l'app pubblicata può poi diventare un'app Android per Google Play e un'app iPhone inviata a TestFlight; l'app per smartphone apre la tua app pubblicata, quindi ogni Publish la aggiorna. Vedi la pagina creatore di app mobile.

Gli schemi dietro questi esempi

In tutti e dieci, i problemi rientrano in pochi gruppi:

Nessuno di questi richiede di leggere il codice. Richiedono di testare come un utente curioso e un po' ostile, e di descrivere con precisione ciò che vedi.

Provane uno tu

Scegli l'esempio più vicino alla tua idea, copia il suo primo prompt e cambia i dettagli. Poi usa il prompt di correzione come lista di controllo prima di condividerla. La nostra guida rapida ai prompt per il vibe coding ne contiene altri 30, e come creare un'app con il vibe coding segue un progetto dall'idea all'app pubblicata. Quando sei pronto, avvialo nell'AI app builder o sfoglia i template per partire avvantaggiato.

Domande