MastroPreventivo

Il problema

Un artigiano passa le giornate in cantiere. Il preventivo lo scrive la sera, mettendo insieme foto, messaggi vocali e chat con il cliente, spesso senza nessuno che lo aiuti con le carte.

I programmi per i preventivi obbligano a compilare moduli e producono documenti tutti uguali, che non sembrano i suoi. Serviva qualcosa che partisse da come lavora già: parlare del lavoro e mandare un preventivo con la sua carta e le sue frasi.

La soluzione

MastroPreventivo impara dall'artigiano. La prima volta carichi la tua carta intestata e uno o due vecchi preventivi: l'app trova dove scrivere sulla carta e ricava testi fissi, frasi tipiche e carattere.

Poi, per ogni lavoro, racconti a voce cosa c'è da fare, oppure mandi foto, screenshot delle chat o testo. L'AI prepara cliente, oggetto, introduzione e voci, scritti come li scriveresti tu. Se manca qualcosa, ti fa qualche domanda.

I prezzi che non hai detto restano vuoti: li metti tu, e nel totale entra solo ciò che confermi. Alla fine il PDF esce sulla tua carta intestata, con numero e data, pronto da mandare al cliente con un link.

Il mio ruolo

• Ho sviluppato MastroPreventivo con l'aiuto dell'AI, usando skill e flussi di lavoro che ho creato io.
• Qui l'AI è anche dentro il prodotto, e questo ha reso il lavoro più difficile. Ho scritto le istruzioni che riceve, ho fissato il formato delle sue risposte e le controllo prima di usarle.
• Ho deciso cosa l'AI non deve fare: non inventa prezzi, non copia i dati dei clienti dai vecchi preventivi, e niente entra nel totale senza la conferma dell'artigiano.
• Ho previsto cosa succede quando l'AI non basta o non risponde: domande per i dati che mancano, la bozza che resta salva con «Riprova», un limite di richieste e il registro di ogni chiamata.
• Ho costruito la parte che impara dall'artigiano: legge carta intestata e vecchi preventivi (PDF o Word), trova lo spazio per il testo e propone i testi fissi da controllare.
• Ho fatto il PDF sul server: una volta uscito resta uguale, con numero e versioni. Ho fatto anche la pagina dove il cliente accetta o rifiuta.
• Ho disegnato il database con le regole di sicurezza: ogni artigiano vede solo i propri dati.

Stack e tempi

È costruita con Next.js e React, in TypeScript. Dati, accesso e regole di sicurezza stanno su Supabase (database PostgreSQL).

L'interfaccia usa Tailwind CSS e componenti shadcn/ui su Base UI, con Framer Motion per le animazioni; i moduli usano React Hook Form e Zod, che controlla anche le risposte dell'AI. Il PDF è generato con React-PDF; PDF.js legge carta intestata e vecchi preventivi; Tesseract.js legge il testo degli screenshot sul telefono. Serwist gestisce la parte PWA, Web Push le notifiche, Sentry gli errori. Test con Vitest e Playwright.

Il lavoro è andato per progetti, uno alla volta: prima il flusso completo, poi il PDF che non cambia più, la carta intestata come sfondo, la struttura e il tono presi dai vecchi preventivi e infine i caratteri.

Risultato

MastroPreventivo è online e il percorso completo funziona: accesso, configurazione dell'azienda, nuovo preventivo, revisione, PDF, invio e risposta del cliente.

Il video mostra la creazione di un preventivo dall'inizio alla fine, sull'app vera e con risposte dell'AI vere, non preparate prima. Per quel preventivo sono bastate 3 chiamate all'AI, e ogni risposta è arrivata in meno di 8 secondi.

Le schermate

Ecco MastroPreventivo sul telefono: cosa fa, come impara dai preventivi dell'artigiano, il prima e il dopo sulla stessa carta intestata, e il percorso dalla voce ai prezzi. Ditta, cliente e prezzi sono inventati per l'esempio. Scorri per vederle tutte, tocca un'immagine per ingrandirla.

Musica del video: "Wallpaper" di Kevin MacLeod (incompetech.com), con licenza CC BY 4.0. Il brano è stato accorciato e sfumato.