Come creare un sito directory con l'AI

Prima di aprire il builder, scrivi la versione minima utile del sito.

Per la maggior parte dei siti directory, significa:

• una homepage che spiega la nicchia
• una pagina elenco con card
• ricerca e alcuni filtri
• una pagina dettaglio per ogni elemento
• una pagina di invio o contatto se le persone possono suggerire inserzioni
• navigazione di base e pagine footer

Definisci anche la struttura dei dati. Una directory è soprattutto una raccolta di record, quindi sii specifico sui campi. Esempi di campi:

• nome
• categoria
• città o regione
• breve descrizione
• URL del sito
• immagine
• fascia di prezzo
• tag
• email di contatto

Poi decidi chi può fare cosa:

• i visitatori possono navigare e cercare
• gli editor possono aggiungere o aggiornare le inserzioni
• le aziende possono inviare la propria scheda

Se la prima versione è solo una directory curata, potresti non aver bisogno ancora dell’accesso. Se servono account, elementi salvati o invii di inserzioni, pianificalo prima di costruire.

Il primo prompt conta perché definisce struttura, scelte tecniche e tono del progetto. In Moremade, descrivi il sito in linguaggio naturale e l’agente AI scrive il codice sorgente, poi mostra un’anteprima live.

Un buon primo prompt dovrebbe coprire:

• il tipo di directory
• le pagine necessarie
• i campi principali per ogni inserzione
• lo stile visivo
• se il contenuto è statico per ora o collegato ai dati in seguito
• eventuali requisiti mobile

Resta concreto. Non chiedere tutto insieme se stai ancora decidendo il flusso di lavoro.

Crea un sito directory in React + Tailwind per le caffetterie indipendenti a Lisbona. Includi una homepage, una pagina di navigazione con card ricercabili, filtri per quartiere e prezzo, e una pagina dettaglio per ogni locale. Ogni inserzione dovrebbe mostrare nome, foto, breve descrizione, indirizzo, orari di apertura, sito web e tag come wifi o brunch. Usa un layout editoriale pulito con navigazione semplice e una griglia di card ottimizzata per il mobile. Parti con dati di esempio. Aggiungi una pagina per inviare una caffetteria con layout a form, ma senza backend per ora.

Dopo la prima build, controlla l’anteprima live come se stessi revisionando una bozza front-end di un collega. Verifica gerarchia delle pagine, spaziatura, comportamento dei filtri, leggibilità delle card e se la pagina dettaglio mostra le informazioni giuste.

Moremade ti permette di modificare tutto tramite chat, e offre anche un ispettore visivo e una vista codice. Usa richieste brevi e specifiche invece di riscrivere tutto il brief.

Tre prompt di follow-up utili:

• "Cambia le card delle inserzioni in modo che l’immagine sia 4:3, sposta i tag sotto la descrizione e rendi il link al sito un pulsante secondario."
• "Aggiungi una barra filtri sticky nella pagina browse con ricerca, quartiere e prezzo. Su mobile, comprimi i filtri in un drawer."
• "Riscrivi l’hero della homepage e il testo introduttivo con un tono più neutro e pratico. Aggiungi una sezione che spieghi come vengono selezionati i locali."

Questa fase di solito richiede alcuni giri. Concentrati su un tipo di modifica alla volta:

• layout e navigazione
• logica dei filtri e contenuto delle card
• testo e etichette
• spaziatura mobile
• dettagli di accessibilità come testo dei pulsanti e contrasto

Se una pagina funziona bene, chiedi al builder di riutilizzare quel modello nel resto del sito.

Molte directory possono lanciarsi prima con contenuti campione o curati. Aggiungi elementi backend solo quando c’è un bisogno reale.

Usa Supabase se ti serve:

• un database per le inserzioni
• accesso admin o utente
• archiviazione file per le immagini
• inserzioni inviate dagli utenti

Casi d’esempio:

• una directory di attività locali in cui gli editor aggiungono record in un database
• una directory per membri in cui gli utenti effettuano il login per gestire il profilo
• una directory con flusso di invio

Usa Stripe se la directory fa pagare qualcosa, per esempio:

• invio a pagamento delle inserzioni
• posizionamenti sponsorizzati
• accesso in abbonamento a dati premium

Mantieni il perimetro stretto. Se la prima versione è solo navigazione pubblica, non aggiungere ancora sistemi di account o pagamenti. Moremade include connettori per Supabase e Stripe, quindi puoi integrarli quando il modello del prodotto è chiaro.

Un approccio comune è:

• costruire prima l’esperienza di navigazione pubblica
• collegare Supabase per le inserzioni e la modifica da parte degli admin
• aggiungere Stripe più avanti se esiste un flusso di invio a pagamento

I siti directory spesso sembrano accettabili su desktop e scomodi su telefono. I problemi tipici sono card troppo lunghe, filtri compressi e pagine dettaglio con troppe sezioni impilate male.

Rivedi questi punti nell’anteprima:

• larghezza della barra di ricerca e aree tocco
• se i filtri si comprimono correttamente
• ritaglio delle immagini nelle card
• leggibilità di indirizzi, tag e metadati
• spaziatura intorno a pulsanti e form
• se la pagina dettaglio mantiene in alto le informazioni più utili

Se serve, chiedi modifiche mobile precise come:

• ridurre il testo delle card a due righe
• spostare i metadati secondari sotto la piega
• trasformare i chip filtro in una riga a scorrimento orizzontale
• rendere il pulsante call-to-action a tutta larghezza su schermi piccoli

Questo è anche un buon momento per usare l’ispettore visivo, cliccare un elemento e regolarlo direttamente.

Quando struttura e contenuti sono abbastanza stabili, pubblica. Moremade può pubblicare con un clic su un sottodominio gratuito yourname.moremade.ai. Se sei su un piano a pagamento, puoi collegare un dominio personalizzato. I domini possono anche essere acquistati dentro Moremade.

Un modo pratico per lanciare è:

• pubblicare prima sul sottodominio gratuito
• testare link, form e titoli delle pagine
• condividerlo con alcune persone per un feedback
• collegare il dominio personalizzato quando il sito è pronto

Se vuoi conservare una copia fuori dalla piattaforma, esporta il sorgente completo come ZIP o invialo a GitHub. I siti sono vero codice React + Tailwind, quindi non resti bloccato in un formato proprietario.

La maggior parte dei problemi nasce da una struttura poco chiara, non dal builder in sé.

Evita questi errori:

• Troppe filtri troppo presto. Inizia con i due o tre campi che le persone usano davvero per restringere le scelte.
• Nessun modello dati. Se i campi delle inserzioni sono vaghi, ogni pagina diventa incoerente.
• Mescolare curatela e invii senza regole. Decidi se le inserzioni sono editoriali, inviate dagli utenti o entrambe.
• Aggiungere il login prima che serva. Le directory pubbliche spesso funzionano bene senza account al lancio.
• Scrivere un unico prompt enorme per ogni funzione. Costruisci prima il flusso principale, poi rifinisci in piccoli passi.
• Ignorare il mobile. La maggior parte della navigazione nelle directory avviene da telefono.
• Lanciare senza pianificare la proprietà. Esporta il codice o invialo a GitHub se vuoi un passaggio di consegne pulito in seguito.

La cronologia delle versioni aiuta. Se un giro di modifiche peggiora il sito, torna indietro e prova un’istruzione più mirata.