Blocks
6 blocchi per una pagina prodotto AI
Una pagina di prodotto AI deve far partire una prova, non spiegare come funziona un modello. Sei categorie, l'ordine tra chat e prezzi, i guasti dello streaming e i conteggi reali del catalogo.
In sintesi
- La chat in pagina deve mostrare lo stato di errore, non solo la risposta perfetta.
- Sei blocchi chat nel catalogo, nessuno collegato a un provider.
- Il prezzo a crediti va spiegato prima del pricing, non dentro.
Una pagina di prodotto AI deve far partire una prova, non spiegare come funziona un modello. Il catalogo indicizza 51 blocchi hero, 53 feature, 6 chat, 41 pricing, 24 faq e 27 cta, letti il 2026-11-01: sei categorie per una pagina di prodotto AI.
I conteggi sono quelli delle pagine categoria, misurati lo stesso giorno. La sproporzione utile è tra 53 feature e 6 chat: il catalogo sa mostrare una funzione, molto meno un'interazione. La chat è la parte che il visitatore vuole provare, ed è la meno coperta.
Cosa deve fare la pagina
Chi valuta un prodotto AI ha due paure: che non capisca il suo caso e che costi troppo. La pagina deve mostrare un input reale con l'output che ne esce, dire in una riga su quali dati è stato addestrato o collegato, e spiegare come si misura il consumo. Una demo che risponde a una domanda vera convince più di dieci screenshot di risposte perfette.
- Un esempio con input e output reali, non un mockup sfocato.
- Il limite dichiarato: cosa il prodotto non fa, in una riga.
- Il costo a consumo spiegato con un caso concreto.
- Una prova che parte senza carta e senza registrazione.
L'ordine dei blocchi
| Sezione | Ruolo nella pagina | Blocchi disponibili |
|---|---|---|
| hero | mostrare il risultato, non il modello | 51 |
| feature | spiegare cosa entra e cosa esce | 53 |
| chat | far provare senza registrazione | 6 |
| pricing | rendere chiaro il costo a consumo | 41 |
| faq | chiudere le obiezioni su dati e limiti | 24 |
| cta | portare alla prova | 27 |
Hero, feature, chat, pricing, faq, cta. La chat sta prima del pricing perché il visitatore deve capire cosa fa il prodotto prima di leggere quanto costa: invertire l'ordine porta a un preventivo chiesto senza aver visto nulla. Le FAQ vengono dopo il prezzo, perché le obiezioni vere nascono leggendo i numeri, non prima.
I blocchi da cui partire
Le tabelle riportano blocco, registry, file e categoria. La chat da 7 file include bolle, input e lista: è la più completa del catalogo e va letta come interfaccia, non come integrazione. Il pricing da 2 file non conosce crediti né consumo: il costo a token o a richieste lo aggiungi tu.
Blocchi hero
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Hero 01 - Agency Hero Section | Shadcn Space | 8 | hero |
| Hero 02 - Real Estate Hero Section | Shadcn Space | 6 | hero |
Blocchi feature
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Feature 01 - Feature with Testimonials | Shadcn Space | 3 | feature |
| Feature 02 - Three Columns Feature with Icons | Shadcn Space | 3 | feature |
Blocchi chat
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Chat Application | blocks | 7 | chat |
| Chat | 1st-pouf | 1 | chat |
Blocchi pricing
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Pricing 01 - Startup Pricing Plans | Shadcn Space | 2 | pricing |
| Pricing 02 - Scalable Pricing Table | Shadcn Space | 2 | pricing |
Cosa si rompe in produzione
Il primo guasto è lo streaming: il blocco chat presume una risposta che arriva intera e riceve token a pezzi, quindi l'altezza del messaggio cambia a ogni chunk e la pagina scrolla da sola. Il secondo è il costo: il pricing mostra un prezzo mensile e il prodotto fattura a consumo, quindi il cliente scopre la differenza a fine mese. Il terzo è l'input che perde il testo se arriva un errore.
- Streaming senza altezza stabile: la pagina scorre a ogni token.
- Costo a consumo nascosto dentro un prezzo mensile.
- Errore del provider mostrato come messaggio dell'assistente.
- Input svuotato dopo un errore: l'utente riscrive tutto.
curl "https://ui.eneawork.it/api/blocks/category/chat?limit=5"La risposta elenca le chat disponibili con fonte e file: leggila per capire quali hanno un componente separato per il messaggio e quali tengono tutto in un file. Con sei blocchi la scelta è breve, e la differenza che conta è dove finisce la logica di invio.
Un limite da dichiarare
Nessuno dei 6 blocchi chat è collegato a un provider: sono interfacce con messaggi di esempio. Streaming, cancellazione della richiesta, retry e conteggio dei token restano da scrivere. Chi sceglie il blocco pensando di risparmiare l'integrazione sta comprando solo la parte visibile.
Nel catalogo: blocco chat, blocco pricing e componenti. Le guide: hook in un Server Component, hydration failed e tabelle prezzi in 10 minuti.
Domande frequenti
La chat va prima o dopo il pricing?
Prima. Chi legge il prezzo senza aver visto il prodotto confronta solo cifre e lo trova caro. Chi ha appena visto una risposta utile legge la stessa cifra come il costo di una cosa che sa fare, e la domanda cambia da «quanto costa» a «quanto mi serve».
Come spiego il costo a token senza spaventare?
Con un caso concreto: «un documento di dieci pagine costa circa otto centesimi». La cifra per milione di token è corretta e illeggibile; il confronto con un'unità che il cliente conosce, come una pagina o una richiesta, rende il prezzo valutabile.
Serve una demo senza registrazione?
Sì, se il prodotto si spiega in una risposta. Un campo con tre esempi pronti fa provare in dieci secondi e riduce le iscrizioni vuote. Se ogni risposta costa denaro, metti un limite per sessione e dichiaralo accanto al campo.
Come dichiaro i limiti del modello?
Con una riga vicino alla demo, non in fondo alla pagina: cosa non fa, su quali dati risponde e quando conviene controllare a mano. Un limite scritto prima evita l'email di rimborso; lo stesso limite scritto nei termini non lo legge nessuno.
Quante sezioni regge una pagina di prodotto AI?
Sei, poi la pagina diventa un saggio. Oltre le sei, ogni sezione aggiunta sposta la prova più in basso e aumenta il tempo prima del primo input. Se hai molto da dire, usa le FAQ e lascia il resto alla documentazione.