Come creare un CRM con l’IA

Un CRM semplice è più facile da fare bene se eviti di modellare subito ogni processo di vendita. Parti dal minimo indispensabile per consentire al team di tenere traccia delle relazioni e dei prossimi passi.

Per una prima versione, definisci:

• Utenti: solo tu, oppure un piccolo team interno
• Record principali: contatti, aziende, trattative
• Azioni: creare, modificare, cercare, filtrare, aggiungere note
• Viste: dashboard, contatti, aziende, trattative, dettaglio contatto

Scrivi cosa deve fare ogni schermata.

Un primo insieme pratico di schermate può essere questo:

• Dashboard: totali per contatti, trattative aperte, trattative in chiusura questo mese
• Contatti: tabella con nome, azienda, email, telefono, stato, data del prossimo follow-up
• Aziende: elenco di aziende con settore e referente
• Trattative: elenco in stile pipeline o semplice tabella con fase e valore
• Dettaglio record: note, attività recenti, azienda o trattativa correlata

Decidi anche cosa non serve nella versione uno. Esempi comuni sono sincronizzazione email, sincronizzazione calendario, permessi per ruoli, strumenti di importazione e reportistica oltre poche schede riepilogative.

L’IA può scrivere una buona prima bozza dell’interfaccia, ma l’app diventa più facile da migliorare se la struttura dei dati è chiara fin dall’inizio.

Per un CRM leggero, mantieni semplice lo schema:

• contacts: id, first_name, last_name, email, phone, company_id, status, next_follow_up, notes
• companies: id, name, industry, website, owner, notes
• deals: id, name, company_id, contact_id, stage, value, expected_close_date, notes

Se il CRM sarà usato da più di una persona, aggiungi l’accesso e pensa a campi di proprietà come created_by o assigned_to.

Se il CRM è solo per uso interno e non addebita costi ai clienti, probabilmente non ti servono pagamenti. Stripe serve solo se il CRM stesso richiede accesso a pagamento, fatture o un flusso di checkout.

Questo è anche il momento di scegliere tra web e mobile first. La maggior parte del lavoro su un CRM è più facile da rivedere su desktop, quindi un sito web è il punto di partenza più sensato. In Moremade, i siti web vengono generati come vero codice React + Tailwind.

Il primo prompt dovrebbe descrivere il prodotto, le schermate principali, lo stile e il comportamento. Sii abbastanza specifico da dare struttura all’app generata, ma non così dettagliato da impiegare più tempo a scrivere il prompt che a testare il risultato.

Un buon primo prompt indica:

• il tipo di app
• chi la usa
• le entità principali
• le schermate
• i campi da mostrare
• lo stile visivo
• se usare prima dati fittizi o collegare subito dati reali

Esempio di primo prompt:

Crea una semplice web app CRM interna per un piccolo team di vendita. Usa un layout pulito e professionale con sidebar a sinistra e barra di ricerca in alto. Crea schermate per Dashboard, Contatti, Aziende, Trattative e una vista Dettaglio Contatto. Usa prima dati fittizi. I contatti devono includere nome, azienda, email, telefono, stato e data del prossimo follow-up. Le aziende devono includere nome, settore, sito web e referente. Le trattative devono includere nome, azienda, contatto, fase, valore e data di chiusura prevista. Aggiungi moduli per creare e modificare i record, oltre a controlli di ricerca e filtro. Usa React e Tailwind con un’interfaccia business pratica.

In Moremade, descrivi l’app in linguaggio naturale, l’agente IA scrive il codice sorgente e puoi rivedere subito un’anteprima live.

La prima versione è di solito una bozza, non la forma finale. L’abitudine utile è cambiare una sola area alla volta: layout, colonne della tabella, moduli, navigazione o dettaglio record.

Moremade offre un’anteprima live, un ispettore visivo per indicare elementi e modificarli, e una vista del codice. Questo rende più facile perfezionare l’interfaccia senza riscrivere l’intero brief.

Usa prompt brevi e specifici. Per esempio:

• "Cambia la schermata Contatti in una tabella più densa con colonne ordinabili per nome, azienda, stato e data del prossimo follow-up. Mantieni le azioni di riga per modifica e visualizzazione."
• "Aggiungi un pannello dettaglio quando si clicca su una riga contatto. Mostra note, azienda correlata, trattative correlate e una timeline delle attività recenti con voci fittizie."
• "Trasforma la pagina Trattative in una kanban board con colonne Lead, Qualificata, Proposta, Negoziazione e Vinta. Mantieni un toggle tabella per chi preferisce la vista elenco."

Alcuni controlli pratici in questa fase:

• Le etichette sono coerenti tra le schermate?
• I moduli di creazione e modifica usano gli stessi nomi dei campi?
• Si può cercare per persona e azienda?
• Le informazioni importanti sono visibili senza aprire ogni record?
• L’app sembra uno strumento interno e non un sito di marketing?

Se qualcosa non va in un componente, chiedi quella correzione specifica invece di richiedere una ricostruzione completa.

Quando la versione con dati fittizi funziona bene, collega i dati reali. Moremade ha un connettore integrato per Supabase, che copre database, accesso e archiviazione file.

Per la maggior parte dei CRM, Supabase è il passo logico successivo perché servono record persistenti e di solito qualche forma di autenticazione.

In questa fase, chiedi:

• tabelle Supabase per contatti, aziende e trattative
• moduli collegati per creare e aggiornare i record
• pagine elenco collegate al recupero dati
• accesso base se più di una persona lo userà
• relazioni tra record, ad esempio un contatto che appartiene a un’azienda

Mantieni semplice la prima configurazione dell’autenticazione. Email/password spesso bastano per un CRM interno.

Aggiungi Stripe solo se la tua app ha davvero bisogno di pagamenti. Un CRM interno di solito non ne ha bisogno. Se stai creando un CRM rivolto ai clienti o un portale a pagamento, Moremade può collegare il checkout Stripe con i prezzi che imposti, ma non dovrebbe far parte della build predefinita se non c’è un requisito chiaro.

Anche se l’esperienza principale è su desktop, le persone apriranno comunque un CRM da telefono per controllare un numero, aggiornare una trattativa o aggiungere una nota dopo un incontro.

Esegui alcuni task realistici nell’anteprima:

• aggiungere un nuovo contatto
• cercare un’azienda
• aggiornare la fase di una trattativa
• modificare la data del prossimo follow-up
• aprire una pagina dettaglio record e aggiungere note

Su mobile, concentrati sulle basi:

• la navigazione è raggiungibile
• le tabelle restano leggibili
• le azioni chiave sono visibili senza scorrimento orizzontale, quando possibile
• i moduli sono usabili con input touch
• i campi data e i menu a tendina sono facili da toccare

Se il mobile è molto importante, chiedi all’IA di adattare il layout per schermi piccoli. Se in seguito ti serve una app mobile dedicata, Moremade può generare app React Native (Expo), ma per molti team è meglio validare prima il CRM come web app.

Quando l’app è utilizzabile, pubblicala. Moremade può pubblicare con un clic su un sottodominio gratuito yourname.moremade.ai. Nei piani a pagamento, puoi collegare un dominio personalizzato, e i domini possono anche essere acquistati dentro Moremade.

Prima della pubblicazione, controlla:

• titoli delle pagine e label di navigazione
• stati vuoti quando non ci sono contatti o trattative
• stati di errore nei moduli
• se i dati di test sono ancora visibili
• se l’accesso è richiesto per i dati privati

Errori comuni da evitare:

• Partire troppo in grande: i team spesso chiedono pipeline, report, permessi, importazioni e automazioni al primo passaggio. Costruisci prima un core pulito.
• Saltare il modello dati: se contatti e aziende non sono definiti chiaramente, l’interfaccia diventa incoerente molto in fretta.
• Usare prompt vaghi: frasi come "miglioralo" producono risultati più deboli rispetto al nome esatto della schermata e della modifica.
• Aggiungere pagamenti senza motivo: Stripe è utile quando serve, ma molti CRM non ne hanno bisogno.
• Pubblicare per errore i dati fittizi: passa ai dati reali di Supabase prima di condividere l’app internamente.

Puoi esportare in qualsiasi momento il codice sorgente completo come ZIP oppure inviarlo a GitHub, quindi non sei vincolato a ospitare l’app solo dentro Moremade.