SANA

_03 · Desarrollo de sitio web con pagos en línea

_Sana
Presente

Una plataforma completa de bienestar: sitio, catálogo de servicios con pago en línea, CMS propio — y un quiz que dibuja un vitral irrepetible para cada persona.

7 Días

Quiz generativo de energía — de idea a live

_Velocidad · Bienestar MX

SVG Generativo

Vitral único e irrepetible por cada resultado

_Arte computacional · Visual

Zero deps

Vanilla JS · CSS puro · Single HTML file

_Embed en WordPress · Producción ↗

3_
Flujos de pago Stripe · Calendly · Virtual · Presencial
4_
Páginas de servicio administrables con CMS
Vitrales únicos · Todo generativo, 0kb de imágenes

El Problema

EL ABURRIMIENTO DE LOS FORMULARIOS GENÉRICOS. CUANDO LA EXPERIENCIA DIGITAL ARRUINA LA CONEXIÓN CON EL USUARIO.

Sana Presente ofrece procesos de sanación energética profunda altamente visuales, íntimos y transformadores. Sin embargo, su principal herramienta de diagnóstico y captación de usuarios era un frío y genérico formulario de Google lleno de botones de opción de respuesta. La desconexión emocional era total. Un usuario que llegaba buscando introspección y reconexión terminaba haciendo clics mecánicos para recibir, al final, un correo automatizado y plano.

El reto de diseño no era técnico, sino de traducción conceptual. El primer punto de contacto de la marca necesitaba una experiencia inmersiva, interactiva y de alto impacto estético que viviera verdaderamente a la altura de su filosofía y capturara al usuario desde el primer segundo.

La Solución

ARTE GENERATIVO EN TIEMPO REAL. UN VITRAL ALGORÍTMICO ÚNICO PARA CADA USUARIO.

Desarrollamos un motor de interacción visual basado en un cuestionario dinámico de 8 preguntas. En lugar de generar un PDF estático al final, cada respuesta modifica algorítmicamente y en tiempo real la geometría, la paleta de colores, la densidad del mandala y la refracción de luz de un vitral digital SVG. No existen dos resultados iguales. El usuario interactúa directamente con su propio estado energético, obteniendo un símbolo digital único y descargable para compartir o conservar.

Para lograr una carga instantánea, ejecutamos el proyecto bajo una arquitectura de alto rendimiento: programamos el generador matemático en Vanilla JS puro, con cero frameworks de renderizado y cero imágenes pre-cargadas. El resultado es una pieza de software ultraligera, rápida y perfectamente embebible de forma nativa en su plataforma WordPress actual. Ingeniería web que transforma datos abstractos en una experiencia visual memorable.

“No es un test. Es un espejo que se construye mientras respondes.”

— Concepto central de _Sana Presente Quiz

JS
Vanilla JS
SVG Gen
CSS Puro
HTML File
WordPress
Vercel
Canvas API
0 DEPS
Sin Deps

La Anatomía de la Experiencia.

color · forma · simetría · densidad
Motor Generativo Vectorial
Desarrollamos un algoritmo propietario que mapea de forma matemática las respuestas de la usuaria para traducirlas en variables visuales: paletas de color dinámicas, complejidad geométrica, simetría y densidad del mandala. Cada árbol de decisiones genera un render único e irrepetible en formato SVG.
LIVE Respuesta →
Ciclo de Retroalimentación Reactiva
Eliminamos la fricción del clásico botón de “Ver resultados”. Diseñamos una interfaz de interacción fluida donde cada respuesta modifica instantáneamente la estructura del vitral mediante transiciones CSS aceleradas por hardware, ofreciendo una experiencia inmersiva en tiempo real.
1 2 3 4 5 6 7 8 ¿Qué te da más energía esta semana? Tierra Agua Fuego Aire Peso energético por opción
Algoritmo de Diagnóstico Ponderado
Digitalizamos la metodología de diagnóstico de Sana Presente bajo un sistema de pesos y variables estructuradas. Cada una de las 8 preguntas evalúa vectores específicos de energía, alimentando de manera dinámica la matriz de diseño del motor generativo.
Descargar → .PNG Tu mandala · Artefacto personal
Exportación de Activos Digitales de Alta Fidelidad
El sistema permite procesar la representación vectorial (SVG) para generar un archivo de imagen optimizado de manera local. Las usuarias pueden descargar, guardar y compartir su mandala personalizado como un artefacto digital y símbolo de su experiencia.
WordPress · sanapresente.com iframe <iframe src="quiz.html" width="100%" height="600" frameborder ="0"/> Sin plugins · Sin config · 1 archivo
Encapsulamiento y Portabilidad Absoluta
Empaquetamos toda la lógica y la interfaz en un único archivo autónomo listo para producción. Se integra de manera limpia en cualquier sección de WordPress mediante un iframe ultraligero, garantizando cero conflictos de código con plugins existentes o estilos del sitio.
0 KB ✕ React ✕ Vue.js ✕ npm ↯ <1s load Vanilla JS puro · Rápido · Ligero
Arquitectura Zero-Dependency de Alto Rendimiento
Prescindimos por completo de frameworks pesados como React o Vue y gestores de paquetes. Desarrollado en Vanilla JS puro bajo un bundle consolidado de menos de 80 KB que carga en milisegundos, demostrando que el rendimiento y la velocidad de carga son pilares fundamentales de la experiencia de usuario.

Lo que preguntan antes de construir algo así

Las dudas reales de quien está evaluando un proyecto de este tipo — no de este proyecto. Precios y plazos vigentes a agosto de 2026.

¿Cuánto cuesta un sitio que cobre en línea?

Un sitio con catálogo de servicios, cobro en línea y CMS va de $120,000 a $280,000 MXN, a agosto de 2026. Lo que mueve el precio no es el diseño: es cuántas formas distintas de cobrar necesitas. Sana Presente tiene tres flujos —agenda externa, sesión virtual y sesión presencial— y cada uno entrega algo diferente después del pago.

¿Puedo cambiar textos, precios y fotos yo mismo?

Sí, y debe venir incluido. El contenido se administra desde un CMS sin tocar código. Un sitio donde cada cambio de precio pasa por el proveedor no es un sitio terminado, es una suscripción disfrazada.

¿Qué pasa después de que alguien paga?

Es la parte que más se subestima y donde más se rompe. Cobrar es lo fácil; lo difícil es qué recibe la persona, qué pasa si el pago se cae a la mitad, cómo se factura y qué ve el administrador. Ese flujo completo es la mitad del trabajo real de un checkout.

¿Necesito dar de alta una empresa para cobrar en línea?

Para Stripe y Mercado Pago en México necesitas RFC y una cuenta bancaria a nombre de quien recibe. Se puede como persona física con actividad empresarial. Conviene resolverlo antes de empezar el desarrollo, porque sin cuenta aprobada no se puede probar el cobro de punta a punta.

¿Se puede recomendar el servicio correcto según lo que describe la persona?

Sí, y en negocios de servicios funciona mejor que un menú largo. Alguien describe lo que le pasa y el sitio lo lleva al servicio adecuado en vez de obligarlo a elegir entre ocho opciones que no entiende. Es de las aplicaciones de IA más baratas de agregar sobre un sitio que ya existe.

¿Mis datos o los de mis clientes entran a entrenar modelos de terceros?

Es la pregunta correcta y hay que hacerla por escrito a cada proveedor. Los planes de API de pago de los principales modelos no usan tus datos para entrenar por defecto, pero eso cambia por producto y por plan. Si tu sitio maneja información sensible, esa cláusula se revisa antes de conectar nada.

¿Tu caso se parece? Está desglosado en la guía de precios de desarrollo, o cuéntanos qué necesitas en una llamada. Y las 148 preguntas del sitio están en el índice.

¿Tienes un proyecto como este?

De idea
a mercado.
90 días.

_Conocer Método →