{"id":83989,"date":"2026-04-10T02:36:15","date_gmt":"2026-04-10T07:36:15","guid":{"rendered":"https:\/\/niixer.com\/?p=83989"},"modified":"2026-04-12T01:28:13","modified_gmt":"2026-04-12T06:28:13","slug":"vibe-coding-la-nueva-forma-de-programar","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2026\/04\/10\/vibe-coding-la-nueva-forma-de-programar\/","title":{"rendered":"EcoCompliance Pro: Gesti\u00f3n Ambiental mediante Vibe Coding"},"content":{"rendered":"\n

\u00bf Que es el Vibe Coding?<\/strong><\/h3>\n\n\n\n

El vibe coding es una forma de crear software usando lenguaje natural. En lugar de escribir c\u00f3digo l\u00ednea a l\u00ednea, describes lo que quieres construir y un modelo de inteligencia artificial lo genera por ti. El t\u00e9rmino fue acu\u00f1ado por Andrej Karpathy, cofundador de OpenAI, a principios de 2025, y r\u00e1pidamente se convirti\u00f3 en uno de los conceptos m\u00e1s debatidos en la industria tecnol\u00f3gica.<\/p>\n\n\n\n

La palabra “vibe” no es casual, hace referencia a dejarse llevar por la intenci\u00f3n y el flujo creativo: describir una idea, la IA la traduce a c\u00f3digo, se prueba, y si algo falla, le explicas el error para que lo corrija, “no es necesario entender cada l\u00ednea”, el valor est\u00e1 en la visi\u00f3n, no en la sintaxis.<\/p>\n\n\n\n

\u00bfPor que es importante el Vibe Coding?<\/strong><\/h3>\n\n\n\n

Su relevancia va m\u00e1s all\u00e1 de una tendencia tecnol\u00f3gica, el vibe coding est\u00e1 redefiniendo qui\u00e9n puede crear software.
Por primera vez, personas sin formaci\u00f3n t\u00e9cnica como dise\u00f1adores, 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\u00e9cnicos, el rol tambi\u00e9n cambia: el foco se desplaza de escribir c\u00f3digo a dise\u00f1ar soluciones, hacer las preguntas correctas y evaluar resultados, el vibe coding no elimina la necesidad de pensar bien los problemas; los hace m\u00e1s accesibles para todos.<\/p>\n\n\n\n

2. Ventajas y Desventajas<\/strong><\/h3>\n\n\n\n
\n

Ventajas del Vibe Coding:<\/strong><\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
    \n
  • Accesibilidad:<\/strong> Cualquiera puede crear software sin ser t\u00e9cnico.<\/li>\n\n\n\n
  • Velocidad:<\/strong> Prototipos listos en horas, no semanas.<\/li>\n\n\n\n
  • Ahorro:<\/strong> Reduce costos iniciales al no requerir un equipo de desarrollo.<\/li>\n\n\n\n
  • Foco en el problema:<\/strong> La IA se encarga del “c\u00f3mo” mientras el usuario se enfoca en el “qu\u00e9” y “para qu\u00e9”.<\/li>\n\n\n\n
  • Aprendizaje:<\/strong> El c\u00f3digo generado sirve como base para aprender programaci\u00f3n.<\/li>\n\n\n\n
  • Democratizaci\u00f3n:<\/strong> Personas con el conocimiento del negocio (ingenieros ambientales) pueden dise\u00f1ar la herramienta que realmente necesitan.<\/li>\n\n\n\n
  • Exportaci\u00f3n Multi-dispositivo:<\/strong> Generaci\u00f3n autom\u00e1tica de versiones para Android, iOS y PWA<\/strong> desde un mismo panel<\/li>\n<\/ul>\n<\/div>\n\n\n\n

    Desventajas del Vibe Coding:<\/strong><\/p>\n\n\n\n

    \n
    \"\"<\/figure>\n\n\n\n
      \n
    • Riesgos Ocultos:<\/strong> El c\u00f3digo sin revisar puede contener errores, vulnerabilidades o duda t\u00e9cnica.<\/li>\n\n\n\n
    • Escalabilidad Limitada:<\/strong> Excelente para prototipos, deficiente para sistemas grandes o de misi\u00f3n cr\u00edtica.<\/li>\n\n\n\n
    • Dependencia:<\/strong> Sin comprensi\u00f3n del sistema, el mantenimiento a largo plazo se dificulta.<\/li>\n\n\n\n
    • Depuraci\u00f3n Compleja:<\/strong> Es dif\u00edcil rastrear errores en c\u00f3digo creciente sin entender su base.<\/li>\n\n\n\n
    • Exceso de Confianza:<\/strong> Asumir que el c\u00f3digo IA es perfecto puede llevar a errores costosos en producci\u00f3n.<\/li>\n\n\n\n
    • Riesgos de Seguridad:<\/strong> Confiar ciegamente en la generaci\u00f3n autom\u00e1tica puede derivar en configuraciones inseguras de la nube o fugas de datos si no hay supervisi\u00f3n humana.<\/li>\n<\/ul>\n<\/div>\n\n\n\n

      3.Competencias para el Vibe Coding<\/strong><\/h3>\n\n\n\n

      El vibe coding exitoso no requiere saber programar, pero s\u00ed exige un conjunto diferente de habilidades:
      Pensamiento computacional:<\/strong> descomponer problemas en partes l\u00f3gicas y anticipar qu\u00e9 necesita hacer el sistema antes de ped\u00edrselo a la IA.
      Comunicaci\u00f3n precisa:<\/strong> la calidad del resultado depende directamente de qu\u00e9 tan bien describes lo que quieres, saber escribir instrucciones claras es la habilidad m\u00e1s importante.
      Pensamiento cr\u00edtico: <\/strong>no aceptar el c\u00f3digo a ciegas. Evaluar si funciona, si es seguro y si hace exactamente lo que se necesita.
      Iteraci\u00f3n r\u00e1pida:<\/strong> 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\u00e9cnicos b\u00e1sicos:<\/strong> entender qu\u00e9 es una base de datos, una API o un servidor permite dar instrucciones mucho m\u00e1s precisas, aunque no sepas programar.<\/p>\n\n\n\n

      4. Herramientas y T\u00e9cnicas utilizadas en la creaci\u00f3n de la App<\/strong><\/h3>\n\n\n\n
      \n
      \n
      \n
      Categor\u00eda<\/strong><\/td>Herramienta\/ Tecnica<\/strong><\/td><\/tr>
      Plataforma Principal<\/strong><\/td>
      Lovable<\/strong>
      <\/td><\/tr>
      Motor de IA<\/strong><\/td>Claude 3.5 Sonnet<\/strong><\/td><\/tr>
      Base de Datos<\/strong><\/td>Supabase
      <\/strong><\/td><\/tr>

      Metodolog\u00eda<\/strong>
      <\/td>
      Vibe Coding<\/strong>
      <\/td><\/tr>
      Estrategia de Desarrollo<\/strong><\/td>Incremental \/ Modular<\/strong><\/td><\/tr>
      Visualizaci\u00f3n
      <\/td>      		Artifacts<\/strong><\/td><\/tr>
      L\u00f3gica de Interfaz<\/strong><\/td>L\u00f3gica Din\u00e1mica<\/strong><\/td><\/tr>
      Despliegue<\/strong><\/td>PWA (Progressive Web App)<\/strong><\/td><\/tr>
      An\u00e1lisis de Datos<\/strong><\/td>Dashboard Interactivo<\/strong><\/td><\/tr>
      ChatGPT<\/strong><\/td>IA Generativa<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n
      <\/div>\n\n\n\n
      \n
      Descripci\u00f3n y Funci\u00f3n<\/strong>
      <\/td><\/tr>
      Herramienta de “prompt-to-app” que convierte descripciones en lenguaje natural en aplicaciones funcionales conectadas a bases de datos.<\/td><\/tr>
      Modelo de lenguaje de Anthropic utilizado como motor de razonamiento y generaci\u00f3n de c\u00f3digo de alta calidad.<\/td><\/tr>
      Backend utilizado para la persistencia de datos<\/strong>, gesti\u00f3n de usuarios y seguridad mediante pol\u00edticas RLS.<\/td><\/tr>
      T\u00e9cnica de desarrollo basada exclusivamente en dar instrucciones en lenguaje natural, eliminando la necesidad de programar manualmente.<\/td><\/tr>
      T\u00e9cnica de construir la app por bloques l\u00f3gicos (Onboarding, Registro, Alertas) para optimizar cr\u00e9ditos y reducir errores.
      <\/td><\/tr>
      Funci\u00f3n de Claude que permite previsualizar y descargar componentes de c\u00f3digo para pruebas r\u00e1pidas.<\/td><\/tr>
      T\u00e9cnica que ajusta formularios y permisos autom\u00e1ticamente seg\u00fan el sector industrial seleccionado por el usuario.<\/td><\/tr>
      Formato que permite que la aplicaci\u00f3n se instale en dispositivos m\u00f3viles directamente desde el navegador.
      <\/td><\/tr>
      Uso de gr\u00e1ficos e insights generados a partir de datos (como archivos CSV) para la toma de decisiones.<\/td><\/tr>
      Perfeccionamiento de los prompts y mejorar la eficiencia de los mismos.<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n

      5. \u00bfC\u00f3mo se creo la App desde 0 sin Saber C\u00f3digo?<\/strong><\/h3>\n\n\n\n

      El proceso de crear una aplicaci\u00f3n con vibe coding sigue una l\u00f3gica iterativa. No es lineal: se avanza por ciclos de descripci\u00f3n, generaci\u00f3n, prueba y refinamiento.<\/p>\n\n\n\n

      Paso 1 \u2014 Definici\u00f3n del problema y del p\u00fablico objetivo<\/strong>: Todo gran proyecto comienza con un plan claro. Antes de abrir cualquier herramienta, se debe definir qu\u00e9 problema espec\u00edfico resuelve la app. En este caso, el objetivo es simplificar el cumplimiento ambiental para PyMEs, ayud\u00e1ndoles a evitar multas mediante la gesti\u00f3n de residuos y alertas legales<\/p>\n\n\n\n

      Paso 2 \u2014 Selecci\u00f3n de las herramientas Tecnol\u00f3gica<\/strong>: se eligen herramientas que permitan pasar de la idea al producto sin programar manualmente. Para esta app, el arsenal definitivo incluy\u00f3:<\/p>\n\n\n\n

        \n
      • Lovable:<\/strong> Como plataforma principal para convertir prompts en una aplicaci\u00f3n full-stack.<\/li>\n\n\n\n
      • Claude 3.5 Sonnet:<\/strong> Como motor de razonamiento para generar c\u00f3digo y l\u00f3gica compleja.<\/li>\n\n\n\n
      • ChatGPT:<\/strong> IA generativa que realiz\u00f3 recomendaciones de mejora y perfeccionamiento de los prompts.<\/li>\n\n\n\n
      • Supabase:<\/strong> Para la persistencia de datos y gesti\u00f3n de usuarios en tiempo real.<\/li>\n<\/ul>\n\n\n\n

        Paso 3 \u2014 Generaci\u00f3n del “Esqueleto” Inicial<\/strong><\/strong>: El primer paso t\u00e9cnico es describir la estructura b\u00e1sica a la IA mediante un prompt estructurado.<\/p>\n\n\n\n

          \n
        • Se solicit\u00f3 un sidebar oscuro con secciones para el Dashboard, Registro, Alertas y Normativa.<\/li>\n\n\n\n
        • Se implement\u00f3 un Onboarding para que el usuario elija su sector (Alimentaria, Construcci\u00f3n, Qu\u00edmica o Salud), lo que condiciona el resto de la experiencia.<\/li>\n<\/ul>\n\n\n\n

          <\/p>\n\n\n\n

          5.1<\/strong> Herramientas internas que optimizan los procesos:<\/strong><\/h3>\n\n\n\n

          Paso 4 \u2014 Desarrollo Incremental de la L\u00f3gica<\/strong><\/strong>: En lugar de pedir todo a la vez para evitar errores, la app se construye por bloques.<\/p>\n\n\n\n

            \n
          • Formularios Din\u00e1micos:<\/strong> Se configur\u00f3 el registro para que los tipos de residuos cambien seg\u00fan el sector industrial.<\/li>\n\n\n\n
          • Sistema de Cumplimiento:<\/strong> Se inyect\u00f3 la l\u00f3gica de vencimiento de permisos, usando colores (rojo\/naranja) seg\u00fan la proximidad de la fecha legal.<\/li>\n<\/ul>\n\n\n\n

            .Paso 5 \u2014 Robustez T\u00e9cnica y Seguridad<\/strong><\/strong>: Una vez funcional, se a\u00f1aden las capas de seguridad imprescindibles para un entorno real.<\/p>\n\n\n\n

              \n
            • Autenticaci\u00f3n:<\/strong> Se implement\u00f3 un sistema de Login<\/strong> para proteger la informaci\u00f3n sensible de cada empresa.<\/li>\n\n\n\n
            • Pol\u00edticas RLS:<\/strong> Se configuraron reglas de seguridad en la base de datos para que cada usuario solo vea sus propios registros.<\/li>\n<\/ul>\n\n\n\n

              Paso 6 \u2014 Refinamiento de la Experiencia de Usuario (UX)<\/strong><\/strong>: Se a\u00f1adieron funciones avanzadas para convertir el prototipo en una herramienta de inteligencia de negocio.<\/p>\n\n\n\n

                \n
              • Selector de Rango de Fechas:<\/strong> Un calendario interactivo para filtrar la informaci\u00f3n del Dashboard por d\u00edas, semanas o meses.<\/li>\n\n\n\n
              • Gesti\u00f3n de Sucursales:<\/strong> La capacidad de manejar m\u00faltiples sedes de una misma empresa de forma independiente.<\/li>\n\n\n\n
              • Exportaci\u00f3n Multiformato:<\/strong> Generaci\u00f3n de reportes autom\u00e1ticos en PDF y Excel basados en los filtros aplicados.<\/li>\n<\/ul>\n\n\n\n

                Paso 7 \u2014<\/strong>Prueba y Validaci\u00f3n<\/strong>: El paso final es probar la aplicaci\u00f3n con datos reales<\/strong> (con10 registros de prueba) para analizar los gr\u00e1ficos que realiza, la informaci\u00f3n que exporta e ir evaluando mejoras en la App.<\/p>\n\n\n\n

                5.2 Dise\u00f1o de la App: Caso Pr\u00e1ctico<\/strong><\/h3>\n\n\n\n

                EcoCompliance Pro est\u00e1 dise\u00f1ada para resolver el problema de la fragmentaci\u00f3n de datos ambientales en PyMEs.<\/p>\n\n\n\n

                  \n
                1. Onboarding Sectorizado:<\/strong> El usuario elige su industria (Alimentaria, Construcci\u00f3n, Qu\u00edmica, Salud), lo que condiciona toda la l\u00f3gica de la app.<\/li>\n\n\n\n
                2. M\u00f3dulo de Registro:<\/strong> Permite capturar datos espec\u00edficos como RME (Residuos de Manejo Especial) y residuos peligrosos con campos de cantidad y empresa recolectora.<\/li>\n\n\n\n
                3. Sistema de Alertas:<\/strong> Monitorea licencias cr\u00edticas (Vertidos, Emisiones, RCD) mostrando estados visuales: naranja para vencimientos pr\u00f3ximos (<30 d\u00edas) y rojo para documentos vencidos.<\/li>\n\n\n\n
                4. Dashboard Inteligente:<\/strong> Un panel interactivo con Selector de rango de fechas que permite exportar reportes en PDF y Excel filtrados por sucursal o periodo de tiempo.<\/li>\n<\/ol>\n\n\n\n
                  \n
                  \"\"<\/figure>\n<\/figure>\n\n\n\n

                  <\/p>\n\n\n\n

                  6. Prompts y refinado<\/strong><\/h3>\n\n\n\n

                  Crea la base de la aplicaci\u00f3n ‘EcoCompliance Pro’. Implementa un sidebar oscuro con las secciones: Dashboard, Registro de Residuos, Alertas y Biblioteca. El dise\u00f1o central debe ser minimalista en tonos verdes y grises. Al iniciar, muestra un modal de Onboarding donde el usuario elija su sector: Alimentaria, Construcci\u00f3n, Manufactura Qu\u00edmica o Salud. Guarda esta elecci\u00f3n en el estado de la app.<\/p>\n\n\n\n

                  Configura el ‘Registro de Residuos’ para que sea din\u00e1mico. Si el sector es Alimentaria, muestra AVU y lodos; si es Construcci\u00f3n, muestra RCD y madera; si es Manufactura Qu\u00edmica, muestra solventes y lodos qu\u00edmicos; si es Salud, muestra biosanitarios. En todos los sectores, incluye una opci\u00f3n de RME (Cart\u00f3n\/Papel). Asegura que el formulario tenga campos para cantidad (kg), fecha y empresa recolectora.<\/p>\n\n\n\n

                  A\u00f1ade el panel de ‘Alertas y Permisos’. Configura permisos autom\u00e1ticos: Vertidos (Alimentaria), RCD (Construcci\u00f3n), Emisiones (Qu\u00edmica) y Residuos Hospitalarios (Salud). Implementa un sistema de colores: Naranja si el vencimiento es en <30 d\u00edas y Rojo si ya venci\u00f3. Conecta la app a Supabase para que los datos persistan y a\u00f1ade un bot\u00f3n en el Dashboard para exportar los reportes en PDF.<\/p>\n\n\n\n

                  Seguridad y Autenticaci\u00f3n: Implementa un sistema de Login y Registro de usuarios. Una vez activado, configura las pol\u00edticas RLS (Row Level Security) en Supabase para que cada usuario solo pueda ver y gestionar los datos de su propia empresa, eliminando el acceso p\u00fablico a la base de datos

                  Contenido de la Biblioteca Normativa: Rellena la secci\u00f3n de ‘Biblioteca’ con una lista interactiva de normativas aplicables. Incluye res\u00famenes de: General: Ley de Gesti\u00f3n Integral de Residuos. Alimentaria: Norma de Vertidos en Alcantarillado. Construcci\u00f3n: Resoluci\u00f3n de Gesti\u00f3n de Escombros (RCD). Qu\u00edmica: Decreto de Manejo de Sustancias y Residuos Peligrosos. Salud: Manual de Gesti\u00f3n de Residuos Hospitalarios.<\/p>\n\n\n\n

                  Panel de Alertas Inteligente: Ajusta el componente de ‘Alertas’ para que los c\u00e1lculos de vencimiento sean autom\u00e1ticos bas\u00e1ndose en la fecha actual. Si un permiso como la ‘Licencia de Vertidos’ est\u00e1 vencido, debe mostrar un icono rojo pulsante y una notificaci\u00f3n de advertencia inmediata.<\/p>\n\n\n\n

                  A\u00f1ade un bot\u00f3n de eliminar (icono de papelera) en cada tarjeta de la secci\u00f3n de Alertas y Permisos para que yo pueda quitar los que no apliquen.<\/p>\n\n\n\n

                  Conecta la aplicaci\u00f3n a una base de datos real (Supabase) para asegurar la persistencia de los datos. Asegura que sea una PWA (Progressive Web App) para que pueda instalarse en dispositivos m\u00f3viles.<\/p>\n\n\n\n

                  El Dashboard debe mostrar un resumen visual (gr\u00e1ficos) del total de residuos generados en el mes y el estado general de cumplimiento.<\/p>\n\n\n\n

                  Actualiza el sistema de autenticaci\u00f3n de EcoCompliance Pro con las siguientes mejoras de seguridad y UX: Visibilidad de Contrase\u00f1a: En los campos de contrase\u00f1a de las pantallas de Login y Registro, a\u00f1ade un icono de ‘ojo’ que permita al usuario alternar entre ocultar y ver los caracteres que est\u00e1 escribiendo.<\/p>\n\n\n\n

                  Flujo de Contrase\u00f1a Olvidada: A\u00f1ade un enlace que diga ‘\u00bfOlvidaste tu contrase\u00f1a?’ justo debajo del campo de login. Implementa la l\u00f3gica de Supabase Auth para que, al hacer clic, el usuario pueda ingresar su correo electr\u00f3nico y recibir un email de recuperaci\u00f3n autom\u00e1tico. Crea una pantalla de ‘Restablecer Contrase\u00f1a’ a la que el usuario sea redirigido desde el correo para ingresar su nueva clave de forma segura.<\/p>\n\n\n\n

                  Mejora el filtro del Dashboard de ‘EcoCompliance Pro’. En lugar de solo opciones fijas, implementa un Date Range Picker (Selector de rango de fechas). Permite que el usuario seleccione una fecha de inicio y una de fin en un calendario. Al aplicar el rango, todos los gr\u00e1ficos de residuos y el estado de cumplimiento deben actualizarse autom\u00e1ticamente para mostrar solo los datos de ese periodo.<\/p>\n\n\n\n

                  <\/p>\n\n\n\n