SANA

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

_Sana
Presente

Su primer contacto con clientes era un formulario de Google. Hoy es un quiz que dibuja un vitral irrepetible para cada persona, y la plataforma completa, con pagos en línea, va en camino a su dominio.

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

SU PRIMER CONTACTO CON CLIENTES ERA UN FORMULARIO DE GOOGLE.

Sana Presente acompaña procesos de sanación energética. Para conocer a cada persona usaba un formulario de Google, y al final llegaba un correo automático y plano.

Nada de eso se parecía a la experiencia que ofrecen. El primer contacto tenía que sentirse como ellos.

La Solución

UN QUIZ QUE DIBUJA UN VITRAL ÚNICO PARA CADA PERSONA.

Cambiamos el formulario por un cuestionario en el que cada respuesta cambia en tiempo real la forma, los colores y la luz de un vitral. No hay dos iguales, y la persona se lo lleva descargado. Ya funciona en su sitio actual.

Alrededor del quiz construimos la plataforma completa —sitio, servicios con pago en línea y un panel para editar contenido—, en camino a su dominio.

“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.
Ver en vivo → sanapresente.vercel.app

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 →

o llámanos: 33 2927 0083