Il Kit: navigazione, anteprime e aggiunta di un modulo

L'Explorer ha esattamente tre livelli, e ognuno vive nell'indirizzo della pagina, non solo nello stato del componente: la griglia delle categorie (/projects/kit o /projects/<id>/kit), l'elenco dei moduli di una singola categoria (con ?cat=<key>) e la pagina di dettaglio completa di un modulo (con &module=<id>). Così il pulsante Indietro del browser funziona sempre nel modo giusto, e la pagina di dettaglio di un modulo specifico è un link reale che si può condividere: invia direttamente a qualcuno "ecco esattamente cosa ottieni con il Modulo di richiesta preventivo o stima" invece di spiegargli dove cliccare. Esc torna indietro di un livello alla volta, come Indietro.

Aperto dall'interno di un progetto (/projects/<id>/kit), la pagina sa quale progetto stai guardando, quindi può mostrare ciò che è già presente e permetterti di aggiungere direttamente lì. Aperto da solo (/projects/kit, raggiunto dal link della scheda Kit o direttamente), presenta gli stessi tre livelli senza nulla di specifico per un progetto: utile per esplorare prima di decidere cosa creare, o per mostrare a qualcuno il catalogo senza aprire un progetto specifico.

In cima alla griglia delle categorie, lo stesso interruttore a due opzioni presente ovunque in aiKit divide l'intero catalogo: Kit del sito include sezioni e funzioni che diventano parte del sito web o dell'app stessa (pagine, moduli, gallerie, negozio, prenotazioni, SEO); Kit di strumenti aziendali include strumenti che funzionano accanto al progetto anziché al suo interno (automazione marketing, fatturazione, CRM, strumenti per il personale, report). Ogni riquadro di categoria mostra quanti moduli contiene e un badge "N pronti ora" ogni volta che almeno uno di essi è un modulo Pronto ora (vedi sotto).

La casella di ricerca sopra le categorie cerca nel nome o nella descrizione dei moduli in TUTTO il catalogo contemporaneamente, sia nel Kit del sito sia nel Kit di strumenti aziendali, indipendentemente dall'interruttore selezionato: quindi cercando "fattura" trovi il modulo anche mentre stai guardando il Kit del sito.

Aperto dall'interno di un progetto, e solo quando non stai cercando, sopra la griglia delle categorie compare una riga "Consigliati per questo progetto" quando aiKit ha suggerimenti reali: regole semplici, non basate sull'IA, abbinate al tipo di progetto (un sito web riceve un modulo preventivo, un modulo di contatto, una vetrina di recensioni, SEO locale e pagine FAQ; un negozio online riceve carrello e cassa, recupero dei carrelli abbandonati e recensioni dei prodotti; e così via per landing page, app, sistemi di amministrazione, dashboard, portali clienti, blog e progetti di automazione marketing), più alcune corrispondenze per parole chiave nel testo dell'obiettivo del progetto (citare "preventivo", "prenotazione", "recensione", "email", "fattura" o "vendere online" fa comparire il modulo corrispondente con una sua motivazione in una riga). Ciò che è già nel progetto viene escluso, e l'elenco è limitato a sei voci.

Ogni modulo riporta una di due etichette di stato, e la formulazione è volutamente letterale, non linguaggio di marketing. "Pronto ora" significa che il modulo è uno dei moduli testati del motore di creazione: codice reale che mostra una pagina effettiva con dati di esempio al posto dei tuoi dati, esattamente lo stesso modello usato da un sito online. "Creato per te" significa che il modulo è una parte reale e pianificata del catalogo che però non viene ancora mostrata: sceglierlo lo aggiunge al piano e crea una voce di lavoro reale, e il modulo viene costruito nel codice del sito, con il suo marchio e le sue parole, come qualsiasi altra modifica fatta dall'IA; semplicemente non esiste ancora un modello testato pronto oggi.

Nessuno dei due stati significa "non reale" o "ipotetico". Entrambi sono cose che aiKit creerà davvero per te. L'unica differenza che l'etichetta indica è se puoi vedere subito la forma finale o se devi immaginarla dalla descrizione e da uno schema.

Aprendo una categoria vengono mostrati tutti i suoi moduli come schede: una miniatura, il nome del modulo, la sua etichetta di stato, una breve descrizione su una riga, una riga di chip "Ideale per" (fino a tre) e "In questo progetto" se è già stato aggiunto (quando sfogli dall'interno di un progetto). La miniatura di un modulo Pronto ora è una piccola anteprima dal vivo della pagina reale, caricata in modo pigro solo quando scorre nella vista, e limitata a sei miniature live contemporaneamente sullo schermo, così una categoria lunga non rallenta la pagina; quelle oltre il limite mostrano un semplice segnaposto di caricamento finché non diventano visibili. La miniatura di un modulo Creato per te è lo stesso schema illustrativo descritto di seguito, solo più piccolo, tranne per i moduli che hanno un'anteprima funzionante (vedi sotto), la cui scheda mostra il sito di esempio reale rimpicciolito, un badge "Anteprima funzionante · N varianti" e un pulsante "Guarda come funziona" invece di "Vedi dettagli". "Vedi dettagli" apre la pagina del modulo.

Per un modulo Pronto ora, l'anteprima è una vera iframe della pagina reale già testata, a grandezza naturale, inquadrata come una piccola finestra del browser con un selettore Desktop/Telefono che ridimensiona davvero il riquadro così puoi verificare come appare su un telefono (su un telefono vero il selettore è sostituito da una semplice etichetta «Anteprima telefono» e il riquadro si apre scorrendo fino al modulo stesso, così vedi i campi e non solo l'intestazione). Il riquadro sfuma in basso; «Apri anteprima completa» sotto di esso apre l'intera pagina in una nuova scheda, e una didascalia sotto indica l'attività di esempio i cui dati fanno da segnaposto. Aperto all'interno di un progetto, un interruttore «Mostra nei colori di questo sito» richiede di nuovo la stessa anteprima con i colori del marchio del progetto (letti direttamente dai codici #hex inseriti nelle note sul marchio del brief) e con il nome del progetto al posto dell'esempio, così vedi qualcosa di più vicino a ciò che mostrerebbe il tuo sito reale, non un esempio generico.

Per un modulo Su misura per te non c'è alcuna iframe attiva: ottieni invece lo stesso schema illustrativo della lista delle categorie, disegnato più grande, un diagramma SVG semplice a linea singola della forma del layout (i campi di un modulo, la griglia di un calendario, i riquadri di una dashboard, a seconda del tipo di schermata più adatto a quel modulo) con alcune brevi etichette tratte dai dati di anteprima del modulo stesso. Sotto c'è sempre, obbligatoriamente e senza possibilità di rimozione, una didascalia: «Illustrazione del layout. La tua versione è progettata per corrispondere al tuo sito.» È lì proprio perché lo schizzo della forma non venga mai scambiato per un'anteprima finita e in linea con il marchio.

Anteprime funzionanti (4/10/2026): un numero crescente di moduli Su misura per te salta lo schizzo e apre invece un sito di esempio completo e cliccabile, mostrato a larghezza piena sopra i dettagli. Tutti e dodici i moduli E-commerce / Negozio online aprono lo stesso negozio di ceramiche di esempio, Juniper Kiln, ciascuno sulla parte di cui il modulo si occupa: il catalogo (filtro, ordinamento, ricerca, apertura di un prodotto e scelta di smalto e dimensione, con immagine e prezzo che cambiano), il carrello e il checkout (modificare le quantità, rimuovere articoli, inserire WELCOME10, FREESHIP o GIFT-2580, stimare la consegna tramite CAP e completare l'acquisto fino a una pagina di conferma), le opzioni di pagamento (carta, Paga in 4 e pulsanti dei portafogli digitali), le tariffe di spedizione, i codici sconto e le carte regalo, le recensioni dei prodotti (filtro per stelle o foto, segnalazione come utile, scrittura di una recensione), i pacchetti e gli extra, l'IVA (cambiando lo stato di consegna, cambia la riga delle imposte), gli account clienti (accesso, riacquisto, tracciamento di un pacco, avvio di un reso), le email sugli ordini (conferma, spedito e consegnato, con una pagina di tracciamento funzionante), resi e cambi (trovare l'ordine, scegliere articoli e motivo, ottenere un'etichetta di reso) e l'inventario (una vista Proprietario in cui modificare le scorte cambia ciò che vedono gli acquirenti). Tutti e dieci i moduli Corsi online e Prodotti digitali aprono una scuola di panificazione di esempio, Rise & Crumb: riprodurre una lezione (velocità, sottotitoli), segnarla come completata, vedere riempirsi l'anello di avanzamento, fare il quiz, iscriversi dall'anteprima gratuita, vedere l'attestato, fare una domanda sotto una lezione, acquistare un download digitale, scegliere un pacchetto di corsi o spuntare un extra al checkout, e passare alla vista Proprietario per rinominare, riordinare, aggiungere o pubblicare/ritirare lezioni e stabilire quando si apre ogni settimana. Nel modulo del calendario di rilascio, una riga Anteprima orario sopra il riquadro offre Salta avanti di una settimana (e Torna a oggi), così puoi vedere le lezioni bloccate aprirsi nelle date previste.

Sopra il riquadro: una riga di scelte per ogni variante offerta dal modulo (ad esempio Layout negozio: Griglia, Elenco o In evidenza; Carrello: Carrello a scomparsa oppure Pagina carrello più Checkout: Una pagina o Passo dopo passo; Regola di rilascio: A date stabilite, Giorni dopo l'iscrizione o Dopo aver completato l'ultima lezione). Scegliendo un'opzione, il sito di esempio viene subito ridisegnato in quella variante e viene salvata nell'indirizzo della pagina (?v=…), così un link a una variante specifica può essere condiviso. Desktop e Telefono ridimensionano il riquadro in modo che il sito di esempio si riadatti come farebbe su un telefono (su un telefono vero è una semplice etichetta «Vista telefono»). Ripristina riporta il sito di esempio allo stato iniziale. Una breve riga «Cose da fare» elenca cosa cliccare per primo, e la descrizione di ogni variante scelta è sotto il riquadro. All'interno di un progetto con colori del marchio nel brief, «Mostra nei colori di questo sito» sostituisce il colore principale del sito di esempio con quello del progetto (solo quando quel colore è abbastanza scuro da mantenere leggibile il testo bianco dei pulsanti).

Nulla di un'anteprima funzionante raggiunge un server. Non c'è alcuna connessione di pagamento: il checkout è etichettato «Anteprima — non viene addebitato nulla e non viene inviato alcun ordine», il numero di carta è un esempio fisso in sola lettura e i pulsanti dei portafogli digitali (Apple Pay, Google Pay, PayPal) mostrano solo una nota. Non viene inviata alcuna email, non viene pubblicata alcuna recensione e non si salva nulla; lasciando la pagina si dimentica tutto. Le attività di esempio, i prodotti, le persone e i prezzi sono inventati. La didascalia sotto il riquadro lo dice: «Anteprima funzionante con dati di esempio per un'attività inventata. La tua versione usa i tuoi prodotti, i tuoi prezzi, le tue parole e il tuo marchio. Qui non si addebita, salva o invia nulla.» Ogni altro modulo Su misura per te mostra ancora lo schema illustrativo del layout.

• Cosa vede il visitatore — una panoramica numerata, in linguaggio semplice, di ciò che chi usa il modulo vive realmente, passo dopo passo.
• Cosa ottieni — ciò che il modulo consegna al proprietario del progetto (contatti registrati in un luogo reale, uno stato che puoi aggiornare e così via).
• Funzionalità e, solo per un modulo con varianti concrete definite nel catalogo, un insieme di schede selezionabili «Scegli la variante» proprio in questa sezione (la prima è selezionata per impostazione predefinita, contrassegnata da un piccolo segno di spunta), così una vera scelta alternativa (non solo una personalizzazione libera da digitare) si effettua qui invece di scriverla a mano.
• Perché conta — il motivo sincero per cui un'attività vorrebbe questo modulo.
• Come si personalizza (Pronto ora) o Varianti tra cui scegliere (Su misura per te) — cosa si può davvero rendere diverso.
• Ideale per — gli stessi chip dei tipi di attività della scheda, mostrati per intero.
• Come viene realizzato — una frase semplice che spiega esattamente come nasce questo modulo (una pagina testata che il motore mostra già oggi, oppure costruita nel sito dall'AI durante una creazione), con una nota se richiede un account di terze parti come pagamenti o mappe.

In fondo a tutto c'è "Aggiungi a <nome progetto>" (oppure "il tuo progetto", se stai navigando senza aver ancora scelto un progetto). Se per il modulo sono disponibili idee di personalizzazione, appaiono prima come un elenco di controllo — con l'etichetta "Personalizzazioni suggerite" per un modulo Pronto ora, oppure "Scegli le varianti che vuoi" per un modulo Realizzato per te — e selezionarne una aggiunge esattamente quella riga a ciò che viene inviato, non è solo una casella silenziosa.

Per un modulo con un'anteprima funzionante, il pannello si trova nella colonna di sinistra sotto l'anteprima e inizia con "La tua variante" — la variante scelta nelle righe di selezione dell'anteprima (ad esempio "Carrello: Pagina carrello · Checkout: Passo dopo passo"). Qualunque cosa sia visibile nell'anteprima quando premi Aggiungi viene registrata: viene salvata nel brief del progetto insieme al modulo, e la voce di lavoro riporta "Variante: …" così chi lo realizza costruisce quel layout. Un modulo che ha anche opzioni specifiche nella sezione Funzionalità chiede lì "Qual è la cosa più importante per te?", così le due scelte non si confondono.

"Cosa dovrebbe essere diverso per te?" è una nota di testo libero con lo stesso pulsante di dettatura presente ovunque in aiKit, più un pulsante "Allega una foto o un PDF" (solo immagini e PDF, fino a 2,5 MB ciascuno) per un logo, una foto di riferimento o una scheda tecnica — i file allegati compaiono lì come etichette rimovibili. Se il modulo ha domande reali e specifiche a cui serve rispondere prima di poterlo realizzare bene, appaiono sotto "Cosa ti chiederemo", ciascuna con il proprio campo di testo facoltativo, così puoi rispondere in anticipo invece di aspettare di essere interpellato più tardi.

"Aggiungi al piano" è sempre disponibile una volta che sei in un progetto reale: registra la scelta nel brief del progetto (lo stesso piano che leggono la schermata Piano del sito e la pagina del progetto) e crea una vera voce di lavoro visibile al team nella scheda Feedback, contrassegnata come "In attesa di noi", esattamente come qualsiasi altra richiesta. "Aggiungi e crea ora" compare accanto solo quando il progetto ha già file reali da modificare — la sua prima creazione è terminata, oppure è già online; fa le stesse due cose e poi esegue immediatamente quella voce di lavoro con lo stesso editor AI usato da Correggi con AI, senza una coda separata. Se provi ad aggiungere un modulo già presente nel progetto, la richiesta viene rifiutata con un messaggio semplice "già presente in questo progetto", invece di creare un duplicato.

Una volta inviato, una conferma sostituisce i pulsanti con ciò che è effettivamente successo — il messaggio semplice "Aggiunto al piano come voce di lavoro" oppure, per una richiesta di creazione immediata, lo stato reale (avviata, oppure il motivo specifico per cui non è stato possibile, come essere in attesa di approvazione preventiva) — più due link diretti a "Apri il piano" e "Vedi richieste", così non resti mai a chiederti dove sia finito.

Su /projects/kit — con lo stesso accesso reale della dashboard dei progetti ospitati, senza bisogno di un progetto — tutto funziona esattamente allo stesso modo, fino a quando provi ad aggiungere qualcosa. Premendo "Aggiungi a un progetto" (il pulsante dice così invece di "Aggiungi al piano" quando non è caricato alcun progetto) si apre "A quale progetto aggiungerlo?", un piccolo selettore che elenca tutti i progetti del tuo account. Scegline uno e verrai indirizzato direttamente al Kit Explorer di quel progetto, con lo stesso identico modulo ancora aperto, pronto per completare l'aggiunta. Se non hai ancora alcun progetto, il selettore lo dice chiaramente e offre un link diretto "Avvia un progetto →" invece di lasciarti bloccato.