InicioProyectosArtículosSobre mí
🇪🇸🇬🇧
▼
Tip

¿Qué es Blurgy? Nació como una extensión de navegador para ocultar datos sensibles en tiempo real durante demos comerciales y videollamadas. Pero su verdadera victoria fue cómo evolucionó: pasó de ser un proyecto de fin de semana creado con herramientas de IA a convertirse en una función nativa bautizada como "blurg" dentro del producto oficial de Clevergy.

Blurgy - Protección y anonimización de datos en tiempo real

El Problema: Ventas Sin Datos Demo Creíbles

En Clevergy nos encontrábamos con un obstáculo recurrente: mis compañeros de ventas no disponían de datos demo suficientemente buenos para presentar y vender a clientes potenciales.

En el sector energético y de software B2B, mostrar paneles vacíos o con números planos resta todo el impacto comercial. Se valoraron varias alternativas dentro de la empresa, pero ninguna llegaba a ejecutarse. El roadmap diario consumía todo el tiempo del equipo de desarrollo: no era una tarea prioritaria en la planificación oficial, aunque sí era crítica para cerrar clientes.

Ante este cuello de botella, decidí tomar la iniciativa por mi cuenta.


El Primer Intento y el Auge de las Herramientas IA

Justo en ese momento estaban empezando a surgir con fuerza herramientas como Lovable y Bolt. Movido por la curiosidad de explorar el potencial de estos entornos con modelos de lenguaje, decidí lanzarme a crear una solución.

Mi primera idea fue generar datos demo sintéticos:

  • Intenté poblar la plataforma con cuentas ficticias y consumos simulados.
  • ¿Por qué no funcionó? Los datos eran demasiado específicos, las curvas y gráficas de consumo no cuadraban con el comportamiento real de una empresa y era inviable generar el volumen necesario. Además, mantener esos datos demo actualizados y coherentes día a día era un infierno logístico inasumible.

Fue entonces cuando me hice la pregunta clave: ¿Y si en lugar de inventar datos falsos, usamos los datos reales pero ocultamos la información sensible?


Nace Blurgy: Anonimización en Tiempo Real

Con ese cambio de enfoque nació Blurgy. La premisa era sencilla: una extensión de Chrome capaz de difuminar, enmascarar u ocultar nombres, CIFs, direcciones, precios y métricas confidenciales en pantalla mientras el equipo de ventas comparte pantalla en videollamadas.

Dediqué mis tardes, noches y fines de semana a construirla:

  1. Iteración con prompts y código: Apoyándome en Cursor y asistentes de IA para definir la lógica de inyección de scripts en el DOM y la detección de selectores.
  2. Diseño de marca y recursos: Generé la identidad visual, el logotipo (nuestro simpático erizo) y las interfaces de configuración.
  3. Landing de presentación: Monté la web oficial del proyecto en alejandroramirezj.github.io/Blurgy para que cualquiera pudiera entender su funcionamiento y probar la extensión.

La extensión no solo difuminaba elementos: permitía alternar desenfoques con atajos de teclado rápidos, cambiar valores por placeholders coherentes y personalizar qué partes de la pantalla proteger sin romper la maquetación.


El Verdadero Éxito: De Extensión a Código Nativo

De lo que más orgulloso me siento en todo este proceso no es solo del código de la extensión, sino de cómo transformó el producto real.

La mayoría de mis compañeros de ventas y del equipo se descargaron Blurgy y comenzaron a usarlo en su día a día. Sin embargo, al ser una extensión externa que inyectaba estilos y scripts sobre el navegador:

  • Tardaba unos instantes en aplicar el desenfoque en cargas dinámicas.
  • Introducía una capa de código pesado que en ocasiones ralentizaba la fluidez de la interfaz.

En lugar de quedarme ahí, me senté con el desarrollador principal de frontend de Clevergy. Le mostré el impacto real que la extensión estaba teniendo en las demos de ventas y los cuellos de botella que provocaba en el cliente.

Entre los dos hicimos un análisis exhaustivo:

  • Auditoría de campos sensibles: Mapeamos exactamente qué datos representaban información confidencial en todas las pantallas de la plataforma.
  • Nace la variable "blurg": Inspirado directamente por el nombre del proyecto (el juego de palabras entre Clevergy y Blurgy), el lead frontend integró una variable y directiva llamada "blurg" en el código base del frontend.
  • Control nativo desde el Portal de Operaciones: Se implementó un comando directo en el portal interno donde se configuran las demos. Con un solo clic o atajo, la aplicación activa el modo demo y oculta automáticamente todos los campos etiquetados con blurg, sin latencia, sin plugins y con una estética perfecta.

Además, el proceso quedó estandarizado en la empresa: cada vez que el equipo desarrolla una nueva funcionalidad, los campos sensibles se marcan con la propiedad "blurg" de forma preventiva.


Conclusión: Resolver Problemas y Cerrar el Círculo

A día de hoy, el equipo de ventas utiliza este sistema a diario en prácticamente todas sus presentaciones ante clientes potenciales.

Blurgy representa la esencia de cómo entiendo la innovación en producto:

  • Detectar una fricción real que el roadmap no puede priorizar de inmediato.
  • Aprovechar las herramientas emergentes de IA para prototipar rápido y validar el valor sin esperar meses.
  • Colaborar transversalmente con ingeniería para transformar un hack útil en una solución robusta y permanente que beneficia a toda la compañía.

Enlaces del Proyecto

  • 🌐 Web Oficial y Demo de Blurgy: alejandroramirezj.github.io/Blurgy
Mis zapatillas de correr

Estas son mis zapatillas de correr. Y como esto es el footer... tenían que estar a tus pies. ¿A que están de locos? ⚡️👟

Explorar

  • Inicio
  • Proyectos
  • Artículos
  • Sobre mí
  • CV Interactivo

Creaciones

  • porfolio.recetaspati.com↗
  • recetaspati.com↗
  • Sitemap XML

Stack & Craft

  • ⚡Next.js 15 & React 19
  • 🎨Tailwind CSS
  • 🤖Cursor & Claude Code
  • ☁️Cloudflare Pages
  • 100% Indie & Craft 🛠️

© 2026 Alejandro Ramírez.Hecho con ☕, 🥐 y mucho código.

Ningún píxel fue dañado en la creación de este blog.
InicioProyectosArtículosSobre mí
🦔Producto
·🗓️2026-08-08·🕒~4 min de lectura

Blurgy: De Extensión con IA a Funcionalidad Nativa en Clevergy

Cómo solucioné la falta de datos demo para el equipo de ventas creando una extensión que anonimizaba clientes y que terminó integrada en el código del producto.

#Proyectos#Clevergy#IA#Chrome Extension#Producto#Frontend
Blurgy: De Extensión con IA a Funcionalidad Nativa en Clevergy
Tip

¿Qué es Blurgy? Nació como una extensión de navegador para ocultar datos sensibles en tiempo real durante demos comerciales y videollamadas. Pero su verdadera victoria fue cómo evolucionó: pasó de ser un proyecto de fin de semana creado con herramientas de IA a convertirse en una función nativa bautizada como "blurg" dentro del producto oficial de Clevergy.

Blurgy - Protección y anonimización de datos en tiempo real

El Problema: Ventas Sin Datos Demo Creíbles

En Clevergy nos encontrábamos con un obstáculo recurrente: mis compañeros de ventas no disponían de datos demo suficientemente buenos para presentar y vender a clientes potenciales.

En el sector energético y de software B2B, mostrar paneles vacíos o con números planos resta todo el impacto comercial. Se valoraron varias alternativas dentro de la empresa, pero ninguna llegaba a ejecutarse. El roadmap diario consumía todo el tiempo del equipo de desarrollo: no era una tarea prioritaria en la planificación oficial, aunque sí era crítica para cerrar clientes.

Ante este cuello de botella, decidí tomar la iniciativa por mi cuenta.


El Primer Intento y el Auge de las Herramientas IA

Justo en ese momento estaban empezando a surgir con fuerza herramientas como Lovable y Bolt. Movido por la curiosidad de explorar el potencial de estos entornos con modelos de lenguaje, decidí lanzarme a crear una solución.

Mi primera idea fue generar datos demo sintéticos:

  • Intenté poblar la plataforma con cuentas ficticias y consumos simulados.
  • ¿Por qué no funcionó? Los datos eran demasiado específicos, las curvas y gráficas de consumo no cuadraban con el comportamiento real de una empresa y era inviable generar el volumen necesario. Además, mantener esos datos demo actualizados y coherentes día a día era un infierno logístico inasumible.

Fue entonces cuando me hice la pregunta clave: ¿Y si en lugar de inventar datos falsos, usamos los datos reales pero ocultamos la información sensible?


Nace Blurgy: Anonimización en Tiempo Real

Con ese cambio de enfoque nació Blurgy. La premisa era sencilla: una extensión de Chrome capaz de difuminar, enmascarar u ocultar nombres, CIFs, direcciones, precios y métricas confidenciales en pantalla mientras el equipo de ventas comparte pantalla en videollamadas.

Dediqué mis tardes, noches y fines de semana a construirla:

  1. Iteración con prompts y código: Apoyándome en Cursor y asistentes de IA para definir la lógica de inyección de scripts en el DOM y la detección de selectores.
  2. Diseño de marca y recursos: Generé la identidad visual, el logotipo (nuestro simpático erizo) y las interfaces de configuración.
  3. Landing de presentación: Monté la web oficial del proyecto en alejandroramirezj.github.io/Blurgy para que cualquiera pudiera entender su funcionamiento y probar la extensión.

La extensión no solo difuminaba elementos: permitía alternar desenfoques con atajos de teclado rápidos, cambiar valores por placeholders coherentes y personalizar qué partes de la pantalla proteger sin romper la maquetación.


El Verdadero Éxito: De Extensión a Código Nativo

De lo que más orgulloso me siento en todo este proceso no es solo del código de la extensión, sino de cómo transformó el producto real.

La mayoría de mis compañeros de ventas y del equipo se descargaron Blurgy y comenzaron a usarlo en su día a día. Sin embargo, al ser una extensión externa que inyectaba estilos y scripts sobre el navegador:

  • Tardaba unos instantes en aplicar el desenfoque en cargas dinámicas.
  • Introducía una capa de código pesado que en ocasiones ralentizaba la fluidez de la interfaz.

En lugar de quedarme ahí, me senté con el desarrollador principal de frontend de Clevergy. Le mostré el impacto real que la extensión estaba teniendo en las demos de ventas y los cuellos de botella que provocaba en el cliente.

Entre los dos hicimos un análisis exhaustivo:

  • Auditoría de campos sensibles: Mapeamos exactamente qué datos representaban información confidencial en todas las pantallas de la plataforma.
  • Nace la variable "blurg": Inspirado directamente por el nombre del proyecto (el juego de palabras entre Clevergy y Blurgy), el lead frontend integró una variable y directiva llamada "blurg" en el código base del frontend.
  • Control nativo desde el Portal de Operaciones: Se implementó un comando directo en el portal interno donde se configuran las demos. Con un solo clic o atajo, la aplicación activa el modo demo y oculta automáticamente todos los campos etiquetados con blurg, sin latencia, sin plugins y con una estética perfecta.

Además, el proceso quedó estandarizado en la empresa: cada vez que el equipo desarrolla una nueva funcionalidad, los campos sensibles se marcan con la propiedad "blurg" de forma preventiva.


Conclusión: Resolver Problemas y Cerrar el Círculo

A día de hoy, el equipo de ventas utiliza este sistema a diario en prácticamente todas sus presentaciones ante clientes potenciales.

Blurgy representa la esencia de cómo entiendo la innovación en producto:

  • Detectar una fricción real que el roadmap no puede priorizar de inmediato.
  • Aprovechar las herramientas emergentes de IA para prototipar rápido y validar el valor sin esperar meses.
  • Colaborar transversalmente con ingeniería para transformar un hack útil en una solución robusta y permanente que beneficia a toda la compañía.

Enlaces del Proyecto

  • 🌐 Web Oficial y Demo de Blurgy: alejandroramirezj.github.io/Blurgy

En esta página

  1. El Problema: Ventas Sin Datos Demo Creíbles
  2. El Primer Intento y el Auge de las Herramientas IA
  3. Nace Blurgy: Anonimización en Tiempo Real
  4. El Verdadero Éxito: De Extensión a Código Nativo
  5. Conclusión: Resolver Problemas y Cerrar el Círculo
  6. Enlaces del Proyecto
← Volver a proyectos