Come creare un negozio online con l’AI

Un piccolo store funziona meglio se prima decidi le basi. L’AI può generare il codice rapidamente, ma ha comunque bisogno di un brief chiaro.

Annota:

• cosa vendi
• quanti prodotti vuoi nella versione 1
• se i clienti possono acquistare direttamente o solo inviare una richiesta
• quali pagine ti servono
• quali informazioni deve avere ogni prodotto

Per un negozio semplice, la prima versione di solito richiede:

• una home page
• una pagina shop o catalogo
• una pagina dettaglio prodotto
• una pagina carrello o un pulsante di checkout
• una pagina chi siamo o contatti

Decidi anche come gestire i dati dei prodotti. Se hai solo pochi prodotti, puoi iniziare con contenuti prodotto hardcoded nel sito. Se in seguito vuoi gestire prodotti, account cliente o dati degli ordini, allora un database diventa importante.

Mantieni il primo build molto mirato. Tre-sei prodotti bastano per dimostrare il flusso.

In Moremade, descrivi il sito in linguaggio naturale e l’agente AI scrive il codice React e Tailwind. Poi ottieni un’anteprima live e puoi continuare a modificare il sito via chat.

Il primo prompt dovrebbe coprire struttura, stile e interazioni principali. Sii specifico su ciò che deve esistere nella pagina, ma evita di definire ogni singolo pixel.

Un buon primo prompt include:

• il tipo di store
• le pagine da generare
• i campi prodotto da mostrare
• lo stile del layout
• il comportamento del checkout
• eventuali vincoli di tono del brand o dei contenuti

Esempio:

Crea un piccolo negozio online per un brand di candele artigianali. Crea una home page, una pagina shop, una pagina dettaglio prodotto, una pagina carrello e una pagina contatti. Usa un layout minimale e pulito con colori caldi e neutri e card prodotto chiare. Aggiungi sei prodotti di esempio con nome, prezzo, breve descrizione, note olfattive e immagini prodotto come segnaposto. La pagina prodotto deve mostrare immagini, descrizione, ingredienti e un pulsante aggiungi al carrello. Il carrello deve permettere di cambiare la quantità e vedere il subtotale. Rendi il sito responsive e facile da usare su mobile.

Dopo il primo build, usa l’anteprima live come strumento di editing. Non ripartire da zero a meno che la struttura sia completamente sbagliata. Di solito è meglio fare richieste piccole e dirette.

In Moremade, puoi chattare le modifiche, usare l’inspector visivo per indicare un elemento e modificarlo, e controllare la vista del codice se vuoi vedere cosa è cambiato.

I prompt di follow-up efficaci sono specifici e circoscritti. Chiedi un miglioramento alla volta.

Esempi:

• "Cambia la griglia prodotti in 3 colonne su desktop e 2 su tablet. Rendi le card prodotto tutte della stessa altezza e mantieni il pulsante aggiungi al carrello fissato in basso."
• "Nella pagina prodotto, sposta le note olfattive sopra gli ingredienti, aggiungi una piccola nota di spedizione sotto il pulsante aggiungi al carrello e rendi l’immagine principale più grande su desktop."
• "Semplifica l’hero della home page. Usa un titolo più breve, una sola frase di supporto e un pulsante principale che porti alla pagina shop."

Questa fase è quella che determina gran parte della qualità. Controlla spaziatura, gerarchia dei prodotti, etichette dei pulsanti, stati vuoti e chiarezza del flusso carrello.

Non tutte le prime versioni hanno bisogno di un backend completo.

Se vuoi solo uno shop in stile vetrina o una demo cliccabile, puoi tenere i prodotti nel codice front-end e fermarti lì. Se vuoi che i clienti paghino, aggiungi Stripe. Se hai bisogno di accesso, dati utente salvati o record prodotto archiviati, aggiungi Supabase.

Moremade ha connettori integrati per entrambi.

Usa Stripe quando ti serve:

• checkout con prezzi reali impostati da te
• un flusso di pagamento semplice per un catalogo piccolo

Usa Supabase quando ti serve:

• accesso cliente
• un database per prodotti o ordini
• archiviazione file

Per molti piccoli store, Stripe è la prima integrazione reale da aggiungere. Un prompt di follow-up pratico sarebbe:

• "Collega il checkout a Stripe usando i prezzi dei prodotti mostrati sul sito. Mantieni la pagina carrello, mostra il riepilogo ordine prima del checkout e rendi chiari i pulsanti di checkout su mobile."

Se in seguito ti servono account cliente o dati legati all’inventario, è un buon momento per introdurre Supabase invece di forzarlo nella versione 1.

La maggior parte dei piccoli store viene valutata prima su mobile, anche se hai progettato su desktop.

Controlla con attenzione queste parti:

• altezza dell’hero della home page e visibilità del pulsante
• leggibilità delle card prodotto
• ritaglio delle immagini nelle pagine prodotto
• controlli quantità del carrello
• posizionamento del pulsante checkout
• campi del form e aree toccabili

Chiedi correzioni in linguaggio semplice. Per esempio:

• "Rendi il menu mobile più semplice con aree touch più grandi e mantieni visibile l’icona del carrello nell’header."
• "Su telefoni, impila l’immagine prodotto sopra i dettagli prodotto e riduci leggermente il padding laterale."

Se qualcosa sembra fuori posto ma non riesci a descriverlo bene, usa prima l’inspector visivo per indicare l’elemento, poi richiedi la modifica.

Quando il sito è corretto, pubblicalo.

Moremade può pubblicare con un solo clic su un sottodominio gratuito yourname.moremade.ai. Nei piani a pagamento puoi collegare un dominio personalizzato. I domini possono anche essere acquistati direttamente dentro Moremade.

Un percorso di lancio semplice è:

• pubblica sul sottodominio gratuito per la revisione
• testa link, flusso carrello e checkout
• collega il dominio reale quando lo store è pronto

Se vuoi conservare una copia fuori dalla piattaforma, puoi esportare in qualsiasi momento l’intero sorgente come ZIP oppure inviarlo a GitHub. I siti sono codice reale React e Tailwind, quindi non sei vincolato a un formato proprietario.

Il principale errore è chiedere all’AI di costruire troppo, troppo presto.

Evita questi errori:

• iniziare con 20 funzionalità invece di un catalogo semplice e checkout
• scrivere un prompt vago come "fammi un negozio online" senza dettagli su prodotti o pagine
• aggiungere l’accesso prima di sapere perché i clienti ne hanno bisogno
• mescolare più direzioni di design nella stessa richiesta
• saltare i test mobile fino alla fine
• cambiare struttura e stile nello stesso prompt quando stai risolvendo un problema

Un approccio migliore è costruire a strati:

1. Genera la struttura base dello store.
2. Correggi layout e contenuti.
3. Aggiungi Stripe se i clienti devono pagare subito.
4. Aggiungi Supabase solo se ti servono dati salvati o accesso.
5. Pubblica, testa e poi iteri.

Questo approccio mantiene il progetto comprensibile e evita di spendere Build Units in riscritture evitabili.