Página de precios SaaS sin código: guía paso a paso
Para hacer una página de precios SaaS sin código, decide primero qué separa un plan del siguiente y qué duda frena la compra. Zugo genera la página a partir de esa descripción en torno a un minuto, y Stripe se conecta para cobrar suscripciones de verdad desde el mismo sitio.
La página de precios es la que más se reescribe de todo un producto, y casi siempre por el mismo motivo: se diseñó la tabla antes de decidir la lógica de los planes. El orden correcto es al revés.
¿Qué separa un plan del siguiente?
Un plan se define por el eje que crece con el valor que recibe el cliente. Si eliges mal ese eje, la tabla nunca cuadra y acabas metiendo funciones sueltas para justificar la diferencia de precio.
Por volumen. Número de proyectos, de contactos, de créditos consumidos. Es el eje más fácil de entender y el más honesto, porque el cliente paga más cuando usa más.
Por equipo. Precio por persona. Encaja cuando el producto se usa en grupo y el valor crece con cada miembro que entra.
Por capacidad. Funciones avanzadas reservadas al plan superior. Funciona si esas funciones son claramente para otro tipo de cliente, y falla si parecen castigos al plan barato.
Sea cual sea el eje, escríbelo en una frase antes de generar nada: "los planes se diferencian por X". Si no puedes terminar esa frase, la página de precios todavía no se puede escribir, y ninguna herramienta lo va a arreglar por ti.
Un ejemplo concreto y verificable es el precio de Zugo: el eje es el consumo, medido en créditos. Free da 5 créditos, Pro cuesta $25 al mes con 200 créditos y Business $99 al mes. Generar cuesta 6 créditos y editar 3, así que cualquiera puede calcular por adelantado lo que va a gastar.
¿Qué elementos debe tener la página?
Una página de precios que convierte tiene siempre los mismos bloques, y cada uno resuelve una objeción concreta.
| Elemento | Objeción que resuelve | Error frecuente |
|---|---|---|
| Tres planes con nombre claro | ¿Cuál es el mío? | Cinco planes que obligan a comparar demasiado |
| Precio grande y visible | ¿Me lo puedo permitir? | Esconderlo tras "contactar con ventas" en todo |
| Qué incluye cada plan | ¿Qué me llevo? | Listas de veinte líneas iguales entre planes |
| Un plan destacado | ¿Cuál elige la gente? | Destacar el caro sin motivo, que genera rechazo |
| Cambio mensual y anual | ¿Me ato a algo? | Enseñar el anual como si fuera mensual |
| Tabla de comparación | ¿En qué se diferencian? | Filas con nombres internos del producto |
| Preguntas frecuentes | ¿Qué pasa si...? | Repetir la lista de funciones en otro formato |
| Prueba o plan gratuito | ¿Y si no me sirve? | Pedir tarjeta para algo que se anuncia gratis |
Las preguntas frecuentes son el bloque que más se descuida y el que más ventas salva. Las cuatro que aparecen siempre: qué pasa cuando se acaba el límite, cómo se cancela, si se puede cambiar de plan a mitad de mes, y qué ocurre con los datos al cancelar.
Responde esas cuatro con una frase cada una y en el mismo tono con el que responderías por correo. La ambigüedad aquí se lee como trampa.
¿Qué prompt genera la página?
El generador acierta cuando le das los planes con sus precios reales y el orden de los bloques. Escribir "haz una página de precios bonita" devuelve una plantilla genérica.
Crea una página de precios en español para [producto].
Bloques en este orden:
1. Título de una línea y un subtítulo que explique
el eje de los planes.
2. Interruptor mensual / anual, con el ahorro del anual
escrito en texto.
3. Tres tarjetas: [Free, $0], [Pro, $25/mes],
[Business, $99/mes], cada una con qué incluye en
5 líneas y su botón. Destaca [Pro] como más elegido.
4. Tabla de comparación con las diferencias reales,
escritas en lenguaje de cliente.
5. Preguntas frecuentes: qué pasa al llegar al límite,
cómo se cancela, cambio de plan, datos al cancelar.
6. Cierre: una frase y el botón principal repetido.
Tono directo, sin superlativos, precios en dólares,
legible en móvil.
La instrucción de "lenguaje de cliente" en la tabla es la que más mejora el resultado. Las filas con nombres internos, del tipo "workspaces avanzados", solo las entiende tu equipo, y quien está decidiendo el pago no pregunta: se va.
¿Cómo se conecta el cobro?
Stripe se ocupa de pagos y suscripciones, y es lo que convierte la página en algo que factura en lugar de un folleto con botones. La conexión se pide desde el propio generador, sin cablear nada a mano.
Define antes tres cosas, porque condicionan el flujo entero: si hay prueba gratuita y de cuántos días, si el cambio de plan se prorratea, y si el plan anual se cobra de una vez. Cambiar eso después implica rehacer tanto la página como los productos configurados en Stripe.
Resend cubre los correos alrededor del cobro: bienvenida, aviso antes de renovar y recibo. Ese aviso previo a la renovación anual reduce reclamaciones más que cualquier texto legal de la página.
Los detalles de la integración están en la guía de Stripe en un generador de IA. Prueba el circuito completo en modo de pruebas antes de publicar: alta, cobro, cambio de plan y cancelación, los cuatro, no solo el primero.
¿Qué hay que comprobar antes de publicar?
Cinco comprobaciones que cuestan diez minutos y evitan la mayoría de los problemas visibles.
El precio se entiende sin leer letra pequeña. Si el número grande es el anual dividido entre doce, dilo justo debajo con la misma tipografía.
El botón de cada plan lleva a lo que promete. Un fallo clásico es que los tres botones acaben en el mismo sitio.
La página se lee entera en móvil. Las tablas de comparación son lo primero que se rompe en pantallas estrechas.
Los importes coinciden con lo configurado en el cobro. Un precio en la página que no cuadra con lo que se cobra genera devoluciones y desconfianza inmediata.
El plan gratuito no pide tarjeta si dice que es gratuito. Zugo arranca cada proyecto en un entorno aislado antes de entregarlo, así que la página llega funcionando, pero la coherencia entre lo que promete y lo que hace la revisas tú.
¿Cuánto cuesta construirla?
Las cifras de la propia herramienta sirven de ejemplo. El plan gratuito da 5 créditos, suficientes para tener la página publicada y verla en el móvil antes de pagar nada.
Generar cuesta 6 créditos y editar 3. Una página de precios cabe entera en una sola página, así que la cuenta habitual es 6 créditos de generación más 3 por cada ajuste. Si la haces parte de un sitio con portada, producto y precios, se cobra como plataforma: 12 créditos por las tres primeras páginas y 3 por cada página adicional.
Como esta página se retoca a menudo, el patrón eficiente es afinar por ediciones sucesivas: "sube las preguntas frecuentes por encima de la tabla", "cambia el nombre del plan medio", "añade una fila sobre exportación de datos". El modo Hi-Fi duplica ambas cifras, 12 y 6, y aquí es de los pocos sitios donde ese gasto se justifica, porque es una página comercial que se mira con lupa.
¿Dónde se queda corto un generador de IA aquí?
Cuatro límites honestos.
No decide tu precio. Puede maquetar cualquier estructura, pero cuánto cobras y por qué depende de tu mercado, tus costes y tu competencia. Esa parte no se delega.
Las pruebas A/B no vienen incluidas. Comparar dos versiones de precios con tráfico real requiere herramientas específicas. Google Analytics se conecta y mide, pero medir no es experimentar.
Los impuestos y la facturación legal son tuyos. Qué impuesto aplicas por país y qué debe llevar una factura depende de tu situación fiscal, y un generador escribe textos plausibles, no validados.
La lógica de precios complicada llega por ediciones. Descuentos por volumen, cupones por campaña, precios por región o contratos anuales personalizados se construyen paso a paso, y en un producto complejo Zugo no sustituye a un equipo de desarrollo.
Para el caso normal, un producto con tres planes claros que necesita cobrar hoy, la página se resuelve en una tarde. Si además vas a montar el área de cliente donde entran los que pagan, la guía de panel SaaS sigue justo desde aquí. Empieza con los créditos gratuitos en zugo.dev.