MeDo

Generatore di Tabelle Prezzi con IA.

Descrivi i tuoi piani e lascia che l'IA faccia il lavoro pesante. Dai nomi dei livelli e liste di funzionalità agli switch e piani consigliati evidenziati — generato e pronto per la pubblicazione.

Tabella Prezzi
Tabella Prezzi

La tua tabella prezzi è l'ultima cosa che un acquirente legge prima di decidere

Una tabella prezzi fa più che elencare prezzi — incornicia il valore, gestisce le obiezioni e guida il visitatore verso il piano giusto. Una sezione prezzi disordinata o confusa crea paralisi decisionale e allontana acquirenti qualificati. Azzeccare il layout, la gerarchia e il copy è uno dei miglioramenti a più alto impatto che qualsiasi sito SaaS o prodotto può apportare al proprio tasso di conversione.

6 modelli

Modelli di Tabella Prezzi che puoi generare

Ogni modello è un prompt reale, non uno screenshot. Copialo in qualsiasi editor IA, oppure eseguilo in MeDo e ottieni codice React + Tailwind.

Three tierAcme

Three Cards With a Highlighted Plan

The default for a reason — three prices in one row is the most comparison a visitor will do without scrolling. It fails when all three cards look equal, because then the buyer has to decide instead of being told.

Create a three-tier pricing section with Starter, Growth and Scale as equal-width cards in one row. Raise the Growth card, give it a ring border and a Most Popular badge. Above the cards, a segmented monthly/yearly toggle that swaps the price figure in place and reveals a two-months-free chip when yearly is active; hold the card height constant so nothing reflows on switch. Each card carries a plan name, a one-line note on who it is for, the price with its per-seat per-month unit, a primary button, and six feature rows listed in the same order in every card so the eye can compare across instead of reading down. Collapse to one column on mobile with the highlighted plan first.

Prova in MeDo
Comparison gridMega

Full Feature Comparison Matrix

For products where the upgrade reason is a specific limit rather than a vibe. The horizontal scroll on mobile is what kills these — render one plan per accordion instead.

Create a pricing comparison matrix: a header row of four plan columns and a left column of feature names grouped into labelled sections such as Core, Collaboration, Security and Support. Use a filled check for included, an em dash for absent, and a short value string wherever a plan has a numeric limit rather than a boolean. Pin the header row so plan names and CTAs stay visible while the reader scrolls the feature list, and highlight the recommended column its full height. Zebra-stripe rows to keep the eye on one line. On mobile, drop the matrix entirely and render one plan per collapsible panel rather than putting a wide table in a horizontal scroller.

Prova in MeDo
Single planShipfast

One Plan, One Price Card

When there is nothing to compare, a row of three cards is theatre. One card removes the decision and makes the feature list read as a promise rather than a diff.

Create a single-plan pricing section: one centred card with a max width of about 32rem holding the plan name, a large price figure, a monthly/yearly toggle inside the card, and an everything-included feature list laid out in two columns so the card stays short enough to read without scrolling. Add a primary Get started button, a muted no-credit-card-required line directly beneath it, and a small text link to contact sales for volume pricing. Above the card, one headline naming exactly who the plan is for. Stack the feature columns and keep the toggle full-width on mobile.

Prova in MeDo
Usage basedMeter

Volume Slider With a Live Total

Metered pricing only lands if the buyer can find their own number on it. A slider that recomputes the total as it moves answers the real question — what will this cost me — without a spreadsheet.

Create a usage-based pricing section: a range slider for monthly volume with tick labels at the tier boundaries, a live total that recomputes the price and the effective unit rate as the handle moves, and a plan name that changes as the volume crosses each threshold. Below the slider, a fixed list of what is included at every tier and one line on what happens on overage. Add a primary CTA plus a secondary Talk to sales link for volumes past the top of the range. Announce the computed total in an aria-live region and support arrow-key stepping, so keyboard and screen-reader users get the same feedback as a mouse drag.

Prova in MeDo
Enterprise rowLedger

Two Self-Serve Cards Plus a Contact Band

Puts the no-price plan outside the card row, where it stops competing on price. An Enterprise card sitting next to two real numbers just reads as the expensive one.

Create a pricing section with two self-serve cards, Pro and Team, side by side with Team highlighted, followed by a full-width enterprise band beneath them. The band gets a tinted surface, a short heading, three inline value points covering SSO, audit logs and a named contact, and a Contact sales button where a price would be — so it never reads as a third card competing on price. Each card shows a monthly and yearly price with a per-seat unit, five feature rows in matching order, and a primary button. Stack all three blocks vertically on mobile with the band last.

Prova in MeDo
Audience tabsSegment

Audience Tabs Over Shared Tiers

One pricing page serving individuals, teams and education without three URLs. Worth it only if the plans genuinely differ per audience — otherwise you have added a click to reach the same table.

Create a pricing section with audience tabs above the cards — Individuals, Teams and Education — where switching a tab swaps in a different set of plan names, prices and feature lists rather than filtering rows in place. Keep the monthly/yearly toggle on the same bar as the tabs so the two controls read as one control group, and preserve the toggle state across tab switches. Use real tab semantics with a tablist, arrow-key navigation and managed focus, and reflect the active tab in the URL so a link can point straight at the Teams view. Highlight exactly one plan inside each tab.

Prova in MeDo

Come personalizzare il tuo Tabella Prezzi

Evidenzia sempre un piano consigliato

Il sovraccarico di scelta uccide le conversioni. Evidenziare visivamente un livello come "Il Più Popolare" o "Miglior Valore" con un bordo colorato, una card rialzata o un badge riduce il carico cognitivo e indirizza i visitatori verso il piano che funziona meglio per la maggior parte dei clienti — solitamente il tuo livello intermedio.

Usa un toggle di fatturazione per mostrare i risparmi annuali

Un toggle mensile/annuale con una percentuale di sconto visibile (es. "Risparmia il 20% annualmente") aumenta l'adozione del piano annuale senza nascondere i prezzi. Posiziona il toggle in modo prominente sopra le card e impostalo di default su annuale per ancorare il valore percepito più in alto.

Rendi le righe delle funzionalità scansionabili, non esaustive

Limita ogni colonna di livello a 6-8 righe delle funzionalità più importanti per i tuoi buyer persona. Usa segni di spunta e X (o testo in grigio) per le funzionalità assenti invece di omettere righe — il confronto visivo è ciò che stimola l'intenzione di upgrade.

Abbina ogni pulsante CTA a un riduttore di micro-impegno

Brevi frasi come "Nessuna carta di credito richiesta", "Cancella in qualsiasi momento" o "Prova gratuita di 14 giorni" posizionate direttamente sotto il pulsante CTA principale eliminano l'ultima esitazione prima di un clic di registrazione. Adatta il messaggio rassicurante al rischio specifico che il tuo pubblico ha più probabilità di percepire.

Chi usa il componente Tabella Prezzi

Sito prodotto SaaS

Le tabelle prezzi SaaS includono tipicamente 3 livelli, un toggle mensile/annuale, un piano intermedio evidenziato, righe di confronto funzionalità e una CTA di prova gratuita — il formato diventato lo standard de facto per il software in abbonamento.

API o strumento per sviluppatori

Le tabelle prezzi degli strumenti per sviluppatori spesso includono un livello basato sull'uso accanto a piani fissi, mostrando limiti di richieste o conteggi di posti per livello, con un'opzione gratuita o open-source prominente per abbassare la barriera per i singoli sviluppatori.

Agenzia o azienda di servizi

Le aziende di servizi usano tabelle prezzi per confezionare i deliverable in livelli a perimetro fisso — ad esempio, Starter / Professional / Custom — con un elenco chiaro dei servizi inclusi per pacchetto e una CTA "Prenota una chiamata" per il livello superiore.

Piattaforma e-learning o membership

I siti di contenuti e membership usano tabelle prezzi per separare l'accesso gratuito dai contenuti premium, spesso con una singola CTA di upgrade e social proof (conteggio membri o testimonianza) incorporata direttamente nella card della tabella.

Pattern di Tabella Prezzi per siti web diversi

Lo stesso componente tabella prezzi, calibrato sul tipo di sito su cui viene pubblicato.

01 / 06

SaaS Pricing Table

Three tiers, a yearly toggle, a highlighted middle plan and identical feature ordering across columns. The ordering is the part teams skip — if row four means something different in each card, the buyer cannot compare across and falls back to picking the cheapest.

Stili e varianti di Tabella Prezzi

Scegli la variante che si adatta al resto della pagina, poi generala.

01 / 06

Highlighted Card Row

Three cards, one elevated with a ring and a badge. The elevation is doing real work: choice overload is the failure mode of a pricing section, and a visually recommended plan is the cheapest fix available.

Tabella Prezzi in React, Next.js, Vue e Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: lo stesso tabella prezzi, sei modi per integrarlo.

01 / 06

React Pricing Table

Keep the plans in a data array and let the billing toggle be the only piece of state. Deriving the price from that one boolean is what stops the yearly and monthly copies of the table drifting apart.

src/components/PricingTable.tsx

const PLANS = [
  { name: 'Starter', monthly: 29, yearly: 290 },
  { name: 'Growth', monthly: 79, yearly: 790, featured: true },
]

export function PricingTable() {
  const [yearly, setYearly] = useState(false)
  return (
    <section>
      <BillingToggle value={yearly} onChange={setYearly} />
      {PLANS.map((p) => (
        <PlanCard key={p.name} plan={p} yearly={yearly} />
      ))}
    </section>
  )
}

Come aggiungere il tuo Tabella Prezzi a un progetto

Quattro passaggi, dalla scelta di un modello di tabella prezzi alla messa in produzione.

01~30s

Pick a Pricing Layout

Match the layout to what the buyer has to decide — three cards when plans differ by size, a comparison matrix when they differ by a specific limit, one card when there is nothing to compare.

02~10s

Copy the Prompt

Take the prompt into MeDo, or paste it into Lovable, Bolt, v0 or Cursor. Swap in your real plan names, prices and feature rows first, and keep the rows in the same order across every tier.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "default the toggle to yearly", "move Enterprise into a band below" — rather than editing class strings by hand.

04~2min

Wire the CTAs to Checkout

Point each plan button at its own checkout session or signup URL and keep the price figures in one data array, so a price change is one edit rather than three cards and a matrix.

Domande comuni su Tabella Prezzi

Cos'è un generatore di tabelle prezzi con IA?

Un generatore di tabelle prezzi con IA prende una descrizione in linguaggio naturale dei tuoi livelli di prezzo, funzionalità e obiettivi e produce un componente tabella prezzi completo e stilizzato — inclusi layout, testo, comportamento del toggle e pulsanti CTA — pronto da inserire nella tua pagina web. MeDo genera il componente completo con codice pronto per la produzione, non solo un template.

Come creo una tabella prezzi con l'IA?

Apri MeDo e descrivi la tua struttura di prezzi: quanti livelli, i loro nomi e prezzi, le funzionalità chiave per livello e quale piano evidenziare. Ad esempio: "Crea una tabella prezzi SaaS a 3 livelli con toggle mensile/annuale, evidenzia il piano intermedio come Il Più Popolare e usa segni di spunta verdi per le funzionalità incluse." MeDo genera il componente; usa prompt di follow-up per regolare colori, testo o layout.

Qual è il miglior strumento IA per generare tabelle prezzi?

MeDo è progettato appositamente per generare componenti UI individuali da prompt, incluse le tabelle prezzi. A differenza degli strumenti IA generici, MeDo comprende i pattern di conversione — piani evidenziati, interazioni con i toggle, righe di confronto funzionalità — quindi l'output segue vere best practice di design anziché produrre codice dall'aspetto generico.

Quanti livelli di prezzo dovrebbe avere una tabella prezzi SaaS?

Tre livelli è il sweet spot comprovato per la maggior parte dei prodotti SaaS: un livello di ingresso inferiore per utenti piccoli, un livello intermedio evidenziato per la maggior parte dei tuoi clienti target e un livello superiore o opzione Enterprise personalizzata per account ad alto volume. Meno di tre offre poco da confrontare; più di quattro crea paralisi decisionale.

Dovrei usare un toggle mensile/annuale nella mia pagina prezzi?

Sì — un toggle di fatturazione è uno dei modi più semplici per aumentare l'adozione del piano annuale. Mostra lo sconto annuale in modo prominente (es. "Risparmia il 20%") e imposta il toggle di default sui prezzi annuali per ancorare il valore più in alto. Il toggle segnala anche trasparenza dei prezzi, il che costruisce fiducia con gli acquirenti esitanti.

L'IA può generare il testo di una tabella prezzi oltre al codice?

Sì. MeDo genera sia il componente visuale che il testo al suo interno — nomi dei livelli, elenchi di funzionalità, etichette dei pulsanti CTA e segnali di fiducia. Puoi fornirgli il tuo prodotto, il tuo pubblico e le tue proposte di valore e scriverà testo focalizzato sulla conversione accanto al codice stilizzato. I prompt di follow-up ti permettono di regolare il tono, riscrivere livelli specifici o testare titoli alternativi.