EcoCompliance Pro: Gestión Ambiental mediante Vibe Coding

¿ Que es el Vibe Coding?

El vibe coding es una forma de crear software usando lenguaje natural. En lugar de escribir código línea a línea, describes lo que quieres construir y un modelo de inteligencia artificial lo genera por ti. El término fue acuñado por Andrej Karpathy, cofundador de OpenAI, a principios de 2025, y rápidamente se convirtió en uno de los conceptos más debatidos en la industria tecnológica.

La palabra “vibe” no es casual, hace referencia a dejarse llevar por la intención y el flujo creativo: describir una idea, la IA la traduce a código, se prueba, y si algo falla, le explicas el error para que lo corrija, “no es necesario entender cada línea”, el valor está en la visión, no en la sintaxis.

¿Por que es importante el Vibe Coding?

Su relevancia va más allá de una tendencia tecnológica, el vibe coding está redefiniendo quién puede crear software.
Por primera vez, personas sin formación técnica como diseñadores, docentes, investigadores pueden construir herramientas digitales adaptadas a sus necesidades reales, sin depender de un equipo de desarrollo. Lo que antes tomaba semanas ahora puede materializarse en horas, transformando radicalmente la manera de validar ideas y resolver problemas.
Para los profesionales técnicos, el rol también cambia: el foco se desplaza de escribir código a diseñar soluciones, hacer las preguntas correctas y evaluar resultados, el vibe coding no elimina la necesidad de pensar bien los problemas; los hace más accesibles para todos.

2. Ventajas y Desventajas

Desventajas del Vibe Coding:

3.Competencias para el Vibe Coding

El vibe coding exitoso no requiere saber programar, pero sí exige un conjunto diferente de habilidades:
Pensamiento computacional: descomponer problemas en partes lógicas y anticipar qué necesita hacer el sistema antes de pedírselo a la IA.
Comunicación precisa: la calidad del resultado depende directamente de qué tan bien describes lo que quieres, saber escribir instrucciones claras es la habilidad más importante.
Pensamiento crítico: no aceptar el código a ciegas. Evaluar si funciona, si es seguro y si hace exactamente lo que se necesita.
Iteración rápida: probar, identificar lo que falla y ajustar, el vibe coding avanza en ciclos cortos y esa comodidad con el ensayo-error es clave.
Conceptos técnicos básicos: entender qué es una base de datos, una API o un servidor permite dar instrucciones mucho más precisas, aunque no sepas programar.

4. Herramientas y Técnicas utilizadas en la creación de la App

5. ¿Cómo se creo la App desde 0 sin Saber Código?

El proceso de crear una aplicación con vibe coding sigue una lógica iterativa. No es lineal: se avanza por ciclos de descripción, generación, prueba y refinamiento.

Paso 1 — Definición del problema y del público objetivo: Todo gran proyecto comienza con un plan claro. Antes de abrir cualquier herramienta, se debe definir qué problema específico resuelve la app. En este caso, el objetivo es simplificar el cumplimiento ambiental para PyMEs, ayudándoles a evitar multas mediante la gestión de residuos y alertas legales

Paso 2 — Selección de las herramientas Tecnológica: se eligen herramientas que permitan pasar de la idea al producto sin programar manualmente. Para esta app, el arsenal definitivo incluyó:

• Lovable: Como plataforma principal para convertir prompts en una aplicación full-stack.
• Claude 3.5 Sonnet: Como motor de razonamiento para generar código y lógica compleja.
• ChatGPT: IA generativa que realizó recomendaciones de mejora y perfeccionamiento de los prompts.
• Supabase: Para la persistencia de datos y gestión de usuarios en tiempo real.

Paso 3 — Generación del “Esqueleto” Inicial: El primer paso técnico es describir la estructura básica a la IA mediante un prompt estructurado.

• Se solicitó un sidebar oscuro con secciones para el Dashboard, Registro, Alertas y Normativa.
• Se implementó un Onboarding para que el usuario elija su sector (Alimentaria, Construcción, Química o Salud), lo que condiciona el resto de la experiencia.

5.1 Herramientas internas que optimizan los procesos:

Paso 4 — Desarrollo Incremental de la Lógica: En lugar de pedir todo a la vez para evitar errores, la app se construye por bloques.

• Formularios Dinámicos: Se configuró el registro para que los tipos de residuos cambien según el sector industrial.
• Sistema de Cumplimiento: Se inyectó la lógica de vencimiento de permisos, usando colores (rojo/naranja) según la proximidad de la fecha legal.

.Paso 5 — Robustez Técnica y Seguridad: Una vez funcional, se añaden las capas de seguridad imprescindibles para un entorno real.

• Autenticación: Se implementó un sistema de Login para proteger la información sensible de cada empresa.
• Políticas RLS: Se configuraron reglas de seguridad en la base de datos para que cada usuario solo vea sus propios registros.

Paso 6 — Refinamiento de la Experiencia de Usuario (UX): Se añadieron funciones avanzadas para convertir el prototipo en una herramienta de inteligencia de negocio.

• Selector de Rango de Fechas: Un calendario interactivo para filtrar la información del Dashboard por días, semanas o meses.
• Gestión de Sucursales: La capacidad de manejar múltiples sedes de una misma empresa de forma independiente.
• Exportación Multiformato: Generación de reportes automáticos en PDF y Excel basados en los filtros aplicados.

Paso 7 —Prueba y Validación: El paso final es probar la aplicación con datos reales (con10 registros de prueba) para analizar los gráficos que realiza, la información que exporta e ir evaluando mejoras en la App.

5.2 Diseño de la App: Caso Práctico

EcoCompliance Pro está diseñada para resolver el problema de la fragmentación de datos ambientales en PyMEs.

1. Onboarding Sectorizado: El usuario elige su industria (Alimentaria, Construcción, Química, Salud), lo que condiciona toda la lógica de la app.
2. Módulo de Registro: Permite capturar datos específicos como RME (Residuos de Manejo Especial) y residuos peligrosos con campos de cantidad y empresa recolectora.
3. Sistema de Alertas: Monitorea licencias críticas (Vertidos, Emisiones, RCD) mostrando estados visuales: naranja para vencimientos próximos (<30 días) y rojo para documentos vencidos.
4. Dashboard Inteligente: Un panel interactivo con Selector de rango de fechas que permite exportar reportes en PDF y Excel filtrados por sucursal o periodo de tiempo.

6. Promt Inicial

Diseña una aplicación web tipo SaaS moderna para gestión de cumplimiento ambiental dirigida a PYMES del sector construcción. Nombre de la app: EcoCompliance Pro. Objetivo: Ayudar a las empresas a cumplir normativas ambientales, gestionar residuos, permisos y mejorar su impacto ambiental.

Estilo visual: Minimalista, moderno, limpio; Colores principales: verde (sostenibilidad), blanco, gris claro; Inspirado en dashboard como Stripe, Notion, y plataformas SaaS modernas; Uso de tarjetas (cards), sombras suaves, bordes redondeados; Íconos simples y consistentes; Tipografía clara y profesional.

Layout: Sidebar izquierda con navegación: Dashboard, Residuos, Alertas, Cumplimiento. Reportes, Acciones, Correctivas, Documentos y Configuración. Header superior: saludo personalizado (ej: “Bienvenida, [usuario]”), selector de fechas, botón de exportar, botón principal “+ Registrar residuo”.

Contenido del Dashboard: KPIs principales (cards): Residuos registrados (kg + comparación %), Alertas activas (críticas y advertencias), Cumplimiento general (% con barra de progreso) y Total registros. Gráfica: Residuos generados por mes (línea o área) y distribución por tipo de residuo (donut).

Cumplimiento por categoría: Permisos ambientales, Gestión de residuos, Emisiones y Capacitación
(con barras de progreso). Próximas obligaciones: Lista tipo calendario (fechas, vencimientos). Impacto ambiental: CO2 evitado, Agua ahorrada y Árboles equivalentes.

Recomendaciones inteligentes: Tarjetas con acciones sugeridas (ej: reducir consumo, mejorar separación). Actividad reciente: Timeline de acciones del usuario. Extras importantes: Diseño responsive, interacciones suaves (hover, animaciones), botones claros de acción y UX enfocada en usuarios no técnicos. El diseño debe transmitir: Confianza, sostenibilidad, facilidad de uso y valor empresarial.

Prompts refinados

Agrega funcionalidades innovadoras a la plataforma EcoCompliance Pro: Sistema de recomendaciones inteligentes basado en datos (tipo asistente IA), Indicador de “riesgo de incumplimiento”, Sistema de puntuación ambiental de la empresa (score 0–100), Comparación con otras empresas del sector (benchmark), Alertas predictivas antes de incumplimientos y Insights automáticos (ej: “tu generación de residuos aumentó 20% este mes”).

En el dashboard: Mostrar insights automáticos destacados, agregar tarjetas de “sugerencias inteligentes”, Incluir visualización clara de impacto ambiental. Diseñar estas funciones de forma simple, visual y entendible.

Optimiza la experiencia de usuario (UX) para una aplicación de cumplimiento ambiental: Usuarios no expertos en temas técnicos, flujo simple para registrar residuos, mostrar información clara y accionable, evitar saturación de datos y priorizar lo importante (alertas, vencimientos, riesgos). Incluir: Onboarding simple, tooltips explicativos y indicadores visuales (colores, estados).

7. Soporte y Dificultades de la App

Construir EcoCompliance Pro fue solo el primer paso, una app conectada a bases de datos reales, con autenticación y lógica dinámica por sectores, tiene vida propia y puede seguir creciendo. El vibe coding no termina con el despliegue: es el mismo proceso iterativo el que permite mantenerla, mejorarla y escalarla en el tiempo.

Lo que se puede mejorar y expandir

La arquitectura actual de EcoCompliance Pro es una base sólida sobre la que se pueden construir nuevas capas de valor sin reescribir todo desde cero. Algunas mejoras concretas que se pueden implementar con prompts bien estructurados:

• Notificaciones automáticas: configurar alertas por correo electrónico o WhatsApp que avisen al usuario cuando una licencia está próxima a vencer, sin necesidad de entrar a la app.
• Módulo multiempresa: expandir la gestión de sucursales para que un mismo usuario administre varias empresas desde una sola cuenta, con reportes consolidados.
• Inteligencia predictiva: incorporar lógica que analice el historial de residuos y proyecte el cumplimiento futuro, ayudando a las PyMEs a anticiparse a problemas antes de que ocurran.
• Integración con organismos reguladores: conectar la app con APIs de entidades ambientales para validar en tiempo real si los permisos registrados siguen vigentes según las bases de datos oficiales.
• App móvil nativa: evolucionar la PWA actual hacia una aplicación nativa para iOS y Android, mejorando la experiencia en campo para operadores que registran residuos directamente desde planta.

El desarrollo de EcoCompliance Pro también dejó lecciones claras sobre los límites del vibe coding en proyectos reales.

Lógica condicional compleja Pedir que los formularios cambiaran automáticamente según el sector requirió prompts muy específicos. Un prompt vago como “haz que el formulario cambie según el sector” no fue suficiente: la IA necesitó que se le describiera cada caso por separado con sus residuos correspondientes. La ambigüedad en la instrucción se traduce directamente en resultados incorrectos.

Integración con bases de datos Pasar de un prototipo visual a una app con datos reales y persistentes en Supabase implicó resolver tres capas de complejidad en prompts separados: conexión a la base de datos, autenticación de usuarios y políticas RLS. Intentar hacerlo todo en un solo prompt generó errores difíciles de identificar. La solución fue ir capa por capa.

Seguridad subestimada Configurar el cifrado de datos, la gestión de secretos y las reglas de acceso no es algo que la IA resuelva bien con instrucciones genéricas. Fue el reto más complejo del proyecto y requirió validación externa para confirmar que las políticas estaban correctamente implementadas.

8. Conclusiones

EcoCompliance Pro es la prueba más concreta de lo que el vibe coding puede lograr: una aplicación real, conectada a bases de datos, con autenticación, lógica dinámica por sectores y exportación de reportes, construida sin escribir una sola línea de código manualmente. Lo que antes habría requerido un equipo de desarrollo y meses de trabajo, hoy puede materializarse en ciclos cortos de descripción, generación y refinamiento.

Pero el caso de EcoCompliance Pro también deja clara una lección importante: el vibe coding no reemplaza el pensamiento, cada prompt efectivo nació de una comprensión profunda del problema qué necesita una PyME para cumplir con sus obligaciones ambientales, qué datos son críticos, qué errores pueden costar una multa y no de una descripción vaga entregada a una IA, la calidad del resultado siempre fue proporcional a la claridad de la instrucción.

Fase II

Prompts Refinados

Comercial:

Diseña esta aplicación como un producto SaaS listo para vender: Incluir planes (básico, pro), diseño profesional tipo startup, dashboard claro para toma de decisiones, enfoque en ahorro de costos y cumplimiento legal y mostrar valor para el negocio, no solo datos. Debe parecer una herramienta que una empresa pagaría mensualmente.

Seguridad:

Implementa un sistema de autenticación seguro para una aplicación SaaS llamada EcoCompliance Pro. Requisitos principales: 1. Registro de usuario: Registro con correo electrónico y contraseña, validación de correo (formato válido). Contraseña con reglas de seguridad: mínimo 8 caracteres, incluir mayúscula, número y símbolo y confirmación de contraseña.

2. Inicio de sesión: Login con correo y contraseña, mostrar/ocultar contraseña con icono (ojo) y mensajes claros de error (correo incorrecto, contraseña incorrecta). 3. Seguridad: Las contraseñas deben almacenarse encriptadas (hash, nunca en texto plano), usar autenticación segura (JWT o sesiones) y protección contra múltiples intentos fallidos (rate limit básico) 4. Recuperación de contraseña: Opción “¿Olvidaste tu contraseña?” ,envío de enlace al correo electrónico, pantalla para crear nueva contraseña y token de recuperación con expiración.

5. Cambio de contraseña: Usuario autenticado puede cambiar su contraseña, debe ingresar contraseña actual y validación de nueva contraseña. 6. UX/UI: Diseño moderno y limpio, formularios claros y simples, feedback visual (cargando, éxito, error) y botones visibles y accesibles. Pantallas a diseñar: Login, registro, recuperar contraseña, nueva contraseña y perfil (cambio de contraseña) Extras: Recordar sesión (opcional), cerrar sesión y protección de rutas (solo usuarios logueados acceden al dashboard). El sistema debe ser seguro, fácil de usar y alineado con buenas prácticas de aplicaciones SaaS modernas.

Permitir que el usuario pueda ver u ocultar la contraseña SOLO mientras la está escribiendo en el formulario, usando un icono de ojo. No mostrar nunca la contraseña almacenada en el sistema. Extras de seguridad: Verificación de correo electrónico y cierre automático de sesión por inactividad y notificación por correo cuando se cambia la contraseña y indicador de fortaleza de contraseña (débil, media, fuerte).

Lovable me pregunta si quiero personalizar los correos electrónicos con la marca EcoCompliance Pro (requiere configurar un dominio propio)? Respondo con el siguiente promt: Usar temporalmente el proveedor de correos por defecto para desarrollo y pruebas. No configurar todavía dominio personalizado. Mantener activados: verificación de correo, recuperación de contraseña y correos automáticos básicos. Cuando la aplicación esté lista para producción, configuraremos dominio propio.

Personalización por sectores y subsectores:

Implementa Onboarding inteligente por sector y subsector en EcoCompliance Pro. Sectores: Construcción, restaurantes y alimentos, manufactura, salud, Comercio y servicios, Transporte y logística.

Subsectores: Construcción: obras civiles, constructoras, remodelación, demolición, infraestructura vial. Restaurantes: restaurantes, cafeterías, panaderías, comidas rápidas, catering. Manufactura: textil, carpintería, metalmecánica, plásticos, papel. Salud: clínicas, consultorios, laboratorios, odontología. Comercio: oficinas, hoteles, retail, centros comerciales. Transporte: transporte carga, talleres, operadores logísticos.

Después de seleccionar sector/subsector, personalizar automáticamente: dashboard, residuos, alertas, obligaciones, indicadores, reportes y recomendaciones. UX: Onboarding visual simple, cards grandes, iconos por sector, lenguaje no técnico y experiencia intuitiva. Objetivo: Que la app se sienta especializada para cada empresa.

Mejora módulo de residuos:

Optimiza el módulo “Residuos” de EcoCompliance Pro para hacerlo simple, profesional e intuitivo. Mantener un único botón “Registrar residuo” dentro del módulo “Residuos”.

Flujo paso a paso: Tipo de residuo (adaptado por sector/subsector), cantidad (kg, t, litros, m3, bolsas, canecas, unidades), origen/ubicación, empresa gestora, fecha recolección, manifiesto, subir soporte PDF o imagen. Permitir crear residuos personalizados y guardarlos como sugerencias futuras. Corregir guardado en base de datos: guardar correctamente, actualizar tabla automáticamente Y mostrar confirmación.

Tabla funcional: editar, eliminar, duplicar y descargar soportes. Activar filtros: fecha, tipo, estado, gestor, sede y categoría. Activar exportación: Excel, PDF y CSV. Estados visuales: Pendiente, almacenado, recogido, gestionado y finalizado. Usar colores tipo semáforo. UX: minimalista, responsive, lenguaje simple, pocos clics y usuarios no técnicos. Automatización: Sugerir residuos, gestores y unidades frecuentes. Objetivo: Que el módulo funcione como un asistente inteligente de trazabilidad ambiental.

Video aplicación EcoCompliance Pro

Presentación aplicación EcoCompliance Pro

GitMind

GitMind es un espacio de trabajo visual integral impulsado por IA que está diseñado para transformar el caos de la información en claridad. Se define como un “segundo cerebro” de IA que va más allá de los mapas mentales convencionales, permitiendo capturar ideas y estructurar el conocimiento de forma eficiente.

¿Para qué sirve?

De acuerdo con las fuentes, esta herramienta sirve para transformar múltiples formatos de contenido (textos, videos, audios, archivos PDF, sitios web e imágenes) en resúmenes, mapas mentales estructurados y perspectivas visuales. Sus funciones principales incluyen:

• Creación de diagramas y mapas mentales: Permite generar automáticamente diagramas de flujo, diagramas UML, mapas de ideas a partir de una sola frase o archivos completos.
• Procesamiento de documentos y multimedia: Ofrece herramientas para resumir videos de YouTube, libros y archivos PDF, además de convertir audio a texto y extraer texto de imágenes mediante OCR.
• Apoyo al aprendizaje y productividad: Ayuda en la resolución de problemas, la planificación de proyectos y la organización de notas de investigación, facilitando el estudio y el desarrollo creativo

¿Cómo se usa?

El uso de GitMind es intuitivo y se basa en la interacción con su IA:

1. Entrada de información: El usuario puede subir un archivo, pegar un enlace o ingresar un texto directamente en la plataforma.
2. Procesamiento: La herramienta utiliza modelos de IA multimodales (como ChatGPT, Gemini o Claude) para analizar el contenido de forma segura en la nube.
3. Generación automática: La IA procesa los datos y genera automáticamente el resultado visual deseado, ya sea un mapa mental, un diagrama de flujo o una infografía.
4. Accesibilidad: Se puede utilizar desde diversas plataformas, incluyendo Windows, Mac, iOS, Android y como extensión de Chrome, permitiendo la colaboración y el acceso desde cualquier lugar

https://gitmind.com/app/docs/mdbj9alu

Créditos

Autores: Brayan Steven Forez Maldonado – Yeraldin Becerra Barrera
Editor: Magister ingeniero Carlos Iván Pinzón Romero
Código: UCIA-9 – UCIA-5
Universidad: Universidad Central

Fuentes

Edwards, B. (5 de marzo de 2025). Will the future of software development run on vibes? Ars Technica. https://arstechnica.com 

Naughton, J. (16 de marzo de 2025). Now you don't even need code to be a programmer. But you do still need expertise. The Observer. https://www.theguardian.com/observer

Wikipedia. (2025). Vibe coding. https://es.wikipedia.org/wiki/Vibe_coding

Roose, K. (27 de febrero de 2025). Not a coder? With A.I., just having an idea can be enough. The New York Times. https://www.nytimes.com

Agencia Nacional de Licencias Ambientales [ANLA]. (2020, 1 de octubre). Permiso y Autorización Emisiones Atmosféricas Fuentes Fijas. https://www.anla.gov.co/01_anla/allcategories-es-es/250-tramites-y-servicios/tramites/permisos-y-autorizaciones/emisiones-atmosfericas-fuentes-fijas 

Ministerio de Ambiente y Desarrollo Sostenible. (s.f.). Licenciamiento Ambiental. https://www.minambiente.gov.co/asuntos-ambientales-sectorial-y-urbana/licenciamiento-ambiental/ 

Secretaría Distrital de Integración Social [SDIS]. (2021). Instructivo gestión de residuos de construcción y demolición – RCD. chrome-https://sig.sdis.gov.co/images/documentos_sig/procesos/gestion_ambiental/documentos_asociados/20211021_ins_ga_005_v0_instructivo_gestion_integral_rcd.pdf