Lovable: Prompt Engineering e Knowledge Files

Nel nostro percorso con Lovable.dev è il momento di affinare la comunicazione con l'intelligenza artificiale trattandola come un partner di sviluppo. Il prompt engineering non è solo una tecnica ma un'arte che ci permette di ottenere risposte precise e funzionali dall'AI. In questa lezione analizzeremo come progettare prompt efficaci, come utilizzare al meglio i Knowledge Files per dare contesto ai nostri progetti, e come personalizzare le risposte dell’AI in base ai nostri obiettivi, migliorando progressivamente l’interazione grazie a un approccio iterativo e ragionato.

Comprendere come pensa l'AI di Lovable

L'AI di Lovable non possiede intuizione o comprensione umana. Elabora risposte basandosi sui dati forniti. Per ottenere risultati coerenti, è fondamentale strutturare i prompt in sezioni chiare:

• Contesto: fornire informazioni dettagliate sul progetto.
• Compito: specificare l'obiettivo da raggiungere.
• Linee guida: indicare preferenze o requisiti specifici.
• Vincoli: definire limiti o restrizioni.

Ad esempio, invece di scrivere "Crea una pagina di login", è più efficace:

Crea una pagina di login utilizzando React, con autenticazione email/password e gestione JWT, integrata con Supabase.

Personalizzazione attraverso i Knowledge Files

I Knowledge Files sono il cuore del nostro progetto su Lovable. Contengono informazioni cruciali come la visione del prodotto, i percorsi utente, le funzionalità chiave e le linee guida di design. Questi file vengono inviati con ogni prompt, fornendo all'AI un contesto completo.

Abbiamo imparato presto, lavorando in team o su progetti articolati, quanto sia essenziale avere una fonte di verità condivisa. I Knowledge Files svolgono esattamente questo ruolo. Al loro interno possiamo racchiudere tutto ciò che caratterizza il nostro prodotto. Dalla vision generale alla user journey, dall’architettura tecnica alle preferenze stilistiche.

Ogni volta che creiamo o aggiorniamo una di queste sezioni, l’AI ne tiene conto nei prompt futuri. È come se stessimo istruendo un collega che non dimentica nulla ma che ha bisogno di indicazioni chiare e strutturate per dare il meglio. E ogni file ben scritto che aggiungiamo è un investimento che ripaga in efficacia, velocità e coerenza lungo tutto lo sviluppo.

Possiamo generarli automaticamente in modalità Chat con comandi come:

Genera la knowledge base per il mio progetto basandoti sulle funzionalità già implementate.

Mantenere aggiornati i Knowledge Files garantisce coerenza e precisione nelle risposte dell'AI.

Una delle differenze fondamentali tra l’utilizzo di Lovable.dev e altri strumenti basati su AI è che qui le Knowledge Files vengono inviate automaticamente come contesto ad ogni prompt. Questo significa che quando chiediamo, ad esempio, di generare un’interfaccia o un endpoint, l’AI sa già a chi ci rivolgiamo, come funziona la nostra architettura, quali tecnologie stiamo usando e qual è il tono di voce del prodotto.

Non dobbiamo ripetere tutto ogni volta. Non è necessario spiegare ogni singolo dettaglio. Se è scritto in un Knowledge File, Lovable se ne ricorderà. Questo ci permette di concentrarci sulle parti nuove o specifiche della richiesta, risparmiando tempo e ottenendo risultati più accurati. È come avere un assistente che ha studiato a fondo il nostro progetto e si aggiorna costantemente.

Visualizziamo un Knowledge File con Lovable

Riprendiamo il nostro progetto della calcolatrice generato nella lezione precedente. Supponiamo di voler visualizzare il Knowledge File di questa applicazione. Quindi, nel prompt in basso a sinistra del nostro editor (come si vede in figura), scriviamo:

Genera la knowledge base per il mio progetto basandoti sulle funzionalità già implementate.

La piattaforma ci risponderà con un Knowledge File che racchiuderà tutto quello che riguarda la nostra applicazione. Il Knowledge file è suddiviso in sezioni e vediamo come all'inizio viene presentata una panoramica generale del progetto, spiegando che si tratta di una calcolatrice elegante e funzionale. Pensata con uno stile minimale ma curato nei dettagli e che fa uso di un set di strumenti moderno e performante.

Le tecnologie usate sono elencate con precisione: React per la struttura dei componenti, TypeScript per la sicurezza sui tipi, Tailwind CSS per lo stile, Vite come strumento di build veloce e moderno, e Shadcn/UI per i componenti dell’interfaccia utente.

Segue una sezione che descrive l’architettura del progetto: il codice è ben organizzato in cartelle come components, pages e App.tsx, con ogni componente che ha una responsabilità precisa. La Calculator.tsx gestisce la logica della calcolatrice, CalculatorButton.tsx è un pulsante riutilizzabile per tutti i tasti, mentre CalculatorDisplay.tsx si occupa solo di mostrare i numeri e i risultati.

La parte centrale del Knowledge file riguarda le funzionalità già implementate. Sono presenti tutte le operazioni matematiche di base: somma, sottrazione, moltiplicazione, divisione – con particolare attenzione alla gestione di casi problematici come la divisione per zero. Ci sono anche funzioni utili come il reset completo (AC), il tasto backspace (⌫), la possibilità di cambiare il segno a un numero (±) e l’inserimento di decimali.

Gestione dello stato dell'applicazione e interfaccia utente

Un’altra parte importante riguarda la gestione dello stato dell’applicazione, descritta in modo molto preciso. La calcolatrice tiene traccia del numero visualizzato, di un eventuale valore precedente, dell’operazione in corso e se deve attendere un nuovo input. Tutto questo è gestito con gli useState di React, senza l’uso di librerie esterne per lo stato, quindi mantenendo la semplicità.

Poi si passa a descrivere l’interfaccia utente che è ben pensata e gradevole alla vista. Sfondo nero con un gradiente elegante, pulsanti rotondi che cambiano colore a seconda della funzione (utility, numeri o operatori), e una griglia ordinata che segue lo stile delle calcolatrici tradizionali, incluso il pulsante zero che occupa due colonne. Viene sottolineata l’attenzione per il design responsivo e accessibile, con animazioni e gestione del focus via tastiera.

Logica di calcolo, display ed estensioni future

Il Knowledge file continua descrivendo la logica di calcolo, spiegando in modo chiaro come funziona il flusso delle operazioni. Prima si inserisce un numero, poi si sceglie un operatore, si inserisce il secondo numero, e infine si calcola il risultato con il tasto =. L’output può poi essere usato per ulteriori operazioni senza dover ripartire da zero. Sono gestiti anche i numeri con più cifre, i decimali, e viene evitato l’inserimento di errori logici, come due punti decimali nello stesso numero.

Viene trattato anche il comportamento del display, che ha un limite di caratteri per evitare overflow visivi. Esso trasforma automaticamente i numeri troppo lunghi in notazione scientifica. Viene poi assicurato il supporto completo per i numeri decimali, evitando approssimazioni o problemi comuni.

Un aspetto interessante è la presenza di componenti riutilizzabili ben progettati. Il pulsante della calcolatrice (CalculatorButton) è altamente configurabile e include animazioni e supporto all’accessibilità. Il display (CalculatorDisplay) si occupa solo della formattazione dei numeri, gestendo bene i casi limite. Il componente principale (Calculator) coordina tutto il comportamento logico, garantendo che i vari pezzi lavorino insieme in modo fluido.

Infine, c’è una sezione dedicata a possibili estensioni future del progetto. Si immagina l’aggiunta di operazioni più avanzate come funzioni trigonometriche o logaritmiche, una memoria per salvare e recuperare valori, una cronologia delle operazioni eseguite, una modalità per programmatori (binario, esadecimale) e conversioni di unità. Anche l’interfaccia potrebbe essere migliorata con temi personalizzabili, supporto tastiera più avanzato e una modalità orizzontale ottimizzata per dispositivi mobile.

Il Knowledge file si conclude con una nota sulle best practices seguite. L’uso di TypeScript per la sicurezza dei tipi, la modularizzazione del codice in componenti riutilizzabili, l’ottimizzazione delle performance con React hooks ben scritti e Vite e l’attenzione all’accessibilità.

Il Knowledge File fornisce quindi un quadro completo, tecnico ma leggibile, di come è strutturata e costruita la calcolatrice, lasciando anche spazio alla crescita futura. È un perfetto esempio di documentazione chiara, utile sia per chi ha sviluppato l'app sia per chi dovrà lavorarci successivamente o collaborare.

Conclusioni

Avere questa knowledge ha per noi uno scopo preciso e strategico: documentare il progetto in modo chiaro, accessibile e duraturo. Non si tratta solo di una guida tecnica ma di una base condivisa di conoscenza che ci permette di collaborare meglio, di mantenere il codice nel tempo e di facilitare l’ingresso di nuovi sviluppatori o contributori nel team.

Scrivendo e mantenendo knowledge file ci assicuriamo che tutte le scelte fatte – dalle tecnologie utilizzate all’architettura, fino alla logica delle funzionalità – siano comprensibili e tracciabili.

Quando ci ritroviamo a dover correggere un bug, migliorare l’interfaccia, aggiungere nuove funzioni o semplicemente riprendere il lavoro dopo qualche settimana, avere questa documentazione ci fa risparmiare tempo e riduce gli errori.