Qué obtienes
- Una sección de precios autocontenida que funciona sin conexión y dentro de un iframe
- De dos a cuatro tarjetas de plan con insignias, funciones, cinta de plan recomendado y botones por plan
- Un conmutador Mensual / Anual con línea de ahorro y notas de facturación anual
- Temas claro y oscuro, más un verificador estático del archivo terminado
- Ilustración de pegatina recortada opcional, hecha con PopNow tras presupuestarla
Ideal para
- Apps independientes, herramientas para creadores y pequeños productos SaaS
- Planes de membresía, de curso o de boletín
- Páginas de lanzamiento que quieren un tono amable e informal
No es para
- Listas de precios empresariales con tablas comparativas largas
- Marcas con una voz formal o estrictamente minimalista
Cómo usarlo
En Claude o ChatGPT
Usa el skill de PopNow «Sección de precios dibujada a mano» (pricing-page-section) para esto: Precios para Brewlog, un diario de catas de café: Gratis, Barista 4 $/mes o 40 $/año, Roastery 12 $/mes o 120 $/año para cafeterías. Recomienda Barista.
En un agente de programación
/popnow-pricing-page-section Precios para Brewlog, un diario de catas de café: Gratis, Barista 4 $/mes o 40 $/año, Roastery 12 $/mes o 120 $/año para cafeterías. Recomienda Barista.
Luego prueba
Presupuesta una pegatina de una tetera de goteo en nuestros colores de acento y recórtala.
Conviértelo en un componente de Svelte y deja que el tema propio de la web controle el modo oscuro.
Qué tener a mano
- Nombres de los planes, precios mensuales y anuales, límites y funciones
- Qué plan recomiendas y adónde va cada botón
- Una frase honesta sobre pruebas, reembolsos o cancelación
- Opcional: una clave de API de PopNow para la ilustración de pegatina
Skills similares
Ver todos →- Web
Creador de avatares 3D
+25Crea un adorable personaje 3D de peluche en tu navegador y guárdalo como PNG transparente o como página 3D.
- Web
Mapa de calor de calendario
+25Un año de actividad diaria en una cuadrícula de calendario sombreada, con rachas, totales y acceso por teclado.
- Web
Landing page de SaaS con IA
+25Papel arena cálido y guías finas alrededor de un tablero kanban en vivo donde un asistente planifica tareas.
- Web
Sección hero animada
+25Un hero de landing page con una palabra del titular que rota suavemente, dos botones y un marco ancho para imagen.
- Web
Plantilla de web para marca de bebidas
+25Web soleada para marca de bebidas o snacks con tienda, configurador de packs, mapa de puntos de venta y pago de demostración.
- Web
Web de agencia creativa con héroe shader
+25Un héroe shader vivo en naranja tras un titular anclado abajo, navegación en píldora y casos en cuadrícula.
- Web
Landing page SaaS oscura
+25Una web de marketing oscura y llena de movimiento para un producto de software, entregada como un único archivo HTML autónomo.
- Web
Web de portafolio para diseñadores
+25Seis tarjetas inclinadas flotan alrededor de un titular que se desvanece, con una tarjeta de retrato roja.
- Web
Web de portfolio para desarrolladores
+25Una web personal oscura para ingenieros con casos de estudio, artículos, charlas, currículum y formulario de contacto.
- Web
Web SaaS de estilo editorial
+25Héroe dividido en azul marino, titular serif junto a una foto documental y un acento cobalto.
- Web
Web para diseñador freelance
+25Web atrevida de estudio de una persona que vende paquetes de precio fijo, con páginas de plan, casos de estudio y formulario de encargo.
- Web
Plantilla web de glassmorphism
+25Píldoras de cristal esmerilado sobre fondo casi negro, titular serif enorme y captura de correo.
- Web
Web de producto de hardware
+25Nombres de modelo enormes y finos sobre fotos de estudio plateadas y tarjetas de especificaciones.
- Web
Diagrama de arquitectura interactivo
+25Un diagrama de sistema offline y clicable, creado a partir de un modelo JSON validado, con la evidencia detrás de cada caja.
- Web
Héroe con cuadrícula interactiva
+25Una cuadrícula oscura de hilos finos que se inclina hacia el cursor y lanza un anillo luminoso con cada clic.
- Web
Explorador de grafos de conocimiento
+25Convierte notas de proyecto en un grafo offline y con búsqueda donde cada afirmación enlaza con su línea de origen.
- Web
Plantilla de panel de KPIs
+25Cuatro KPIs con indicadores de cambio, gráfico de líneas, desglose y barras de objetivo.
- Web
Landing page desde maquetas de IA
+25Ve tres diseños de página completa primero, elige uno y tu agente lo construye como código limpio y adaptable.
- Web
Plantilla web para revistas
+25Una web de revista con calidad de imprenta, con artículos, temas, una pequeña tienda y suscripciones, en un único archivo HTML.
- Web
Héroe con animación de partículas
+25Texto sobre papel cálido junto a una esfera de puntos que cambia con cada idea.
- Web
Web de marca personal
+25Retrato fundido con papel cálido bajo un corchete fino, con afirmaciones a cada lado.
- Web
Plantilla de web para tienda de mascotas
+25Tienda de mascotas funcional: catálogo, variantes, bolsa, planificador de recargas y pago de demo en un solo archivo HTML.
- Web
Plantilla de web para podcast
+25Web de podcast con un hero reproducible, archivo de episodios, páginas de invitados y un reproductor que sigue sonando.
- Web
Página de lanzamiento de producto cinematográfica
+25Página oscura con iluminación de cine: titular serif, escena nocturna y formulario de reserva.
- Web
Web para artículo de investigación
+25Página de proyecto para tu artículo con una Figura 1 interactiva, resultados, limitaciones y cita con un clic.
- Web
Plantilla de dashboard de administración
+25Una consola de back office funcional con gráficos, tablas, kanban y calendario, en un único archivo HTML offline.
- Web
Plantilla de landing page SaaS
+25Una web de marketing tranquila y luminosa para un producto de software, con consola de producto funcional, precios y registro.
- Web
Web de portfolio estilo scrapbook
+25Un CV online de varias páginas hecho con objetos de papel, con casos de estudio y un currículum imprimible.
- Web
Plantilla web de tienda de zapatillas
+25Una tienda completa de calzado o ropa con catálogo, páginas de producto, cesta y checkout de demostración en un único HTML.
- Web
Plantilla de web para club deportivo
+25Web de club, gimnasio o estudio con horario, páginas de entrenadores, membresías, plano de pistas y reservas en un solo archivo.
- Web
Sección de muro de testimonios
+25Un muro de citas de clientes en mampostería o con deriva lenta, que solo publica citas que las personas han autorizado.
- Web
Plantilla de web para agencia de viajes
+25Web centrada en la foto para excursiones, guías o refugios, con búsqueda de viajes, solicitudes de reserva y cuestionario de viaje.
- Web
Landing page de automatización de flujos
+25Página grafito, titular pequeño y un grafo de nodos en vivo que ejecuta, reintenta y transmite registros.
Preguntas
¿Funciona el conmutador anual sin framework?
Sí. Cada precio lleva su valor mensual y anual como atributos de datos, y unas pocas líneas de JavaScript sencillo los intercambian; borra el conmutador si solo vendes un ciclo de facturación.
¿Se cargará la fuente manuscrita en todos los dispositivos?
Usa fuentes manuscritas ya instaladas en el sistema, con alternativas, así que no se descarga nada y la sección funciona sin conexión. La letra exacta varía un poco entre macOS, Windows y Android.
¿Qué añade PopNow aquí?
Una ilustración de pegatina opcional para el margen: un dibujo en el mismo estilo de tinta y color plano, y después un recorte limpio con el eliminador de fondo de PopNow. Cada ejecución se presupuesta primero y solo empieza cuando aceptas.
¿Puedo usarla dentro de una web existente?
Sí. Todos los estilos están acotados bajo nombres de clase .skp-, y el skill reconstruye la sección como componente para React, Vue, Svelte o Astro, dejando que la página anfitriona controle el tema.
¿Sirve como plantilla de precios para SaaS?
Sí. Los planes, los precios mensuales y anuales, las filas de funciones y una insignia de más popular salen de un solo bloque de datos, como se construyen la mayoría de páginas de precios SaaS. Úsala como página de precios completa o añade la tabla de precios a una página existente.