Motor de webs de ejemplo basado en plantillas
Un único Cloudflare Worker que genera una web completa para cada sector a partir de unos pocos parámetros de la URL — todas las demos de esta biblioteca salen de él.
Objetivo técnico
Generar en menos de un segundo un concepto de web convincente y listo para el móvil, para cualquier tipo de pequeño negocio, sin un build por web, de modo que una idea de diseño pueda mostrarse como página funcional y no como maqueta estática.
Restricciones
- Cero infraestructura por demo: un único despliegue debe servir a todos los sectores.
- Rápido en móviles de gama media con 4G, porque así es como la mayoría abre un enlace compartido.
- Ningún contenido externo guardado por negocio: todo se deriva de unos pocos parámetros.
- Coste de funcionamiento cercano a cero en un plan de alojamiento gratuito.
Arquitectura
- 01
Parámetros de la URL
Clave de plantilla, nombre del negocio, ciudad y detalles opcionales.
- 02
Enrutador de plantillas
Reglas de palabras clave eligen una de las 17 plantillas por sector cuando no se indica clave.
- 03
Constructor de la web
Funciones de plantilla montan HTML, CSS y pequeños scripts de interacción.
- 04
Capas de mejora
Capas compartidas añaden el carrusel de escaparate, las acciones fijas en el móvil y nombres limpios.
- 05
Proxies en el edge
Proxies de imagen y de vídeo con licencia, con listas de permitidos, límites de tamaño y caché.
- 06
Renderizado aislado
La página se escribe en un iframe srcdoc y se sirve con noindex.
El flujo va de izquierda a derecha y de arriba abajo.
Decisiones clave
Plantillas como funciones, no como archivos
Cada sector es una función que devuelve marcado a partir de un objeto de datos. Añadir un sector significa añadir datos y una función: sin rutas nuevas ni destinos de despliegue nuevos.
Parámetros en lugar de base de datos
Una demo queda descrita por completo por su URL, así que los enlaces son reproducibles, cacheables y nunca dependen de datos personales guardados.
Enrutado por palabras clave antes que IA
Los nombres de los negocios se comparan con reglas de palabras clave ordenadas. Es determinista, explicable y gratuito; más adelante se puede añadir un paso de IA para los casos ambiguos.
Proxies en el edge con lista de permitidos
El proxy de imágenes solo acepta contenido de imagen de menos de 8 MB y bloquea direcciones privadas; el proxy de vídeo solo sirve una lista explícita de IDs de clips con licencia.
Capturas
Retos
Códigos de actividad compartidos
Los códigos oficiales de actividad los comparten oficios muy distintos (un salón de uñas y una peluquería pueden tener el mismo). Las palabras clave del nombre resultaron ser una señal mucho mejor, y el código se usa solo como recurso.
El 3D procedural no parecía premium
Una versión inicial construía salas 3D en código. Era técnicamente interesante pero parecía artificial. Vídeo real con licencia y movimiento guiado por el scroll lo sustituyó: un recordatorio de que la fidelidad gana a la ingeniosidad.
Lecciones aprendidas
- Una demo que funciona en el navegador convence más que cualquier maqueta estática.
- Reglas deterministas con alternativas claras ganan a un modelo opaco en las decisiones de enrutado.
- Cada endpoint de proxy necesita una lista de permitidos desde el primer día.